目录
若依系统简介
前端调用实现
前端调用举例
后台逻辑实现
若依系统简介
RuoYi 是一个基于 Spring Boot、Apache Shiro、MyBatis 和 Thymeleaf 的后台管理系统，旨在降低技术难度，助力开发者聚焦业务核心，从而节省人力成本、缩短项目周期并提升软件安全质量。
-
前端：基于bootstrap的轻量级表格插件bootstrap-table
-
后端：基于mybatis的轻量级分页插件pageHelper
前端调用实现
初始化一个数据表格，在网页中以表格形式展示从后端获取的数据
var options = {url: prefix + "/list",columns: [{field: 'id',title: '主键'},{field: 'name',title: '名称'}]
};
$.table.init(options);function queryParams(params) {var search = $.table.queryParams(params);search.userName = $("#userName").val();return search;
}①配置对象options
- url：表格加载数据的API地址(后端接口)
- columns：表格的列配置(数组)
- field：绑定到数据集源的字段名(即后端数据中的字段名)
- title：表格表头显示的列标题(即前端显示的表格的每一列的标题)
②初始化表格
- $.table：插件的命名空间
- init()函数：初始化表格的方法，将配置对象options传入init()函数，插件会根据配置渲染表格
③自定义查询参数
queryParams()函数在表格插件中自定义查询参数→表格插件将这些参数附加到AJAX请求的URL上，后端就能接收到前端页面上的自定义条件，实现数据过滤
- params：包含表格的当前状态信息→分页信息、排序信息、搜索条件
- $.table.queryParams(params)：调用表格插件的默认参数处理方法，将param转换为后端接口需要的标准查询参数格式
- search.userName = $("#userName").val()：按用户名过滤表格数据，将值添加到参数对象中，字段名为userName
前端调用举例
假设：
params={pageSize:8,pageNumber:3,sortName:'id',sortOrder:'asc'}
$("#userName").val()值为"Aria"
那么函数会返回：
{pageSize: 8,pageNum: 3, // 注意：某些插件会转换参数名sort: 'id',order: 'asc',userName: "Aria" // 添加的自定义参数
}当表格发起数据请求时，实际请求的URL会变成类似如下的样子：
/user/list?pageSize=8&pageNum=3&sort=id&order=asc&userName=Aria后台逻辑实现
处理前端表格的分页数据请求的Spring MVC控制器方法，实现用户列表的分页查询功能
//处理POST请求，请求路径为/list
@PostMapping("/list")
//返回结果直接写入HTTP响应体，一般是JSON格式
@ResponseBody
public TableDataInfo list(User user)
{startPage(); // 此方法配合前端完成自动分页List<User> list = userService.selectUserList(user);return getDataTable(list);
}public TableDataInfo list(User user)以上函数接收User对象作为参数，Spring自动将HTTP请求参数绑定到User对象的属性上→返回TableDataInfo对象，封装分页数据的自定义数据结构
startPage();分页启动方法：从请求参数中获取分页信息→使用MyBatis分页插件启动分页拦截→后续的数据集查询自动进行物理分页
List<User> list = userService.selectUserList(user);调用服务层的selectUserList方法→传入user对象作为查询条件→返回的list是分页后的当前页数据
return getDataTable(list);将分页结果封装成前端表格需要的标准数据结构
提示：
项目分页插件默认是MySQL语法，如果项目要改成其他数据库，则需要修改配置application.yml文件中的属性helperDialect:你的数据库
学习链接：后台手册 | RuoYi
)
