springboot+mybatis plus+vue+elementui+axios 表格分页查询demo

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: springboot+mybatis plus+vue+elementui+axios 表格分页查询demo

1、创建springboot项目

2、pom.xml 里面添加 依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mysql 6-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.22</version>
        </dependency>
        <!--mybatis plus 依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

3、pojo 实体类实现

@Data
@TableName("userinfo")
public class UserInfo {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
}

4、mapper 接口实现

@Mapper
public interface UserInfoMapper extends BaseMapper<UserInfo> {
    //分页
    public Page<User> findByPage(int pageCode, int pageSize);
}

5、service 接口实现

public interface UserInfoService extends IService<UserInfo> {
    //分页
    public Page<UserInfo> findBy(int pageCode, int pageSize);
}

service 下面impl 的业务实现类:

@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {
    @Autowired
    private UserInfoMapper userInfoMapper;
    @Override
    public Page<UserInfo> findByPage(int pageCode, int pageSize) {
        //1.创建Page对象,传入两个参数:当前页和每页显示记录数
        Page<UserInfo> page = new Page<UserInfo>(pageCode,pageSize);
        //2.将分页查询到的所有数据封装到Page对象中
        userInfoMapper.selectPage(page,null);
        return page;
    }
}

6、mybatis-plus 分页需要实现分页拦截器 config 包

@Configuration
@MapperScan("com.mapper")
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

7、controller 控制器的实现

@CrossOrigin //允许跨域 禁止ajax 访问
@RestController
@RequestMapping("/userinfo")
public class UserInfoController {
    @Autowired
    private UserInfoService userService;
    //    分页
    @GetMapping("/page/{pageCode}/{pageSize}")
    public Page<UserInfo> findByPage(@PathVariable(value = "pageCode") int pageCode,
                                     @PathVariable(value = "pageSize") int pageSize) {
        Page<UserInfo> pageInfo = userService.findByPage(pageCode, pageSize);
        return pageInfo;
    }
}

8、静态页面实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/vue.js"></script>
    <script src="../index.js"></script>
    <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- 表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="id" label="编号" width="180"></el-table-column>
          <el-table-column prop="username" label="账号" width="180"></el-table-column>
          <el-table-column prop="password" label="密码" width="180"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="warning">修改</el-button>
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--   element-ui分页组件-->
               <div class="block">
                   <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="this.params.page"
                           :page-sizes="[1, 2, 3, 4]"
                           :page-size="this.params.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="this.total">
                   </el-pagination>
              </div>
    </div>
    <script>
      const vm=new Vue({
        el:'#root',
        data(){
          return{
            tableData:[] ,//表格显示的数据
            page:1,
            size:'',
            total:'',
            params: {
              page: 1,
              size: 3,
            },
          }
        },
        created(){ //函数钩子 启动服务器时候运行的方法
          //this.getAll();
          this.pagehelper();
        },
        methods:{
          getAll(){
            //发送异步请求
            axios.get("http://localhost:/userinfo").then((res)=>{
              this.tableData=res.data;
            })
          },
          //    分页
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.size = val;
            this.pagehelper();
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.page = val;
            this.pagehelper();
          },
          pagehelper:function(){
            that = this;
            axios.get("http://localhost:/userinfo/page/" + this.params.page + "/" + 
            this.params.size).then((res) => {
              console.log("分页页面")
              console.log(res.data);
              console.log("分页后")
              that.tableData = res.data.records;
              that.total = res.data.total;
              console.log(this.total)
            });
          }
        }
      })
    </script>
  </body>
</html>

这里的index.js和index.css 是element 的js和css。

9,下载前端插件vue+elementui+axios链接

下载链接-前端插件vue+elementui+axios.rar

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
8天前
|
SQL Java 数据库连接
SpringBoot整合Mybatis
SpringBoot整合Mybatis
34 2
|
8天前
|
Java Spring 容器
Spring系列文章:Spring6集成MyBatis3.5
Spring系列文章:Spring6集成MyBatis3.5
|
8天前
|
Java
Springboot 导出word,动态填充表格数据
Springboot 导出word,动态填充表格数据
|
8天前
SpringBoot+Mybatis-Plus+PageHelper分页+多条件查询
SpringBoot+Mybatis-Plus+PageHelper分页+多条件查询
32 0
|
8天前
|
运维 监控 安全
云HIS医疗管理系统源码——技术栈【SpringBoot+Angular+MySQL+MyBatis】
云HIS系统采用主流成熟技术,软件结构简洁、代码规范易阅读,SaaS应用,全浏览器访问前后端分离,多服务协同,服务可拆分,功能易扩展;支持多样化灵活配置,提取大量公共参数,无需修改代码即可满足不同客户需求;服务组织合理,功能高内聚,服务间通信简练。
43 4
|
8天前
|
SQL Java 数据库连接
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
|
6天前
|
算法 Java 数据库连接
Spring+MySQL+数据结构+集合,Alibaba珍藏版mybatis手写文档
Spring+MySQL+数据结构+集合,Alibaba珍藏版mybatis手写文档
|
8天前
|
Java 关系型数据库 MySQL
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口(下)
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口
47 0
|
8天前
|
Java 关系型数据库 MySQL
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口(上)
【MySQL × SpringBoot 突发奇想】全面实现流程 · xlsx文件,Excel表格导入数据库的接口
51 0
|
8天前
|
Java 数据库连接 Spring
Spring 整合mybatis
Spring 整合mybatis
22 2