SpringBoot实现分类搜索（模糊）查询 Pageable分页

Love The Way You Lie 2023-06-14 10:48 183阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70][]

数据库结构：

Student学生表

stu表

sid学生id

sname 学生姓名

sex性别

cid班级id

address地址

sorts 排序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 1][]

classes班级表

cid  cname

1.  1801
2.  1802

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 2][]

经过查找又发现了可以在sql语句里写一个case判断

解决了sql的外键判断为0不显示数据的尴尬，这样就可以写Integer

**CASE WHEN :cc\_id=0  THEN 1  ELSE cc\_id=:cc\_id END**

在下面我放的是全部的代码，包含一些增删改查

底下有第二种方式，是之前写的，不是很友好

附上代码

StuDao

package com.msfh.news.dao;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.Pageable;
    import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    import org.springframework.data.jpa.repository.Query;
    import org.springframework.data.repository.PagingAndSortingRepository;
    
    import com.msfh.news.eneity.Stu;
    
    public interface StuDao extends PagingAndSortingRepository<Stu, Integer>, JpaSpecificationExecutor<Stu> {
    	//分页
    	@Query(value = "select * from stu join classes on stu.cc_id = classes.ccid where " +
                " sname like CONCAT('%',:sname,'%')"
                + " and CASE WHEN :cc_id=0  THEN 1  ELSE cc_id=:cc_id END " + 
                " order by stu.sid asc",nativeQuery = true)
        Page<List<Map>> findPage(Pageable pageable,String sname,Integer cc_id);
    }

StuService层

package com.msfh.news.service;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.Pageable;
    import org.springframework.stereotype.Service;
    
    import com.msfh.news.dao.StuDao;
    import com.msfh.news.eneity.Stu;
    
    import lombok.val;
    
    @Service
    public class StuService {
        @Autowired
        private StuDao stuDao;
        
        
        /**
         * 分页
         * @return
         */
        public Page<List<Map>> findPage(Pageable pageable,String sname,Integer cc_id){
            return stuDao.findPage(pageable,sname,cc_id);
        }
        
        public void save(Stu stu) {
        	stuDao.save(stu);
        }
        
        public void delete(Stu stu) {
        	stuDao.delete(stu);
        }
    }

StuController

package com.msfh.news.controller;
    
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Pageable;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.msfh.news.eneity.Banner;
    import com.msfh.news.eneity.Stu;
    import com.msfh.news.service.BannerService;
    import com.msfh.news.service.StuService;
    
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    
    @Controller
    @RequestMapping("stu")
    public class StuController {
        @Autowired
        private StuService stuService;
        
        
        @RequestMapping("stu")
        public String stu() {
        	return "/news/stu";
        }
        
        @RequestMapping("stuAdd")
        public String stuAdd() {
        	return "/news/stuAdd";
        }
        
        /**
         * ajax分页
         * @return
         */
        @RequestMapping("findPage")
        @ResponseBody
        public Page<List<Map>> findPage(HttpServletRequest request){
            String sname = request.getParameter("sname");
            Integer cc_id = Integer.parseInt(request.getParameter("ccid"));
            Integer NowPage = Integer.parseInt(request.getParameter("NowPage"));
            Pageable Page = PageRequest.of(NowPage-1, 3);
            Page<List<Map>> data = stuService.findPage(Page,sname,cc_id);
            return data;
        }
        
        @RequestMapping("save")
        @ResponseBody
        public JSONObject save(HttpServletRequest request) {
        	String stuData = request.getParameter("stuData");
        	JSONObject jsonObject = JSONObject.fromObject(stuData);
        	Stu stu = (Stu) jsonObject.toBean(jsonObject,Stu.class);
        	stuService.save(stu);
        	JSONObject data = new JSONObject();
        	data.put("status", "1");
        	data.put("success","添加成功");
        	return data;
        }
        
        @RequestMapping("delete")
        @ResponseBody
        public String delete(HttpServletRequest request) {
        	Integer sid = Integer.parseInt(request.getParameter("sid"));
        	Stu stu = new Stu();
        	stu.setSid(sid);
        	stuService.delete(stu);
        	return "删除成功";
        }
        
        @RequestMapping("deleteAll")
        //@ResponseBody
        public String deleteAll(HttpServletRequest request) {
        	String sids = request.getParameter("sids");
        	JSONArray jsonArray = JSONArray.fromObject(sids);
        	for (int i = 0; i < jsonArray.size(); i++) {
    			Stu stu = new Stu();
    			stu.setSid((Integer) jsonArray.get(i));
    			stuService.delete(stu);
    		}
        	return "news/stu";
        }
    }

