pom.xml dependency
<!-- mybatis-plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.1</version>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
<!-- mysql-connector -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.32</version>
</dependency>
Set the pagination plug-in in the startup class
package demo;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@SpringBootApplication
@MapperScan("demo.mapper")
@Configuration//Configure the pagination plugin
public class Demo {<!-- -->
public static void main(String[] args) {<!-- -->
SpringApplication. run(Demo. class);
}
/** Configure pagination plugin */
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {<!-- -->
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
entity layer
package demo.entity;
import lombok.Data;
@Data
public class Article {<!-- -->
private Long id;
private String title;
private String logo;
private String descn;
private String createTime;
private Long cid;
}
mapper layer
package demo.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import demo.entity.Article;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
@Repository
public interface ArticleMapper extends BaseMapper<Article> {<!-- -->
Page<Article> selectByPage(Page<Article> page, @Param("title") String title);
}
ArticleMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="demo.mapper.ArticleMapper">
<select id="selectByPage" resultType="Article">
select * from t_article where title like '%${<!-- -->title}%'
</select>
</mapper>
controller layer
package demo. controller;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import demo.entity.Article;
import demo.mapper.ArticleMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin
public class ArticleController {<!-- -->
@Autowired
private ArticleMapper articleMapper;
@GetMapping("/list")//This useless constructor
public Page<Article> findAll(Long pageIndex, Long pageSize){<!-- -->
Page<Article> page = articleMapper. selectPage(new Page(pageIndex, pageSize), null);
return page;
}
@GetMapping("/list_custom")
public Page<Article> customFindAll(Long pageIndex, Long pageSize, String title){<!-- -->
Page<Article> page = articleMapper. selectByPage(new Page(pageIndex, pageSize), title);
return page;
}
}
Frontend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<table class="table table-striped">
<caption>List of articles</caption>
<thead>
<tr>
<th align="center">Number</th>
<th align="center">Title</th>
<th align="center">Description</th>
<th align="center">Published</th>
<th align="center">Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="art in articleList">
<td>{<!-- -->{art.id}}</td>
<td>{<!-- -->{art.title}}</td>
<td>{<!-- -->{art.descn}}</td>
<td>{<!-- -->{art.createTime}}</td>
<td align="center">
<button class="btn btn-link" style="margin-right: 10px;">Modify</button>
<button class="btn btn-link">Delete</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination" v-for="p in pageCnt">
<li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{<!-- -- >{p}}</a></li>
<li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{<!-- -->{p}}</ a></li>
</ul>
</div>
<script>
new Vue({<!-- -->
el: '#app',
data: {<!-- -->
articleList: null,
//for pagination
pageIndex: 1, //page number
pageSize: 3, //Number of items displayed on each page
pageTotal: 0, //total number of items
pageCnt: 0 //Total number of pages
},
methods: {<!-- -->
requestArticleList(){<!-- -->
axios.get("http://localhost:8070/list?pageIndex=" + this.pageIndex + " & amp;pageSize=" + this.pageSize).then(res => {<!-- -->
console. log(res. data)
this.articleList = res.data.records
this.pageCnt = res.data.pages
this.pageTotal = res.data.total
this.pageIndex = res.data.current
this.pageSize = res.data.size
})
},
doGo(p){<!-- -->
this.pageIndex = p
this. requestArticleList()
}
},
created: function () {<!-- -->
this. requestArticleList()
}
})
</script>
</body>
</html>