1.思路分析

2.分页查询后端实现

1.com/sun/furn/config/MybatisConfig.java 注入MyBatisPlus分页拦截器

package com.sun.furn.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * Description: MyBatis分页查询配置类
 *
 * @Author sun
 * @Create 2024/3/19 14:13
 * @Version 1.0
 */
@Configuration
public class MybatisConfig {

    /**
     * 注入一个MyBatisPlus拦截器，在其中添加一个内部拦截器
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        //这里分页需要指定数据库类型DbType
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return mybatisPlusInterceptor;
    }
}

2.com/sun/furn/controller/FurnController.java 添加方法

    /**
     *
     * @param pageNum 第几页 默认1
     * @param pageSize 页的大小 默认5
     * @return
     */
    @GetMapping("/furnsByPage")
    public Result listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                  @RequestParam(defaultValue = "5") Integer pageSize) {
        //通过page方法，返回分页信息
        Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize));
        return Result.success(page);
    }

3.postman测试

3.分页查询前端实现

1.src/views/HomeView.vue 引入分页导航条组件

    <!--    引入分页导航条组件-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

2.src/views/HomeView.vue 初始化数据池

3.查看效果

4.src/views/HomeView.vue 方法池新增三个方法

    // 分页显示家居信息
    list() {
      request.get("/api/furnsByPage", {
        params: {
          // 请求参数
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(
          res => {
            this.tableData = res.data.records
            this.total = res.data.total
          }
      )
    },
    //监控pagesize的改变
    handlePageSizeChange(pageSize) {
      //更新数据池中的信息，使得view更新
      this.pageSize = pageSize
      //向后端发送分页请求，更新数据
      this.list()
    },
    //监控currentPage的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      //向后端发送分页请求，更新数据
      this.list()
    }

5.前端分页查询小结

Vue总结为一句话：方法池三端获取数据，保证Model对View的实时渲染！

• 数据池就是保证对前端页面的实时渲染
• 方法池就是通过从前端页面、数据池、后端DB 获取信息从而保证数据池对前端页面的实时渲染

6.结果展示

4.切换数据源为druid

1.pom.xml 引入druid依赖

    <!-- 引入 druid 依赖 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.17</version>
    </dependency>

2.com/sun/furn/config/DruidDataSourceConfig.java 配置文件注入druid数据源

package com.sun.furn.config;

import com.alibaba.druid.pool.DruidDataSource;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * Description: 注入德鲁伊数据源的配置类
 *
 * @Author sun
 * @Create 2024/3/19 15:40
 * @Version 1.0
 */
@Configuration
@Slf4j
public class DruidDataSourceConfig {
    @Bean
    @ConfigurationProperties("spring.datasource")
    public DruidDataSource druidDataSource() {
        DruidDataSource druidDataSource = new DruidDataSource();
        //日志输出，查看是否注入
        log.info("数据源={}" + druidDataSource);
        return druidDataSource;
    }
}

3.启动测试

5.带条件查询分页显示后端实现

1.com/sun/furn/controller/FurnController.java 添加方法

    /**
     * 根据条件（name）进行查询
     *
     * @param pageNum  第几页 默认1
     * @param pageSize 页的大小 默认5
     * @param search   查询条件 默认为空即不带条件
     * @return
     */
    @GetMapping("/furnsByCondition")
    public Result listFurnsByConditionPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                           @RequestParam(defaultValue = "5") Integer pageSize,
                                           @RequestParam(defaultValue = "") String search) {
        // 获取QueryWrapper对象
        QueryWrapper<Furn> query = Wrappers.query();
        if (StringUtils.hasText(search)) {
            //查询条件是name like。。。
            query.like("name", "%" + search + "%");
        }

        //返回page对象
        Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize), query);
        return Result.success(page);
    }

2.postman测试

6.带条件查询分页显示前端实现

1.src/views/HomeView.vue 基本准备

1.前端界面

2.数据池

2.src/views/HomeView.vue 直接修改方法区的list方法

    // 分页显示家居信息（条件查询）
    list() {
      request.get("/api/furnsByCondition", {
        params: {
          // 请求参数
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search //这里添加的根据名字进行查询的条件，如果没有在搜索框里输入，则是空，也就是不带条件进行查询
        }
      }).then(
          res => {
            this.tableData = res.data.records
            this.total = res.data.total
          }
      )
    }

3.结果展示