首页 > 其他分享 >springboot+vue创建_2(分页)

springboot+vue创建_2(分页)

时间:2024-05-26 22:10:59浏览次数:21  
标签:vue springboot public page uname IPage queryPageParam Page 分页

七、分页

7.1

    //分页
    @PostMapping("/listPage")
//    public List<Login00> listhu(@RequestBody HashMap map){
    public List<Login00> listhu(@RequestBody QueryPageParam queryPageParam){
        //hashmap
//        System.out.println(map);//会获取到postman里面的发送数据
//        System.out.println("pagesize="+map.get("pageSize"));
        //自定义的方法
        System.out.println(queryPageParam);
        System.out.println("pagesize="+queryPageParam.getPageSize());
        return null;
    }

测试:
前端传入参数如下:

对于使用HashMap:

对于自定义的:

对于map,前端不管传入多少,都可以接收到,但是对于自己定义的,可以通过这样子处理:

获取param里面的值:

可以直接用HashMap也可以封装,封装的话比较统一吧。

7.2添加分页拦截器

官网代码:https://baomidou.com/pages/97710a/#配置方法

    @PostMapping("/listPage")
    public List<Login00> listhu(@RequestBody QueryPageParam queryPageParam){

        //分页拦截器
//        Page<Login00> page = new Page<>(1,2);//当前页1,每页2条
        //也可以这样子对当前页和每页条数进行设置
        Page<Login00> page = new Page<>();
        page.setCurrent(queryPageParam.getPageNum());
        page.setSize(queryPageParam.getPageSize());

        //进行查询
        HashMap param = queryPageParam.getParam();
        String uname = (String) param.get("uname");
        LambdaQueryWrapper<Login00> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.like(Login00::getUname,uname);
        IPage result=iLogin00Service.page(page,lambdaQueryWrapper);
        System.out.println("total="+result.getTotal());
        return result.getRecords();
    }


控制台输出total=3,因为数据库里面是有3条符合的数据。

7.3 编写分页mapper

contorller:

@PostMapping("/listPageC")
//    public List<Login00> listhu(@RequestBody HashMap map){
    public List<Login00> listPageC(@RequestBody QueryPageParam queryPageParam){

        HashMap param = queryPageParam.getParam();
        String uname = (String) param.get("uname");

        Page<Login00> page = new Page<>();
        page.setCurrent(queryPageParam.getPageNum());
        page.setSize(queryPageParam.getPageSize());

        //进行查询
//        LambdaQueryWrapper<Login00> lambdaQueryWrapper = new LambdaQueryWrapper<>();
//        lambdaQueryWrapper.like(Login00::getUname,uname);
        IPage result=iLogin00Service.pageC(page);
        System.out.println("total="+result.getTotal());
        return result.getRecords();
    }

service:

IPage pageC(IPage<Login00> page);

serviceimpl

@Override
    public IPage pageC(IPage<Login00> page) {
        return login00Mapper.pageC(page);
    }

mapper

IPage pageC(IPage<Login00> page);

mapper配置文件xml

<select id="pageC" resultType="com.example.entity.Login00">
        select * from login00
</select>

运行结果:
虽然是添加了uname的限制,但是还是查询了全部,因为在xml文件中写的是select * from login00

要实现添加uname限制,可以直接在xml的查询语句里面添加限制,也可以使用mybatis-plus提供的Wrapper(官网查找)
controller

LambdaQueryWrapper<Login00> lambdaQueryWrapper = new LambdaQueryWrapper<>();
lambdaQueryWrapper.like(Login00::getUname,uname);
IPage result2=iLogin00Service.pageCC(page,lambdaQueryWrapper);

在mapper中(注意是@Pama..这样子的格式):

IPage pageCC(Page<Login00> page,@Param(Constants.WRAPPER) Wrapper wrapper);

在mapper.xml(注意是${ew.customSqlSegment}这样子的格式)中

<select id="pageCC" resultType="com.example.entity.Login00">
        select * from login00 ${ew.customSqlSegment}
</select>

后台total是1
image

后台total是3
image

分页涉及的代码:

comment层分页拦截器代码:

package com.example.comment;

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;

//分页拦截器
@Configuration
public class MybatisPlusConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加
        //interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); 如果有多数据源可以不配具体类型 否则都建议配上具体的DbType
        return interceptor;
    }
}

自定义的分页参数:

package com.example.comment;

import lombok.Data;

import java.util.HashMap;

//分页参数
@Data
public class QueryPageParam {
    //默认值
    private static int PAGE_SIZE=20;
    private static int PAGE_NUM=1;

    private int pageSize=PAGE_SIZE;
    private int pageNum=PAGE_NUM;

    private HashMap param;
}

controller

package com.example.controller;


import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.comment.QueryPageParam;
import com.example.entity.Login00;
import com.example.service.ILogin00Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;

@RestController
@RequestMapping("/login00")
public class Login00Controller {

    @Autowired
    private ILogin00Service iLogin00Service;


    //分页
    @PostMapping("/listPage")
//    public List<Login00> listhu(@RequestBody HashMap map){
    public List<Login00> listhu(@RequestBody QueryPageParam queryPageParam){
        //hashmap
//        System.out.println(map);//会获取到postman里面的发送数据
//        System.out.println("pagesize="+map.get("pageSize"));


        //自定义的方法
//        System.out.println(queryPageParam);
//        System.out.println("pagesize="+queryPageParam.getPageSize());
//
//        HashMap param = queryPageParam.getParam();
//        String uname = (String) param.get("uname");
//        String utype = (String) param.get("utype");
//        System.out.println("uname: "+uname+" utype: "+utype);

        //分页拦截器
//        Page<Login00> page = new Page<>(1,2);//当前页1,每页2条
        //也可以这样子对当前页和每页条数进行设置
        Page<Login00> page = new Page<>();
        page.setCurrent(queryPageParam.getPageNum());
        page.setSize(queryPageParam.getPageSize());

        //进行查询
        HashMap param = queryPageParam.getParam();
        String uname = (String) param.get("uname");
        LambdaQueryWrapper<Login00> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.like(Login00::getUname,uname);
        IPage result=iLogin00Service.page(page,lambdaQueryWrapper);
        System.out.println("total="+result.getTotal());
        return result.getRecords();
    }

