[JavaScript知识库]Spring BootPageHelperVue3ElementUI前后端实现分页（包含多条件模糊查询），附上完整代码

Spring Boot,PageHelper,Vue3,ElementUI前后端实现分页（包含多条件模糊查询），附上完整代码

不包含模糊查询的

后端

Controller

@RequestMapping("/selectAllPage")
public Result selectAllPage(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
                            @RequestParam(value = "pageSize", defaultValue = "10") int pageSize) {
    return userService.selectAllPage(pageNum, pageSize);
}

Service

Result selectAllPage(int pageNum, int pageSize);

public Result selectAllPage(int pageNum, int pageSize) {
    // pageNum:表示第几页  pageSize:表示一页展示的数据
    PageHelper.startPage(pageNum, pageSize);
    List<User> users = null;
    try {
        //查询所有学生
        users = userMapper.getAllUser();
        // 将查询到的数据封装到PageInfo对象
        PageInfo<User> UserPageInfo = new PageInfo(users, pageSize);
        // 分割数据成功
        return Result.success("查询成功", UserPageInfo);

    } catch (Exception e) {

        logger.error(e.getMessage(), e);
        // 将查询到的数据封装到PageInfo对象
        PageInfo<User> UserPageInfo = new PageInfo(null, pageSize);
        // 分割数据成功
        return Result.error(e.getMessage());
    }
}

Dao

<select id="getAllUser" resultType="com.erju.pojo.User">
    select *
    from sl_user
    where use_flag = 0
</select>

前端

const page = ref({
    total: 1,
    currentpage: 1,
    pagesize: 10,
})

const handleSizeChange = (pagesize) => {
    console.log('每页几条数据' + pagesize)
    page.value.pagesize = pagesize
    getList()
}
const handleCurrentChange = (currentpage) => {
    console.log('当前第几页' + currentpage)
    page.value.currentpage = currentpage
    getList()
}
const page = ref({
    total: 1,
    currentpage: 1,
    pagesize: 10,
})

const getList = () => {
    api
        .post(
            'user/selectAllPage', queryParams.value
        )
        .then((res) => {
            page.value.total = res.data.total
            userList.value = res.data.list
        })
}

<!--        分页-->
        <div class="block">
            <!-- <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page.currentpage"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size="page.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="page.total">
            </el-pagination> -->
        </div>

模糊查询

后端

Controller

@RequestMapping("/selectAllPage")
    public Result selectAllPage(@RequestBody HashMap<String, String> map) {

        return userService.selectAllPage(map);
    }

Sevice

Result selectAllPage(HashMap<String, String> map);

public Result selectAllPage(HashMap<String, String> map) {
        logger.info("selectAllPage(HashMap<String, String> map)开始-----------------");
        //分页条件
        String pageNum = map.get("pageNum");
        String pageSize = map.get("pageSize");
        //模糊查询条件
        User user = new User();
        String phone_number = map.get("phone_number");
        String account = map.get("account");
        String user_type = map.get("user_type");
        user.setUsername(account == null ? "" : account);
        user.setPhone_number(phone_number == null ? "" : phone_number);
        user.setUser_type(Integer.parseInt(user_type));
        // pageNum:表示第几页  pageSize:表示一页展示的数据
        PageHelper.startPage(Integer.parseInt(pageNum), Integer.parseInt(pageSize));
        List<User> users = null;
        try {
            //查询所有学生
            users = userMapper.selectUser(user);
            // 将查询到的数据封装到PageInfo对象
            PageInfo<User> UserPageInfo = new PageInfo(users, Integer.parseInt(pageSize));
            logger.info("selectAllPage(HashMap<String, String> map)结束-----------------");
            // 分割数据成功
            return Result.success("查询成功", UserPageInfo);

        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            // 将查询到的数据封装到PageInfo对象
            PageInfo<User> UserPageInfo = new PageInfo(null, Integer.parseInt(pageSize));
            // 分割数据成功
            return Result.error(e.getMessage());
        }
    }

Dao

<!--模糊查询条件查询用户-->
    <select id="selectUser" resultType="com.erju.pojo.User" parameterType="com.erju.pojo.User">
        SELECT id,
               use_flag,
               password,
               username,
               phone_number,
               user_type,
               permissions
        FROM sl_user
        WHERE user_type = #{user_type}
          and username LIKE concat(#{username}, '%')
          and phone_number LIKE concat(#{phone_number}, '%')
    </select>

前端

/**模糊查询条件 */
const queryParams = ref({
    pageNum: page.value.currentpage,
    pageSize: page.value.pagesize,
    phone_number: undefined,
    account: undefined,
    user_type: 0,
})

const getList = () => {
    
    api
        .post(
            'user/selectAllPage', queryParams.value
        )
        .then((res) => {
            page.value.total = res.data.total
            userList.value = res.data.list
           
        })
}

<!--        分页-->
        <div class="block">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page.currentpage"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size="page.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="page.total">
            </el-pagination>
        </div>