ssm/pageHelper+vue的前后端分离的分页查询
1. 需要依赖的jar包
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>4.0.0version>
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
<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;
}