SpringBoot+Vue+ElementUI实现完整版分页,查询搜索（代码量非常少，后端前端无需写大量的分页代码）

前言

代码量非常少，非常简单，无需写分页实体类，无需写后台的大量分页和搜索代码，SQL语句+ElementUI组件就已经帮你实现了分页

一. 演示分页

二.就用ElementUI官方的分页完整版功能组件

三.vue前端代码

<template>
	//搜索功能
	<div style="margin: 10px 0">
         <el-input v-model="usercode" placeholder="请输入用户账号"></el-input>
         <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
         <el-button class="ml-5" type="warning" @click="reset">重置</el-button>   
     </div>
        
        //分页功能
	 <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2,5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
       </div>
</template>
<script>
export default {
	name: "User",
	data(){
           return{
           		//请求的数据
               tableData: [],
               //搜索的字段
                usercode: '',
                //总条目数默认显示0就行
                total: 0,
                //从第几页开始查询记录
                pageNum: 1,
                //每页显示两条记录
                pageSize: 2
           }
        },
         mounted() {
            this.load()
        },
         methods:{
            load() {
            	//后端请求地址
                fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum 
                + "&pageSize=" + this.pageSize
               //想搜索多少个字段就写多少个
                + "&usercode=" + this.usercode).then(res => res.json()).then(res => {
                    this.tableData = res.data;
                    this.total = res.total;
                    this.usercode = ''
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.load()
            },
          }
       }
</script>

四.SpringBoot后端代码

4.1.User实体类

@Data
public class User {
    private String noid;
    private String usercode;
    private String userpwd;
    private String realname;
    private Teacher teacher;
}

4.2.Mapper接口

//分页
List<User> selectPage(Integer pageNum, Integer pageSize,String usercode);
Integer selectTotall(String usercode);

4.3.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.spring.mapper.UserMapper">
	//分页sql语句
	<select id="selectPage" resultType="com.zkq.entity.User">
        select * from t_user_info
        <where>
            <if test="usercode != null and usercode != ''">
                usercode like concat('%',#{usercode},'%')
            </if>
        </where>
        limit #{pageNum}, #{pageSize}
    </select>

    <select id="selectTotall" resultType="Integer">
        select count(*) from t_user_info
        <where>
            <if test="usercode != null and usercode != ''">
                usercode like concat('%',#{usercode},'%')
            </if>
        </where>
    </select>
</mapper>

4.4.Controller

@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
  	@Autowired
    private UserMapper userMapper;
    @GetMapping("/page")
    public Map<String,Object> findpage(@RequestParam Integer pageNum,
                                       @RequestParam Integer pageSize,
                                       //要搜索多少个字段就写多少个
                                       @RequestParam String usercode) {
        pageNum = (pageNum - 1) * pageSize;
        List<User> data = userMapper.selectPage(pageNum, pageSize,usercode);
        Integer total = userMapper.selectTotall(usercode);
        Map<String, Object> res = new HashMap<>();
        res.put("data",data);
        res.put("total",total);
        return res;
    }
}

这就是以上实现完整版分页功能简单吧！！！