Only老K说-SSM框架搭载VUE使用表格的分页既查询

前提条件

搭载了SSM框架，以及前后端分离技术

直接上

SUserMapper.java

 //    查询全部的用户
    List<Map> selectAll(Map map);

SUserMapper.xml

这里带的username是用来做用户的模糊查询的

  <!--查询全部的用户-->
  <select id="selectAll" resultType="java.util.Map" parameterType="java.util.Map">
    select * from ssm_user
    <where>
      <if test="username !=null and username !=''">
        and username like #{username}
      </if>
    </where>
  </select>

SUserService.java

//    //查询所有用户
    List<Map> selectAll(Map map, PageBean pageBean);

SUserServiceImpl.java

 @Override
    public List<Map> selectAll(Map map, PageBean pageBean) {
        if(pageBean !=null && pageBean.isPagination()){//是否需要分页
            PageHelper.startPage(pageBean.getPage(),pageBean.getRows());
        }
        List<Map> list = sUserMapper.selectAll(map);//查询语句，得到结果。但是分页处理
        if (pageBean !=null && pageBean.isPagination()){//通过pagehelper进行分页处理，然后再将结果返回过去
            PageInfo pageInfo=new PageInfo(list);
            pageBean.setTotal(pageInfo.getTotal()+"");
        }
        return list;
    }

SUserController.java

 //查询所有用户
    @RequestMapping("/selectAll")
    @ResponseBody
    public JSONResult selectAll(HttpServletRequest req){
        String name = req.getParameter("username");//获取从前台传递过来的数据
        if(StringUtils.isNotBlank(name)){
            name="%"+name+"%";//对传递过来的数据进入一下模糊查询处理例如：sql语句是 %K% 要多%%
        }
        Map map = new HashMap();
        map.put("username",name);
        PageBean pageBean = new PageBean();
        String page = req.getParameter("page");//获取从前台传递过来的数据
        pageBean.setPage(page);
        List<Map> list = sUserService.selectAll(map, pageBean);//进行分页查询
        Map<String,Object> datamap = new HashMap<>();//用来将结果和pagebean一起传递到后台
        datamap.put("data",list);
        datamap.put("pagebean",pageBean);
        return JSONResult.build(200,"查询成功",datamap);
    }

ssm_user.vue

<template>
    <div>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="formInline.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="listData"  border element-loading-text="拼命加载中" style="width: 100%;">
      <!--  <el-table-column align="center" type="selection" min-width="1">
        </el-table-column>-->
        <el-table-column sortable prop="userid" label="用户id" min-width="1">
        </el-table-column>
        <el-table-column sortable prop="username" label="用户名" min-width="1">
        </el-table-column>
        <el-table-column sortable prop="userpwd" label="密码" min-width="3">
        </el-table-column>
        <el-table-column sortable prop="salt" label="盐" min-width="3">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="2">
<!--          <template slot-scope="scope">-->
<!--            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>-->
<!--          </template>-->
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "ssm_user",
      data(){
          return{
            listData:[],
            formInline:{
              page:1,
              rows:10,
              username:''
            },
            total:0
          }
      },
    methods:{
      handleSizeChange(rows) {
        //页大小发生改变触发的事件
        console.log("当前页大小：" + rows);
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        //当前页页码发生改变触发的事件
        console.log("当前页码：" + page);
        this.formInline.page = page;
        this.search();
      },
      doSerach(params){//对访问后台的方法进行封装，不需要每次都写，params参数
        let url = this.axios.urls.SYSTEM_SSM_USER_LIST;
        this.axios.post(url, params).then((response) => {
          console.log(response);
          this.listData=response.data.data.data;//返回查询到的数据
          this.total=response.data.data.pagebean.total;//把total设置进去，实现下面点击可以出现对应页码
        }).catch(function(error) {
          console.log(error);
        });
      },
      search(){//用来提交formInline这个表单
          this.doSerach(this.formInline);
      }
    },
      created(){
        // let url = this.axios.urls.SYSTEM_SSM_USER_LIST;
        // this.axios.post(url, this.ruleForm).then((response) => {
        //   console.log(response);
        //   this.listData=response.data.data.data;//返回查询到的数据
        //   this.total=response.data.data.pagebean.total;//把total设置进去，实现下面点击可以出现对应页码
        // }).catch(function(error) {
        //   console.log(error);
        // });
        this.doSerach({});//进入加载的时候不需要传入参数，直接查询全部
      }
    }
</script>

<style scoped>

</style>