    @PostMapping("/listPageC")
    public List<Login00> listPageC(@RequestBody QueryPageParam queryPageParam){

        HashMap param = queryPageParam.getParam();
        String uname = (String) param.get("uname");

        Page<Login00> page = new Page<>();
        page.setCurrent(queryPageParam.getPageNum());
        page.setSize(queryPageParam.getPageSize());

        //进行查询
        IPage result=iLogin00Service.pageC(page);
        System.out.println("total="+result.getTotal());

        return result.getRecords();
    }

    @PostMapping("/listPageCC")
    public List<Login00> listPageCC(@RequestBody QueryPageParam queryPageParam){

        HashMap param = queryPageParam.getParam();
        String uname = (String) param.get("uname");

        Page<Login00> page = new Page<>();
        page.setCurrent(queryPageParam.getPageNum());
        page.setSize(queryPageParam.getPageSize());

        //进行查询
        //使用Wrapper自定义SQL 添加限制
        //注意,mybatis-plus版本要>=3.0.7
        LambdaQueryWrapper<Login00> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.like(Login00::getUname,uname);
        IPage result2=iLogin00Service.pageCC(page,lambdaQueryWrapper);
        System.out.println("total2="+result2.getTotal());
        return result2.getRecords();
    }


}

service

public interface ILogin00Service extends IService<Login00> {

    IPage pageC(Page<Login00> page);

    IPage pageCC(Page<Login00> page, Wrapper lambdaQueryWrapper);
}

serviceimpl

@Service
public class Login00ServiceImpl extends ServiceImpl<Login00Mapper, Login00> implements ILogin00Service {

    @Autowired
    private Login00Mapper login00Mapper;

    @Override
    public IPage pageC(Page<Login00> page) {
        return login00Mapper.pageC(page);
    }

    @Override
    public IPage pageCC(Page<Login00> page, Wrapper lambdaQueryWrapper) {
        return login00Mapper.pageCC(page,lambdaQueryWrapper);
    }
}

mapper

@Mapper
public interface Login00Mapper extends BaseMapper<Login00> {

    IPage pageC(Page<Login00> page);

    IPage pageCC(Page<Login00> page,@Param(Constants.WRAPPER) Wrapper wrapper);
}

mapper的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.example.mapper.Login00Mapper">
    <select id="pageC" resultType="com.example.entity.Login00">
        select * from login00
    </select>
    <select id="pageCC" resultType="com.example.entity.Login00">
        select * from login00 ${ew.customSqlSegment}
    </select>

</mapper>

标签:vue,springboot,public,page,uname,IPage,queryPageParam,Page,分页
From: https://www.cnblogs.com/hmy22466/p/18191507

相关文章

  • Vue.js条件渲染与列表渲染指南
    title:Vue.js条件渲染与列表渲染指南date:2024/5/2620:11:49updated:2024/5/2620:11:49categories:前端开发tags:VueJS前端开发数据绑定列表渲染状态管理路由配置性能优化第1章:Vue.js基础与环境设置1.1Vue.js简介Vue.js(读音:/vjuː/,类似于"view")......
  • SpringBoot+MySQL的简单运用(Hello World API)
    一、创建springboot项目1.生成springboot首先打开自动生成springboot项目的在线网站:https://start.spring.io/如下图所示:2.依赖配置在上述页面中,左边默认就好,不用操作,右边添加依赖,点击下图中所示红色区域在弹出的栏目中依次搜索SpringWeb,SpringDataJPA,MySQLDr......
  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......
  • Springboot计算机毕业设计学生报到小程序【附源码】开题+论文+mysql+程序+部署
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着教育信息化的不断推进,学生报到流程也逐渐向数字化、智能化方向转变。传统的报到方式通常涉及大量的纸质材料和现场排队等待,不仅效率低下,而且容易......
  • Springboot计算机毕业设计行程日记卡小程序【附源码】开题+论文+mysql+程序+部署
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在数字化和移动互联网时代,人们对于旅行方式的需求正发生深刻变化。行程规划、景点打卡、美食推荐等旅行需求日益个性化、多元化。然而,传统的旅行规划......
  • 震惊 vue+express创建的node上线竟然如此简单!
    1去阿里云申请服务器   首先登录阿里云,搜索服务器esc选择免费试用选择centos选择一台服务器   然后进入服务器控制台,点击概况选择重置密码修改root用户密码用户名为root不建议修改   点击远程连接输入自己的密码   输入命令安装宝塔面板 ......
  • 045springboot电器家电物品维修系统小程序(源码+文档+运行视频+讲解视频)
    项目技术:springboot+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows......
  • 042springboot大学生党务学习平台系统小程序(源码+文档+运行视频+讲解视频)
    项目技术:springboot+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows......
  • 041springboot超市售货商品入出库管理系统小程序(源码+文档+运行视频+讲解视频)
    项目技术:springboot+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows......
  • 关于Vue弹框组件this.$confirm
    确定后不能刷新页面列表show_tank(record){varthat=thisthis.$confirm({title:'您确定要选择吗?',content:'选择后不可修改',closable:true,//是否显示右上角的xmaskClosable:true,//触发阴影层的点击......