ssm/pageHelper+vue的前后端分离的分页查询

1. 需要依赖的jar包&lt;!--分页插件 --&gt;&lt;dependency&gt;&lt;groupId&gt;com.github.pagehelper&lt;/groupId&gt;&lt;artifactId&gt;pa

大小鱼鱼鱼与鱼.

2991人浏览 · 2018-11-27 09:23:37

大小鱼鱼鱼与鱼. · 2018-11-27 09:23:37 发布

1. 需要依赖的jar包

<!--分页插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>4.0.0</version>
    </dependency>

2.spring中的配置

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!-- 配置分页插件 -->
        <property name="plugins">
            <array>
                <bean id="helper" class="com.github.pagehelper.PageHelper">
                    <!-- 这里的几个配置主要演示如何使用，如果不理解，一定要去掉下面的配置 -->
                    <property name="properties">
                        <value>
                            <!--使用的数据库类型-->
                            dialect=mysql
                            reasonable=true
                            supportMethodsArguments=true
                            params=count=countSql
                            autoRuntimeDialect=true
                        </value>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

3.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行卡信息平台</title>
    <link type="text/css" rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="container">
    <div class="row text-center">
        <h1>银行卡信息平台</h1>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-10">
            <form action="" id="myfrm" class="">
                <input type="hidden" name="cp" value="1"/>
                <div class="form-group"><label for="" class="col-xs-1 control-label">用户名</label>
                    <div class="col-xs-3"><input type="text" name="username" class="form-control" v-model="username"></div>
                </div>
                <div class="form-group"><label for="" class="col-xs-1 control-label">卡号</label>
                    <div class="col-xs-3"><input type="text" name="cardno" class="form-control" v-model="cardno"></div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2">
                        <button type="button" class="btn btn-primary" @click="search()"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <table class="table table-striped table-hover table-bordered">
                <tr>
                    <th class="text-center">用户编号</th>
                    <th class="text-center">用户卡号</th>
                    <th class="text-center">用户姓名</th>
                    <th class="text-center">注册日期</th>
                    <th class="text-center">卡上余额</th>
                </tr>
                <tr v-for="(us,index) in pageInfo.list">
                    <td>{{us.cardid}}</td>
                    <td>{{us.cardno}}</td>
                    <td>{{us.username}}</td>
                    <td>{{us.regdate}}</td>
                    <td class="hasmoney" :class="{nomoney:ismoney[index]}">{{us.balance | priceFilter}}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-4 col-xs-4">
            <ul class="pagination">
                <li><a href="javascript:;" @click="jump(1)">首页</a></li>
                <li><a href="javascript:;" @click="jump(pageInfo.prePage)">上页</a></li>
                <li><a href="javascript:;" @click="jump(pageInfo.nextPage)">下页</a></li>
                <li><a href="javascript:;" @click="jump(pageInfo.pages)">尾页</a></li>
            </ul>
        </div>
    </div>
</div>

    <script type="text/javascript" src="lib/vue/vue.min.js"></script>
    <script type="text/javascript" src="lib/vue/axios.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>

4.index.js

;(function(){
    var myVue = new Vue({
        el:'.container',
        data:{
            pageInfo:{},
            ismoney:[],
            username:'',
            cardno:''
        },
        created:function(){
           dataLoad();
        },
        filters:{
            priceFilter:function(val){
                return parseInt(val)>0?"余额:"+val:"欠款:"+val;
            }
        },
        methods:{
            jump:function(page){
               dataSearch(page);
            },
            search:function(){
                dataSearch();
            }
        }
    });

    /**
     * 搜索对应的数据 并根据用户传入的页码值 组装后传入dataLoad进行页面数据修改
     * @param page 页码值
     */
    function dataSearch(page){
        page = page||1;
        var pm = {params:{}};
        if(myVue.$data.cardno.trim()!=''){
            pm.params['cardno']=myVue.$data.cardno.trim();
        }
        pm.params['username']=myVue.$data.username.trim();
        pm.params.cp=page;
        dataLoad(pm);
    }

    /**
     * 通过axios将数据传送到后端，并将返回的数据填充到vue的data数据中
     * @param pm 传入参数
     */
    function dataLoad(pm){

        pm = pm||{params:{}};
        axios.get('http://localhost:9001/search',pm).then(function(res){
            var colors =[];
            for(var u in res.data.list){
                var us = res.data.list[u];
                colors.push(parseInt(us.balance)<0?true:false);
            }
            myVue.$data.ismoney = colors;
            myVue.$data.pageInfo = res.data;
        });
    }
})();

5.mapper.xml

<resultMap id="empMap" type="Emp">
        <id property="empId" column="emp_id"/>
        <result property="empName" column="emp_name"/>
        <result property="gender" column="gender"/>
        <result property="email" column="email"/>
        <result property="dId" column="d_id"/>
        <association property="dept" javaType="Dept">
            <id property="deptId" column="dept_id"/>
            <result property="deptName" column="dept_name"/>
        </association>
    </resultMap>
    <select id="findEmpList" resultMap="empMap">
        select a.*,b.* from dept a JOIN emp b on a.dept_id=b.d_id
        <where>
            <if test="empName!=null and empName!=''">
                and b.emp_name like concat('%',#{empName},'%')
            </if>
        </where>
    </select>

List<Dept> findDeptList();

6.serviceImpl

@Override
    public List<Dept> findDeptList() {
        System.out.println("dept:"+deptOrEmpService.findDeptList());
        return deptOrEmpService.findDeptList();
    }

7.controller

@RequestMapping("/findEmpList")
    public PageInfo<Emp> findEmpList(@RequestParam(defaultValue = "1",required = false) int cp,
                                     @RequestParam(value = "empName",required = false) String empName,
                                     ModelMap map){
        PageInfo<Emp> empList = deptOrEmpService.findEmpList(cp,empName);
        return empList;
    }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...