stu.html

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <meta name="renderer" content="webkit">
      <title></title>
      <link rel="stylesheet" href="/css/pintuer.css">
      <link rel="stylesheet" href="/css/admin.css">
      <script src="/js/jquery.js"></script>
      <script src="/js/pintuer.js"></script>
      <script src="/js/vue.min.js"></script>
      <style type="text/css">
        tr td {
          text-align: center;
          width: 200px;
        }
    
    
        .page-bar{
          margin:0 auto;
          margin-top: 50px;
          overflow: hidden;
        }
        ul,li{
          margin: 0px;
          padding: 0px;
        }
        li{
          list-style: none
        }
        .page-bar li:first-child>a {
          margin-left: 0px
        }
        .page-bar a{
          border: 1px solid #ddd;
          text-decoration: none;
          position: relative;
          float: left;
          padding: 6px 12px;
          margin-left: -1px;
          line-height: 1.42857143;
          color: #5D6062;
          cursor: pointer;
          margin-right: 20px;
        }
        .page-bar a:hover{
          background-color: #eee;
        }
        .page-bar a.banclick{
          cursor:not-allowed;
        }
        .page-bar .active a{
          color: #fff;
          cursor: default;
          background-color: #E96463;
          border-color: #E96463;
        }
        .page-bar i{
          font-style:normal;
          color: #d44950;
          margin: 0px 4px;
          font-size: 12px;
        }
      </style>
    </head>
    <body>
    <div id="app">
    <div class="panel admin-panel">
      <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
      <div class="padding border-bottom">
        <ul class="search" style="padding-left:10px;">
          <li> <a class="button border-main icon-plus-square-o" href="/stu/stuAdd"> 添加内容</a> </li>
            <li>搜索：</li>
    
            <li>
               <select name="fid" class="input" style="width:200px; line-height:17px;"  data-validate="required:请选择班级" v-model="ccid" v-on:change="dataListFn(1)">
                                <option value="0">请选择班级</option>
                                <option v-for="cla in classes" :value="cla.ccid">{
       {cla.ccname}}</option>
               </select>
            </li>
    
            <li>
              <input type="text" placeholder="请输入搜索关键字" v-model="sname" class="input" style="width:250px; line-height:17px;display:inline-block" />
              <button class="button bg-main icon-check-square-o" type="submit" name="submit" v-on:click="dataListFn(1)"> 提交</button></li>
        </ul>
      </div>
    
        <table class="table table-hover text-center">
          <tr>
            <th width="100" style="text-align:left; padding-left:20px;">ID</th>
            <th>学生姓名</th>
            <th>性别</th>
            <th>班级名称</th>
            <th>地址</th>
            <th width="310">操作</th>
          </tr>
    
    
            <tr v-for="stu,key in stu">
              <td style="text-align:left; padding-left:20px;">
                <input type="checkbox" name="sid"  :value="stu.sid" v-model="sids" />
                                  排序: <input type="text" style="width: 33px;" v-model="stu.sid" @blur="sort(stu.sid,stu.s_sorts)" />
              </td>
              <td>{
       {stu.sname}}</td>
              <td>{
       {stu.sex}}</td>
              <td>{
       {stu.ccname}}</td>
              <td>{
       {stu.address}}</td>
              <td><div class="button-group"> <a class="button border-main"><span class="icon-edit"></span> 修改</a> <a class="button border-red"  @click="del(stu.sid,key)"><span class="icon-trash-o"></span> 删除</a>  </div></td>
            </tr>
    
    
          <tr>
            <td style="text-align:left; padding:19px 0;padding-left:20px;">
              <input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选
            </td>
            <td colspan="7" style="text-align:left;padding-left:20px;">
              <a  class="button border-red icon-trash-o" style="padding:5px 15px;" v-on:click="deleteAll()"> 删除</a>
                  
              
          </tr>
    
    
        </table>
    
        
        <div class="page-bar">
          <ul>
            <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
            <li v-if="cur==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
              <a v-on:click="btnClick(index)">{
       { index }}</a>
            </li>
            <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
            <li v-if="cur == all"><a class="banclick">下一页</a></li>
            <li><a>共<i>{
       {all}}</i>页</a></li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el:"#app",
        data:{
          stu:[],
          sname:"",
          checked:"",
          sids:[],
          ccid:0,
          classes:[],
          all: 10, //总页数
          cur: 1,//当前页码
          totalPage: 0,//当前条数
        },
        mounted(){
          this.dataListFn(1);
          this.showClasses();
        },//mounted
        methods:{
        	//班级查询
            showClasses:function(){
            	$.post("/classes/findAll",{},function(data){
            		var len = data.length;
            		for(var i=0;i<len;i++){
            			vm.classes.push(data[i]);
            		}
            		//alert(JSON.stringify(vm.classes));
            	});
            },
        	//全部删除
          deleteAll:function(){
        	  alert(JSON.stringify(vm.sids));
        	  $.post("/stu/deleteAll",{sids:JSON.stringify(vm.sids)},function(data){
        		  alert(data);
        	  });
          },
        	//删除
          del:function(sid,key){
        	  $.post("/stu/delete",{sid:sid},function(data){
        		  vm.stu.splice(key,1);
        		  alert(data);
        	  });
          },
          sort:function(nid,u_id){
            $.post("/news/sorts",{nid:nid,u_id:u_id},function (data) {
              alert(data);
              window.location.href="/in/news";
            });
          },
          checkedAll: function() {
            var _this = this;
            //遍历数组列表
              this.stu.forEach(function(stu, index) {
               if(_this.sids.indexOf(stu.sid)==-1){//判断某元素是否存在于数组中
                 //默认选中的数组
                 _this.sids.push(stu.sid);
               }else{//存在则移除
                 var nkey = _this.sids.indexOf(stu.sid);
                 _this.sids.splice(nkey,1);
               }
              });
          },
          //显示所有数据
          dataListFn:function (index) {
            var page = index;
            alert(this.ccid);
            $.post("/stu/findPage",{sname:this.sname,NowPage:page,ccid:this.ccid},function (data) {
             // alert(JSON.stringify(data));
              vm.stu = [];
              var len = data.content.length;
              var dataList=data.content;//获取数据列表
              for (var i=0;i<len;i++){
                vm.stu.push(dataList[i]);
              }
             // alert(JSON.stringify(vm.stu));
              vm.all = data.totalPages;//总页数
              vm.cur = data.number+1;//当前页码
              vm.totalPage = data.numberOfElements;//当前条数
            });
          },//show
          
          //分页
          btnClick: function(data){//页码点击事件
            if(data != this.cur){
              this.cur = data
            }
            //根据点击页数请求数据
            this.dataListFn(this.cur.toString());
          },//btnClick
          pageClick: function(){
            //根据点击页数请求数据
            this.dataListFn(this.cur.toString());
          },//pageClick
        },//methods
        watch: {
          'sids': {
            handler: function(val, oldVal) {
              if (val.length === this.stu.length) {
                this.checked = true;
              } else {
                this.checked = false;
              }
            },
            deep: true
          }
        },
        computed: {
          //分页
          indexs: function(){
            var left = 1;
            var right = this.all;
            var ar = [];
            if(this.all>= 5){
              if(this.cur > 3 && this.cur < this.all-2){
                left = this.cur - 2
                right = this.cur + 2
              }else{
                if(this.cur<=3){
                  left = 1
                  right = 5
                }else{
                  right = this.all
                  left = this.all -4
                }
              }
            }
            while (left <= right){
              ar.push(left)
              left ++
            }
            return ar
          }
        },
    
      });
    </script>
    
    </body>
    </html>

