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;
        });
    }
})();

你可能感兴趣的:(web前端,SpringBoot,Bootstrap)