SpringBoot+Druid+pageHelper+vue+axios+bootstrap
阿新 • • 發佈：2018-11-30
後端部分
pom.xml
新增：分頁&&連線池
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/druid --> 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 mapper檔案
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC
"-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<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
<!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>
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;
});
}
})();