我们这个是vue配合springboot 实现分页效果和分类搜索的操作

这里我们dao层需要重写继承的方法，同时也需要重写sql语句的query需要完全执行sql语句

我们在dao层写的是String cid可是我们的cid是外键应该是Integer的，但是因为我们执行了Integer的条件它就是一个sql语句了

所以我在html给赋的初值为null，然后我再controller接受的为String型

StuDao

package com.msfh.news.dao;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.Pageable;
    import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
    import org.springframework.data.jpa.repository.Query;
    import org.springframework.data.repository.PagingAndSortingRepository;
    
    import com.msfh.news.eneity.Stu;
    
    public interface StuDao extends PagingAndSortingRepository<Stu, Integer>, JpaSpecificationExecutor<Stu> {
    	//分页
    	@Query(value = "select * from stu join classes on stu.cc_id = classes.ccid where" +
                " sname like CONCAT('%',:sname,'%')"
                + " and cc_id like CONCAT('%',:cc_id,'%') order by stu.sid asc",nativeQuery = true)
        Page<List<Map>> findPage(Pageable pageable,String sname,String cc_id);
    }

StuService层

package com.msfh.news.service;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.Pageable;
    import org.springframework.stereotype.Service;
    
    import com.msfh.news.dao.StuDao;
    import com.msfh.news.eneity.Stu;
    
    import lombok.val;
    
    @Service
    public class StuService {
        @Autowired
        private StuDao stuDao;
        
        
        /**
         * 分页
         * @return
         */
        public Page<List<Map>> findPage(Pageable pageable,String sname,String cc_id){
            return stuDao.findPage(pageable,sname,cc_id);
        }
        
       
    }

