东莞网站建设 旅游莆田自助建站软件

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拦截器，在其中添加一个内部拦截器*/@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();//这里分页需要指定数据库类型DbTypemybatisPlusInterceptor.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.recordsthis.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.recordsthis.total = res.data.total})}

3.结果展示