Spring Boot + Mybatis + vue2 — 实现分页查询

浅浅的花香味﹌ 2024-02-05 19:59 79阅读 0赞

后端

pom.xml文件导入依赖

<dependency>
       <groupId>com.github.pagehelper</groupId>
       <artifactId>pagehelper-spring-boot-starter</artifactId>
       <version>1.4.6</version>
    </dependency>

配置全局配置文件application.properties

# 分页
    pagehelper.helper-dialect=mysql
    pagehelper.reasonable=true
    pagehelper.support-methods-arguments=true
    pagehelper.params=count=countSql

Student.java 学生实体类，里面的属性对应student表中的字段

@Data作用：实现Getter和Setter方法

@AllArgsConstructor作用：实现全参构造方法

@NoArgsConstructor作用：实现空参构造方法

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Student{
        /** 所属学院 */
        private String school;
        /** 所属专业 */
        private String major;
        /** 所属班级 */
        private String className;
        /** 学生姓名 */
        private String studentName;
    }

@Data注解的使用需要导入Lombok依赖

<dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
       <optional>true</optional>
     </dependency>

Params.java 模糊搜索包含的参数，该实体无对应的表字段

@Data
    public class ScoreParams {
        /** 所属学院 */
        private String school;
        /** 所属专业 */
        private String major;
        /** 所属班级 */
        private String className;
        /** 学生学号 */
        private String studentNumber;
        /** 学生姓名 */
        private String studentName;
        /** 分页大小 */
        private Integer pageSize;
        /** 分页数 */
        private Integer pageNum;
    }

StudentMapper.java

注：@Param("params") Params params命名一定要对应前端传来的参数 params: this.Params 保持一致

List<Student> findBySearchValue(@Param("params") Params params);

StudentMapper.xml

<select id="findBySearchValue" resultType="com.domain.Student">
      SELECT * FROM student
      <where>
         <if test="params != null and params.school != null and params.school != '' ">
             AND school like concat('%', #{params.school}, '%')
         </if>
         <if test="params != null and params.major != null and params.major != '' ">
             AND major like concat('%', #{params.major}, '%')
         </if>
         <if test="params != null and params.className != null and params.className != '' ">
             AND class_name like concat('%', #{params.className}, '%')
         </if>
             AND student_number like concat('%', #{params.studentNumber}, '%')
         </if>
         <if test="params != null and params.studentName != null and params.studentName != '' ">
             AND student_name like concat('%', #{params.studentName}, '%')
         </if>
       </where>
    </select>

StudentService.java

PageInfo<Student> findBySearchValue(Params params);

StudentServiceImpl.java

@Override
     public PageInfo<Student> findBySearchValue(Params params) {
            /** 分页查询 */
            PageHelper.startPage(params.getPageNum(),params.getPageSize());
            List<Score> bySearchValue = studentMapper.findBySearchValue(params);
            return PageInfo.of(bySearchValue);
      }

StudentController.java

@GetMapping("/search")
        public AjaxResult findBySearchValue(Params params){
            PageInfo<Student> findBySearchValue = studentService.findBySearchValue(params);
            return AjaxResult.success(findBySearchValue);
        }

前端

我使用的是ElementUI，进入官网:[https://element.eleme.cn/2.0/\#/zh-CN/component/pagination][https_element.eleme.cn_2.0_zh-CN_component_pagination]，任意选择一个分页的样式

SelectStudent.vue

SelectStudent.vue

export default {
      name: "ScoreSelct",
      data() {
        return {
          total: 0,
          // 搜索框参数
          Params:{
            school: '',
            major: '',
            className: '',
            studentName: '',
            pageNum: 1,
            pageSize: 10,
          },
          // 查询表格
          scoreTable: [],
        }
      },
      // 页面加载时调用
      created(){
        this.findBySearchValue()
      },
      methods:{
        // 模糊搜索
        findBySearchValue(){
          request.get('/search',{params: this.Params}).then(res => {
            if(res.code === '200'){
              this.Table = res.data.list
              this.total = res.data.total
              this.$message.success('查询成功')
            }else{
              this.$message.error('查询失败')
            }
          })
        },
        // 清空输入框内容
        reset(){
          this.Params={
            school: '',
            major: '',
            className: '',
            studentName: '',
          },
          this.findBySearchValue()
        },
        // 点击查询时，触发10条/页
        handleSizeChange(pageSize){
          this.searchParams.pageSize = pageSize;
          this.findBySearchValue();
        },
        // 点击1，2，3页数切换
        handleCurrentChange(pageNum){
          this.searchParams.pageNum = pageNum;
          this.findBySearchValue();
        },
      }
    }
    </script>

res.data.list:具体需要看数据所在的位置，这里的数据是位于data下的list数组内

![c42335e15c3a4b33a66748fc07a69f6b.png][]

[https_element.eleme.cn_2.0_zh-CN_component_pagination]: https://element.eleme.cn/2.0/#/zh-CN/component/pagination
[c42335e15c3a4b33a66748fc07a69f6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f0b9030fc8c9434fa79bb18a2c0956ac.png