StuController

package com.msfh.news.controller;
    
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.domain.Page;
    import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Pageable;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.msfh.news.eneity.Banner;
    import com.msfh.news.eneity.Stu;
    import com.msfh.news.service.BannerService;
    import com.msfh.news.service.StuService;
    
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    
    @Controller
    @RequestMapping("stu")
    public class StuController {
        @Autowired
        private StuService stuService;
        
        
        @RequestMapping("stu")
        public String stu() {
        	return "/news/stu";
        }
        
        @RequestMapping("stuAdd")
        public String stuAdd() {
        	return "/news/stuAdd";
        }
        
        /**
         * ajax分页
         * @return
         */
        @RequestMapping("findPage")
        @ResponseBody
        public Page<List<Map>> findPage(HttpServletRequest request){
            String sname = request.getParameter("sname");
            String cc_id = request.getParameter("ccid");
            Integer NowPage = Integer.parseInt(request.getParameter("NowPage"));
            Pageable Page = PageRequest.of(NowPage-1, 3);
            Page<List<Map>> data = stuService.findPage(Page,sname,cc_id);
            return data;
        }
        
        @RequestMapping("save")
        @ResponseBody
        public JSONObject save(HttpServletRequest request) {
        	String stuData = request.getParameter("stuData");
        	JSONObject jsonObject = JSONObject.fromObject(stuData);
        	Stu stu = (Stu) jsonObject.toBean(jsonObject,Stu.class);
        	stuService.save(stu);
        	JSONObject data = new JSONObject();
        	data.put("status", "1");
        	data.put("success","添加成功");
        	return data;
        }
    }

stu.html

这里我们写的分类查询我们是需要查出外键相匹配的值的表的数据

就如同效果图一样

