目錄
若依系統簡介
前端調用實現
前端調用舉例
后臺邏輯實現
若依系統簡介
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
)
