SpringBoot+Druid+pageHelper+vue+axios+bootstrap

后端部分

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 -->
<!-- https://mvnrepository.com/artifact/com.alibaba/druid-spring-boot-starter -->
<dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.1.10</version>
</dependency>

application.yml
新增：druid连接池配置&&分页配置（标明数据库方言）

server:port: 9001
spring:datasource:url: jdbc:mysql://192.168.10.161:3306/mydemodriver-class-name: com.mysql.jdbc.Driverusername: rootpassword: oktype: com.alibaba.druid.pool.DruidDataSourcedruid:initial-size: 10max-active: 30min-idle: 5max-wait: 60000validation-query: select 1test-on-borrow: falsetest-on-return: falsetest-while-idle: truepool-prepared-statements: truemax-pool-prepared-statement-per-connection-size: 20
mybatis:type-aliases-package: com.njbdqn.mysee.vomapper-locations: mapper/*.xml
pagehelper:helper-dialect: mysql

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) balancefrom userinfos u inner join bankcards b on u.userid=b.useridleft join(select t.cardid,sum(if(trantype=1,tranmoney,-1*tranmoney)) balance from trans tgroup by cardid  )tmp onb.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 {@Autowiredprivate UserService userService;@Testpublic 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;});}
})();

SpringBoot+Druid+pageHelper+vue+axios+bootstrap相关推荐

SpringBoot + Mybatis + Druid + PageHelper 实现多数据源并分页
点击关注公众号,Java干货及时送达本篇文章主要讲述的是SpringBoot整合Mybatis.Druid和PageHelper 并实现多数据源和分页.其中SpringBoot整合Mybatis这块 ...
SpringBoot+Mybatis+ Druid+PageHelper 实现多数据源并分页
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者: 虚无境 cnblogs.com/xuwujing/p/89 ...
SpringBoot + Mybatis + Druid + PageHelper 实现多数据源分页
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 虚无境的博客来源 | http://8rr. ...
Vue使用Bootstrap，axios和生命周期函数实现列表效果
Vue使用Bootstrap,axios和生命周期函数实现列表效果 1. 项目构建 1.1使用vist创建vue项目,导入bootstrap,axios包 1.2创建后台文件 2. 前台文件 2.1父 ...
springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目（笔记,帮填坑）
根据B站up主MarkerHub视频制作的一个笔记我的博客 B站博主链接: https://www.bilibili.com/video/BV1PQ4y1P7hZ?p=1 博主的开发文档: http ...
Java项目:在线淘房系统(租房、购房)(java+SpringBoot+Redis+MySQL+Vue+SpringSecurity+JWT+ElasticSearch+WebSocket)
源码获取:博客首页 "资源" 里下载! 该系统有三个角色,分别是:普通用户.房屋中介.管理员.普通用户的功能:浏览房屋信息.预约看房.和中介聊天.申请成为中介等等.房屋中介的功能: ...
Java项目:考试管理系统(java+Springboot+Maven+Jpa+Vue+Mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括: 支持单选题.多选题.判断题支持学生(student).教师(teacher).管理员(admin)三种角色学 ...
Spring Boot + MyBatis + Druid + PageHelper 实现多数据源并分页
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者 | 虚无境链接 | cnblogs.com/xuwujin ...
druid 多数据源_SpringBoot+Mybatis+Druid+PageHelper 实现多数据源并分页
今天跟大家分享常用的SpringBoot+Mybatis+ Druid+PageHelper 实现多数据源并分页的知识. 1 SpringBoot+Mybatis+ Druid+PageHelper ...

SpringBoot+Druid+pageHelper+vue+axios+bootstrap

后端部分

前端部分

SpringBoot+Druid+pageHelper+vue+axios+bootstrap相关推荐

最新文章

热门文章