我们需要通过ajax查出来然后进行一个循环，我再下面的班级查询有写的ajax部分，在HTML上面也有循环的部分，所有我就不附上classes的代码和图部分了

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <meta name="renderer" content="webkit">
      <title></title>
      <link rel="stylesheet" href="/css/pintuer.css">
      <link rel="stylesheet" href="/css/admin.css">
      <script src="/js/jquery.js"></script>
      <script src="/js/pintuer.js"></script>
      <script src="/js/vue.min.js"></script>
      <style type="text/css">
        tr td {
          text-align: center;
          width: 200px;
        }
    
    
        .page-bar{
          margin:0 auto;
          margin-top: 50px;
          overflow: hidden;
        }
        ul,li{
          margin: 0px;
          padding: 0px;
        }
        li{
          list-style: none
        }
        .page-bar li:first-child>a {
          margin-left: 0px
        }
        .page-bar a{
          border: 1px solid #ddd;
          text-decoration: none;
          position: relative;
          float: left;
          padding: 6px 12px;
          margin-left: -1px;
          line-height: 1.42857143;
          color: #5D6062;
          cursor: pointer;
          margin-right: 20px;
        }
        .page-bar a:hover{
          background-color: #eee;
        }
        .page-bar a.banclick{
          cursor:not-allowed;
        }
        .page-bar .active a{
          color: #fff;
          cursor: default;
          background-color: #E96463;
          border-color: #E96463;
        }
        .page-bar i{
          font-style:normal;
          color: #d44950;
          margin: 0px 4px;
          font-size: 12px;
        }
      </style>
    </head>
    <body>
    <div id="app">
    <div class="panel admin-panel">
      <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
      <div class="padding border-bottom">
        <ul class="search" style="padding-left:10px;">
          <li> <a class="button border-main icon-plus-square-o" href="/stu/stuAdd"> 添加内容</a> </li>
            <li>搜索：</li>
    
            <li>
               <select name="fid" class="input" style="width:200px; line-height:17px;"  data-validate="required:请选择班级" v-model="ccid" v-on:change="dataListFn(1)">
                                <option value="">请选择班级</option>
                                <option v-for="cla in classes" :value="cla.ccid">{
       {cla.ccname}}</option>
               </select>
            </li>
    
            <li>
              <input type="text" placeholder="请输入搜索关键字" v-model="sname" class="input" style="width:250px; line-height:17px;display:inline-block" />
              <button class="button bg-main icon-check-square-o" type="submit" name="submit" v-on:click="dataListFn(1)"> 提交</button></li>
        </ul>
      </div>
    
        <table class="table table-hover text-center">
          <tr>
            <th width="100" style="text-align:left; padding-left:20px;">ID</th>
            <th>学生姓名</th>
            <th>性别</th>
            <th>班级名称</th>
            <th>地址</th>
            <th width="310">操作</th>
          </tr>
    
    
            <tr v-for="stu,key in stu">
              <td style="text-align:left; padding-left:20px;">
                <input type="checkbox" name="sid"  :value="stu.sid" v-model="sids" />
                                  排序: <input type="text" style="width: 33px;" v-model="stu.sid" @blur="sort(stu.sid,stu.s_sorts)" />
              </td>
              <td>{
       {stu.sname}}</td>
              <td>{
       {stu.sex}}</td>
              <td>{
       {stu.ccname}}</td>
              <td>{
       {stu.address}}</td>
              <td><div class="button-group"> <a class="button border-main"><span class="icon-edit"></span> 修改</a> <a class="button border-red"  @click="del(stu.sid,key)"><span class="icon-trash-o"></span> 删除</a>  </div></td>
            </tr>
    
    
          <tr>
            <td style="text-align:left; padding:19px 0;padding-left:20px;">
              <input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选
            </td>
            <td colspan="7" style="text-align:left;padding-left:20px;">
              <a  class="button border-red icon-trash-o" style="padding:5px 15px;" v-on:click="deleteAll()"> 删除</a>
                  
              
          </tr>
    
    
        </table>
    
        
        <div class="page-bar">
          <ul>
            <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
            <li v-if="cur==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
              <a v-on:click="btnClick(index)">{
       { index }}</a>
            </li>
            <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
            <li v-if="cur == all"><a class="banclick">下一页</a></li>
            <li><a>共<i>{
       {all}}</i>页</a></li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el:"#app",
        data:{
          stu:[],
          sname:"",
          checked:"",
          sids:[],
          ccid:null,
          classes:[],
          all: 10, //总页数
          cur: 1,//当前页码
          totalPage: 0,//当前条数
        },
        mounted(){
          this.dataListFn(1);
          this.showClasses();
        },//mounted
        methods:{
        	//班级查询
            showClasses:function(){
            	$.post("/classes/findAll",{},function(data){
            		var len = data.length;
            		for(var i=0;i<len;i++){
            			vm.classes.push(data[i]);
            		}
            		//alert(JSON.stringify(vm.classes));
            	});
            },
        	
          //显示所有数据
          dataListFn:function (index) {
            var page = index;
            alert(this.ccid);
            $.post("/stu/findPage",{sname:this.sname,NowPage:page,ccid:this.ccid},function (data) {
             // alert(JSON.stringify(data));
              vm.stu = [];
              var len = data.content.length;
              var dataList=data.content;//获取数据列表
              for (var i=0;i<len;i++){
                vm.stu.push(dataList[i]);
              }
             // alert(JSON.stringify(vm.stu));
              vm.all = data.totalPages;//总页数
              vm.cur = data.number+1;//当前页码
              vm.totalPage = data.numberOfElements;//当前条数
            });
          },//show
          
          //分页
          btnClick: function(data){//页码点击事件
            if(data != this.cur){
              this.cur = data
            }
            //根据点击页数请求数据
            this.dataListFn(this.cur.toString());
          },//btnClick
          pageClick: function(){
            //根据点击页数请求数据
            this.dataListFn(this.cur.toString());
          },//pageClick
        },//methods
       
        computed: {
          //分页
          indexs: function(){
            var left = 1;
            var right = this.all;
            var ar = [];
            if(this.all>= 5){
              if(this.cur > 3 && this.cur < this.all-2){
                left = this.cur - 2
                right = this.cur + 2
              }else{
                if(this.cur<=3){
                  left = 1
                  right = 5
                }else{
                  right = this.all
                  left = this.all -4
                }
              }
            }
            while (left <= right){
              ar.push(left)
              left ++
            }
            return ar
          }
        },
    
      });
    </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191119143234616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191119145441355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191119145449678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70