Table of contents
1. The question leads
We can notice that if a large amount of data is processed in the interface, when one page cannot be displayed, a multi-page processing method will be adopted.
At this time, we use the login log browsing pagination effect of the log management in the system management in Ruoyi.
2. Principle analysis:
Let's discuss the principle of this paging function from the front and back ends:
①Front part:
First find the string of codes in ruoyi-ui/src/views/monitor/operlog/index.vue in the front-end code.
The value of total returned after initializing total to 0 depends on the number of data items sent from the background; the getList method bound by @pagination is responsible for processing the returned data to realize the paging function.
The List function is called in the getList method
Among them, method: 'get' is the requested access method, which corresponds to the GetMapping of the backend;
On the page side, use the F12 developer tool to view the XHR and extraction in the network, and you can see that the backend returns
Where pageNum and pageSize are the number of pages and the number of data stored on each page, respectively;
②Back end part:
startPage() and getDataTable(List) implement the paging function and return the database data respectively. The implementation of any paging function needs to execute the startPage() method first.
@RequestMapping("/monitor/operlog")
where startPage():
getDataTable(List):
The log output results of the backend that can be seen at this time are as follows
19:17:02.757 [http-nio-8080-exec-27] WARN c.a.d.p.DruidAbstractDataSource - [testConnectionInternal,1494] - discard long time none received connection. , jdbcUrl : jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8, version : 1.2.8, lastPacketReceivedIdleMillis : 159511
19:17:02.786 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Preparing: SELECT count(0) FROM sys_logininfor
19:17:02.787 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Parameters:
19:17:02.792 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - <== Total: 1
19:17:02.793 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Preparing: select info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time from sys_logininfor order by info_id desc LIMIT ?, ?
19:17:02.793 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Parameters: 10(Long), 10(Integer)
19:17:02.797 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - <== Total: 10
The SQL was intercepted and changed by MyBatis. The selectOperLogList function corresponds to two sentences of SQL:
* A sentence to query the total number of rows in the table [count(0)]
* A sentence to limit the number of rows output to the query data [LIMIT 10]
count(0): table data The total number of rows
LIMIT has two forms:
*LIMIT num: the first num data
*LIMIT offset,num: num data starting from the offset position
So when we take the parameter as pageNum=2&pageSize=10, the backend output log is:
19:23:09.115 [http-nio-8080-exec-36] WARN c.a.d.p.DruidAbstractDataSource - [testConnectionInternal,1494] - discard long time none received connection. , jdbcUrl : jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8, version : 1.2.8, lastPacketReceivedIdleMillis : 210976
19:23:09.140 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Preparing: SELECT count(0) FROM sys_logininfor
19:23:09.140 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Parameters:
19:23:09.144 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - <== Total: 1
19:23:09.145 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Preparing: select info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time from sys_logininfor order by info_id desc LIMIT ?, ?
19:23:09.145 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Parameters: 10(Long), 10(Integer)
19:23:09.148 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - <== Total: 10
First SELECT count (0) to get all the data from the background database sys_loginifor, and then to filter the corresponding data value;
The function of 10 (Long) after the limit is to display the current page. For example, how much data is stored before I fetch the second page at this time. Because it is the second page, 10 data have been stored, which is 10 (Long); The function of 10 (Integer) is equivalent to PageSize, which is the amount of data per page; Total: 10 is the total amount of data on the current page.
3. Summary
The effect of pagination:
On the one hand, paging processing can improve the efficiency of our browsing data, conform to the psychology of our browsers, and reduce the messy problems existing in a large amount of data; on the other hand, pagination can be realized when querying data with sql, such as the limit of mysql, and the query result of sql is The data on the first few pages is very efficient; at the same time, paging technology can also reduce bandwidth usage and improve access speed.
The principle of paging: the front end uses the parameters pageNum and pageSize; the back end uses the functions startPage and getDataTable;
Brief analysis of the principle of back-end paging: first use count (0) to query the total number of data, and then add the LIMIT instruction after the query statement to filter.