SSM-分页显示列表

思路分析

1.后台使用MyBatis PageHelper插件完成分页查询；前端使用分页组件
2.修改FurnController，增加处理分页显示代码
3.完成前台代码，加入分页导航，并将分页请求和后台接口结合
4.简单回顾JavaWeb原生项目的分页模型。

---

一、 配置Mybatis PageHelper

1. 引入分页插件

    <!--引入mybatis pageHelper分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.2.1</version>
    </dependency>

2. 修改mybatis-config.xml，配置分页拦截器

    <!--说明
    1. plugins标签需要放在typeAliases标签后，是doctype约束的
    2. 配置分页拦截器
    -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--属性解读
            配置分页合理化
            1. 如果用户请求的pageNum > pages , 就显示查询最后一页
            2. 如果用户请求的pageNum < 0 , 就显示查询第一页
            -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

3. 修改FurnController.java增加分页查询处理。前2步配置完成后，就在controller里面开始使用了。

• controller层
  • 使用@RequestParam接收参数，是因为它可以指定默认值。

    /**
     * 分页请求接口
     * @param pageNum:  要显示第几页 : 默认为1
     * @param pageSize: 每页要显示几条记录：默认为5
     */
    @ResponseBody
    @RequestMapping("/furnsByPage")
    public Msg listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,
                               @RequestParam(defaultValue = "5") Integer pageSize) {

        //设置分页参数
        //1.调用findAll是完成查询，底层会进行物理分页（指在SQL层面完成分页），而不是逻辑分页（返回全部数据，在本地分页显示）
        //2.会根据分页参数来计算 limit ?, ?, 在发出SQL语句时，会带limit
        PageHelper.startPage(pageNum, pageSize);

        List<Furn> furnList = furnService.findAll();


        //将分页查询的结果，封装到PageInfo
        //PageInfo 对象包含了分页的各个信息,比如当前页面pageNum , 共有多少记录
        //...

        PageInfo pageInfo = new PageInfo(furnList, pageSize);
        //将pageInfo封装到Msg对象，返回
        return Msg.success().add("pageInfo", pageInfo);
    }

• 测试：使用postman测试，不带参数，不带body，查看是否正确返回。

---

二、前端配置分页导航栏

样式选择All combined，并根据需要增删属性。其中total="total"要修改。
- 将currentPage、pageSize、total放入数据池。

    <div style="margin:10px 0">
      <!--  ":"是"v-model :"，双向绑定的缩写。注释不能写在标签里面-->
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  methods: {
    handleSizeChange(size){
      this.pageSize=size;
      this.list();
    },
    handleCurrentChange(pageNum){
      //console.log("pageNum",pageNum)
      this.currentPage=pageNum;
      this.list();
    }
    }

---

带条件的查询分页显示列表

思路分析
1.完成后台代码从dao->serivce->controller,并对每层代码进行测试
2.完成前端代码，使用axios发送http请求，完成带条件查询分页显示

后端

• service

    public List<Furn> selectByName(String name) {
        FurnExample furnExample = new FurnExample();
        FurnExample.Criteria criteria = furnExample.createCriteria();
        if(StringUtils.hasText(name)) {
            criteria.andNameLike("%" + name + "%");
        }
        return furnMapper.selectByExample(furnExample);
    }

• controller

@RequestMapping("/conditionpage")
    @ResponseBody
    public Msg page(@RequestParam(defaultValue = "1") Integer pageNum,
                    @RequestParam(defaultValue="5") Integer pageSize,
                    @RequestParam(defaultValue="") String name){
        PageHelper.startPage(pageNum,pageSize);
        List<Furn> furnList = furnService.selectByName(name);
        PageInfo pageInfo = new PageInfo(furnList, pageSize);
        return Msg.success().add("pageInfo",pageInfo);
    }

前端

重写list
<el-button style=“margin-left:20px” type=“primary” @click=“list”>检索

list(){
      //添加检索条件的分页显示
      request.get(
          "/api/conditionpage",{
          params:{
            pageNum:this.currentPage,
            pageSize:this.pageSize,
            name:this.search
          }
      }).then(res=>{
        this.tableData=res.extend.pageInfo.list
        this.total=res.extend.pageInfo.total
      })
    }