SpringBoot+Druid+pageHelper+vue+axios+bootstrap
后端部分
pom.xml
新增：分页&&连接池
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-starterartifactId>
<version>1.2.3version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druid-spring-boot-starterartifactId>
<version>1.1.10version>
dependency>
application.yml
新增：druid连接池配置&&分页配置（标明数据库方言）
server:
port: 9001
spring:
datasource:
url: jdbc:mysql://192.168.10.161:3306/mydemo
driver-class-name: com.mysql.jdbc.Driver
username: root
password: ok
type: com.alibaba.druid.pool.DruidDataSource
druid:
initial-size: 10
max-active: 30
min-idle: 5
max-wait: 60000
validation-query: select 1
test-on-borrow: false
test-on-return: false
test-while-idle: true
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
mybatis:
type-aliases-package: com.njbdqn.mysee.vo
mapper-locations: mapper/*.xml
pagehelper:
helper-dialect: mysql
mapper文件
<mapper namespace="com.njbdqn.mysee.dao.ICardDAO">
<select id="findCand" parameterType="Bankcards" resultType="Bankcards">
select u.username,b.cardid,b.cardno,b.regdate,
ifnull(tmp.balance,0) balance
from userinfos u inner join bankcards b on u.userid=b.userid
left join
(select t.cardid,
sum(if(trantype=1,tranmoney,-1*tranmoney)) balance from trans t
group by cardid )tmp on
b.cardid = tmp.cardid
<where>
<if test="username != null">
u.username like concat('%',#{username},'%')
if>
<if test="cardno != null">
and b.cardno = #{cardno}
if>
where>
select>
mapper>
分页两种写法：
public PageInfo<Bankcards> getBean(int cp,Bankcards card){
Page<Bankcards> pg = PageHelper.startPage(cp,10);
cardDAO.findCand(card);
return new PageInfo<Bankcards>(pg);
}
public PageInfo<Employee> getEmployees(Employee employee,int pageNumber){
PageHelper.startPage(pageNumber,3);
List<Employee> employees = employeeDao.getEmployees(employee);
PageInfo<Employee> pageInfo=new PageInfo<>(employees);
return pageInfo;
}
测试连接池代码：
@RunWith(SpringRunner.class)
@SpringBootTest
public class MydemocardApplicationTests {
@Autowired
private UserService userService;
@Test
public void contextLoads() {
UserInfos userInfos =new UserInfos();
for (int i=0;i<50;i++){
Long time =System.currentTimeMillis();
userService.findAll(userInfos,2);
System.out.println(System.currentTimeMillis()-time);
}
}
}
前端部分
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>
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;
},
日期过滤器
dateFormate:function (value) {
var date=new Date(value);
var year=date.getFullYear();
var month=date.getMonth()+1;
var date=date.getDate();
return year+"-"+month+"-"+date;
}
},
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;
});
}
})();