Project renderings:

Project structure Drawing:

For the sake of practice, the project doesn’t have much code, just pagination code, and it uses the PageHelper plugin, so pagination is super simple. Related operation steps and ideas: The DAO layer directly queries all the data. 4. The Service layer first sets the conditions of paging query, such as the number of current pages and the number of pages displayed on each page, and then queries all. 5, Contraller layer, get Page parameters (current Page, how many pages per Page), then call the service layer method, return a Page object, according to the Page object encapsulation PageInfo object. Finally, convert PageInfo to JSON format and return to the page.

Project Environment:

Front end: vue

SSM (Spring + SpringMVC + Mybatis)

Database: mysql

If you run into problems with this code, please add to it 960513 and I will pull you into the corresponding learning group. Help you quickly master this function code!

The back-end code

The pom. XML file introduces the jar coordinates of PageHelper

<! -- Paging plug-in coordinates -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
   </dependency>
Copy the code

2. Spring configuration files inject paging plug-in information

 <! -- Add mybatis to Spring
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.javaxxf.pojo"/>
        <! -- Paging plugin -->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>
Copy the code

** 3. The DAO layer directly queries all data **

ZiLiaoDao.java

@Component
public interface ZiLiaoDao {
    @Select("SELECT * FROM ziliao")
    public abstract List<ZiLiao> findAll(a);

}
Copy the code

4, service layer first set the Page query conditions, such as the current Page number, how many pages per Page display, and then query all, return is a Page object

ZiLiaoServiceImpl.java

@Service
public class ZiLiaoServiceImpl  implements ZiLiaoService {

    @Autowired
    private ZiLiaoDao ziLiaoDao;
    / * * * *@author xuxiaofei
     * @date2021/8/13 10:54 am *@paramCurrentPage the currentPage *@paramPageSize Number of items per page *@return com.github.pagehelper.Page
     */
    public Page findAll(Integer currentPage, Integer pageSize) {
        // Set paging
        Page page= PageHelper.startPage(currentPage,pageSize);
        // query all
        List<ZiLiao> all = ziLiaoDao.findAll();
        returnpage; }}Copy the code

5, Contraller layer, get the page passed parameters (current page, how many data per page display), and then call the method of the service layer, return a Page object, according to the page object and then encapsulate a PageInfo object, and finally convert PageInfo into JSON format to return the page.

ZiLiaoController.java

@RestController
public class ZiLiaoController {
@Autowired
private ZiLiaoService ziLiaoService;
@RequestMapping("findAll")
public String getAll(Integer currentPage, Integer pageSize) throws IOException {
// paging query
Page page = ziLiaoService.findAll(currentPage, pageSize);
/ / encapsulation PageInfo
PageInfo info = new PageInfo(page);
// Convert info to JSON and respond to the client
String json = new ObjectMapper().writeValueAsString(info);
returnjson; }}Copy the code

The front-end code

index.html

methods:{
            // paging query function
            selectByPage(){
                axios.post("findAll"."currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp= > {
                        // Assign the queried data to tableData
                        this.tableData = resp.data.list;
                        // Set paging parameters
                        / / the current page
                        this.pagination.currentPage = resp.data.pageNum;
                        / / the total number of article
                        this.pagination.total = resp.data.total; })},// The function executed when changing the number of lines per page
            handleSizeChange(pageSize) {
                // Modify paging query parameters
                this.pagination.pageSize = pageSize;
                // Re-execute the query
                this.selectByPage();
            },
            // The function executed when the page number is changed
            handleCurrentChange(pageNum) {
                // Modify paging query parameters
                this.pagination.currentPage = pageNum;
                // Re-execute the query
                this.selectByPage(); }},mounted(){
            // call paging query
            this.selectByPage();
        }
Copy the code

Download the full source code: gitee.com/xuxiaofei19…

If you run into problems with this code please add to it 960513! Help you quickly master this function code!