ssm/pageHelper+vue的前后端分离的分页查询
1. 需要依赖的jar包<!--分页插件 --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pa
·
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;
}
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)