Back-end technology: SpringBoot2.7.9, MyBatisPlus3.5.1, MySQL8
Front-end technology: Vue2.5.16 + axios, BootStrap3.3.7
1. Backend development
1.1, configure MyBatisPlus
1.1.1, add dependencies in pom.xml
<!-- Spring & SpringMVC --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </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>
1.1.2, configure the data source in application.yml
server: port: 8070 spring: datasource: type: com.zaxxer.hikari.HikariDataSource driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.01:3306/test_plus?useUnicode=true &characterEncoding=utf8 &zeroDateTimeBehavior=convertToNull &useSSL=false &serverTimezone=GMT+8 &allowPublicKeyRetrieval= true username: root password: 123456 mybatis-plus: type-aliases-package: demo.entity configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: table-prefix: t_ id-type: auto mapper-locations: classpath:mappers/*.xml
1.1.3, configure 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 @Configuration @MapperScan("demo.mapper") public class Demo { /** Configure pagination plugin */ @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } public static void main(String[] args) { SpringApplication. run(Demo. class); } }
1.2. Background development
1.2.1, SQL script
SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for t_article -- ---------------------------- DROP TABLE IF EXISTS `t_article`; CREATE TABLE `t_article` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `title` varchar(50) DEFAULT NULL, `logo` varchar(255) DEFAULT NULL, `descn` varchar(160) DEFAULT NULL, `create_time` datetime DEFAULT NULL, `cid` bigint(20) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1630090627736408069 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of t_article -- ---------------------------- BEGIN; INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1, 'Yangzi xx', NULL, 'eeeeeeee', \ '2023-01-02 00:00:00', 2); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090618022400001, 'Yangtze Evening News 1', NULL, 'dddsfjslfjalskd', '2023-01-03 00:00:00', 2); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625282740226, 'Yangtze Evening News 2', NULL, 'dddsfjslfjalskd', '2023-01-04 00:00:00', 2); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625865748482, 'Yangtze Evening News 3', NULL, 'dddsfjslfjalskd', '2023-01-05 00:00:00', 1); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090626520059905, 'Yangtze Evening News 4', NULL, 'dddsfjslfjalskd', '2023-01-06 00:00:00', 2); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627165982721, 'Yangtze Evening News 5', NULL, 'dddsfjslfjalskd', '2023-01-07 00:00:00', 1); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627736408066, 'Yangtze Evening News 6', NULL, 'dddsfjslfjalskd', '2023-01-08 00:00:00', 1); INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627736408068, 'qqq1w', 'kdsjlsfjieosjfiosjdfo', 'eeeee\ ', '2023-02-03 00:00:00', 2); COMMIT; -- ---------------------------- -- Table structure for t_channel -- ---------------------------- DROP TABLE IF EXISTS `t_channel`; CREATE TABLE `t_channel` ( `id` bigint(20) NOT NULL, `channel_name` varchar(50) DEFAULT NULL, `create_time` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of t_channel -- ---------------------------- BEGIN; INSERT INTO `t_channel` (`id`, `channel_name`, `create_time`) VALUES (1, 'Headline', '2023-02-27 17:27:14'); INSERT INTO `t_channel` (`id`, `channel_name`, `create_time`) VALUES (2, 'first seven', '2023-02-27 17:27:14'); COMMIT; SET FOREIGN_KEY_CHECKS = 1;
1.2.2, Entity Article
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; }
1.2.3, ArticleMapper.java
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); }
1.2.4, 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>
1.2.5, ArticleController
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") 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; } }
2. Front-end development
2.1, html code
<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>
2.2, Js code
<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>