（一）工程建立到登录与认证-Spring boot、Shiro、Mybatis-Plus、MySql
（二）博客显示与登录后按钮按照Shiro授权显示加载html
（三）博客主页文章分页查询，预览显示

五、文章分页查询、预览显示

5.1 数据库

5.1.1 数据表设计

在第一章我们已经创建了数据库，并创建了几个用户相关的表，现在我们再来创建文章相关的数据表，sql语句如下

create table `article`(`id` int(3) not null comment '博客id',`title` varchar(100) not null comment '标题',`text` longtext not null comment '正文',`tag` varchar(255) not null comment '标签 java python',`type` varchar(25) not null comment '文章类型 原创 转载',`secret` int(1) not null default '0' comment '是否私密 0公开 1私密',`create_time` date not null comment '创建时间',`edit_time` date not null comment '最后编辑时间',`likes` int(5) not null default '0' comment '点赞次数',`author` varchar(20) not null comment '作者名称',`digest` varchar(255) not null comment '摘要',`watch` int(10) not null default '0' comment '浏览次数',primary key (`id`)
) engine=InnoDB default charset=utf8mb4;

5.1.2 插入数据

insert into `article` values (0, '标题0', '正文0 如何使用java \n 正文', 'java', '原创', 0, '2021-01-13', '2022-01-10',0, 'liang', '摘要1...', 0);
insert into `article` values (1, '标题1', '正文1 如何使用python \n 正文', 'python', '原创', 0, '2021-02-11', '2022-02-10',0, 'liang', '摘要1...', 1);
insert into `article` values (2, '标题2', '正文2 如何使用Spring \n 正文', 'java, Spring', '原创', 0, '2022-01-10', '2022-02-10',0, 'liang', '摘要2...', 100);
insert into `article` values (3, '标题3', '正文3 如何使用linux \n 正文', 'linux', '转载', 0, '2021-10-10', '2022-01-10',0, 'liang', '摘要3...', 0);
insert into `article` values (4, '标题4', '正文4 如何使用c \n 正文', 'c', '原创', 1, '2022-10-10', '2022-01-10',0, 'liang', '摘要4...', 1);
insert into `article` values (5, '标题5', '正文5 如何使用c++ \n 正文', 'c++', '原创', 0, '2022-09-10', '2022-01-10',0, 'liang', '摘要5...', 0);
insert into `article` values (6, '标题6', '正文6 如何使用go \n 正文', 'go', '原创', 0, '2022-08-10', '2022-01-10',0, 'liang', '摘要6...', 122);

5.1.3 查询结果测试

select * from article;

5.2 实体类及Dao

5.2.1 实体类创建

1. 创建com.liang.modules.sys.entity.ArticleEntity

   @Data
   @ToString
   @TableName("article")
   public class ArticleEntity implements Serializable {private static final long serialVersionUID = -3614720428468967910L;@TableId("id")private int id;private String title;   //标题private String text;    //正文private String tag;   //标签 java pythonprivate String type;    //文章类型 原创 转载private int secret;  // 0-公开  1-私密private String createTime;private String editTime;private int likes;      //赞数量private String author;  //作者private String digest;  //摘要private int watch;      //看过数
   }
   

2. 创建com.liang.modules.sys.entity.VO.ArticleVOEntity

   @Data
   @ToString(callSuper = true)
   @TableName("article")
   public class ArticleVOEntity extends ArticleEntity implements Serializable {private static final long serialVersionUID = -4837335904568195683L;@TableField(exist = false)private String[] tagValues;  // 标签数组@TableField(exist = false)private String articleUrl;  //文章地址
   }
   

5.2.2 创建ArticleDao

• 创建com.liang.modules.sys.dao.ArticleDao ，继承BaseMapper(MyBatis-plus中特有的)

  @Repository
  public interface ArticleDao extends BaseMapper {
  }
  

5.2.3 测试dao

1. 在测试类com.liang.TestBlog01ApplicationTests中，这个类在之前的测试中也用过
   类中创建内容如下

       @Autowiredprivate ArticleDao articleDao;@Testvoid testArticleDao(){List articleVOEntities = articleDao.selectList(null);System.out.println(articleVOEntities);}
   

2. 测试，点击testArticleDao左侧的绿色启动键，进行测试， 结果如红框内所示即成功了（可忽略内容不一致，因为当时测试的时候表内容不一样）
   

5.3 Service及Controller

5.3.1 两个工具类编写

1. 页面返回结果工具类
   创建com.liang.common.utils.PageResult,内容如下

   @Data
   @ToString
   public class PageResult {private int pageNumber;    //当前页数private int totalPage;  //总页数private int records;    //总记录数private List rows;   //显示的行内容 ?是内容的类
   }
   

2. 字符串和数组转换工具类
   创建com.liang.common.utils.StringAndArray

   public class StringAndArray {/*** @method  string转数组* @description 将字符串转为数组，例如字符串为 “python, java” 将得到["python","java"]*/String[] stringToArray(String str){String[] strings = str.split(",");for (int i = 0; i < strings.length; i++) {strings[i] = strings[i].trim();}return strings;}/*** @method  数组转字符串* @description 例如["python","java"] 将得到“python, java” */String arrayToString(String[] strings){StringBuilder stringBuilder = new StringBuilder();for (int i = 0; i < strings.length; i++) {stringBuilder.append(strings[i].trim());if (i!=strings.length-1)    stringBuilder.append(',');}return stringBuilder.toString();}
   }
   

5.3.2 Mybatis-plus配置分页插件

创建com.liang.common.config.MybatisPlusConfig

@Configuration
public class MybatisPlusConfig {@Beanpublic PaginationInterceptor paginationInterceptor(){return new PaginationInterceptor(); }
}

5.3.3 创建ArticleService

1. 创建com.liang.modules.sys.service.ArticleService

   public interface ArticleService {PageResult findAllArticle(int pageNumber, int pageSize);
   }
   

2. 创建com.liang.modules.sys.service.impl.ArticleServiceImpl

   @Service
   public class ArticleServiceImpl implements ArticleService {@Autowiredprivate ArticleDao articleDao;@Overridepublic PageResult findAllArticle(int pageNumber, int pageSize) {PageResult pageResult = new PageResult();QueryWrapper wrapper = new QueryWrapper<>();Page page = new Page<>(pageNumber, pageSize);IPage articles = articleDao.selectPage(page, wrapper.orderByDesc("create_time"));for (ArticleVOEntity article :articles.getRecords()) {article.setTagValues(StringAndArray.stringToArray(article.getTag()));article.setArticleUrl("/article/"+ article.getId());}pageResult.setPageNumber(pageNumber);pageResult.setTotalPage((int) articles.getPages());pageResult.setRecords((int) articles.getTotal());pageResult.setRows(articles.getRecords());return pageResult;}
   }
   

5.3.4 测试Service

1. 编写并执行如下

       @Autowiredprivate ArticleService articleService;@Testvoid testArticleService(){PageResult allArticle = articleService.findAllArticle(1, 5);System.out.println(allArticle);}
   

2. 结果
   

5.3.5 创建ArticleController

• @RestController
  public class ArticleController {@Autowiredprivate ArticleService articleService;@GetMapping("/myArticles")public JsonResult myArticles(int pageSize, int pageNumber){PageResult allArticle = articleService.findAllArticle(pageNumber, pageSize);return new JsonResult(200, "ok", allArticle);}
  }
  

5.3.6 测试Controller

1. 运行整个Spring boot项目，地址栏输入http://localhost:8080/myArticles?pageSize=5&pageNumber=1
2. 结果
   

5.4 页面显示和加载

5.4.1 引入layui

原layui官网不知为何关闭了，可从layzui镜像网站下载，下载后将里面的layui文件夹放置在src/main/resources/static中

5.4.2 编写index.js

1. 创建static/style/js/index.js文件，编写内容如下，实现首次页面加载时博客的显示，即显示第一页内容，并且每页显示数量为5

   /*** 本页博文显示*/
   function putInArticle(data) {$(".qz-session-center").empty();var articles = $(".qz-session-center");$.each(data, function (index, article) {var center = $('
   ' +'
   ' +'
   ' +'' + article['title'] + '' +'
   ' +'
   ' +'' + article['type'] + '  ' +'  ' + article['createTime'] + '  ' +' ' + article['author'] + '  ' +'
   ' +'
   ' +'
   ' +' 
   ' + article['digest'] + '
   ' +'
   ' +'
   ' +'阅读全文 ' +'
   ' +'
   ' +'
   ' +'
   ' +'
   ');articles.append(center);for (var i = 0; i < article['tagValues'].length; i++) {var articleTag = $(' ' + article['tagValues'][i] + ' ');$('.article-tags').eq(index).append(articleTag);}})
   }/*** 博客分页查询并显示*/
   function pageRender(currentPage)  {var jsonStr = {pageSize: 5,pageNumber: currentPage};$.ajax({type: "GET",url: "/myArticles",dataType: "json",data: jsonStr,success: function (data) {//放入数据putInArticle(data.data.rows);}})
   }// 加载页面时运行一次
   pageRender(1);
   

2. 编写到这里，就可以运行spring boot项目，并进入http://localhost:8080/查看页面，可以看到页面将会显示五个博客文章
   4. 完善，编写页面选择以及翻页按钮显示
   在index.js中添加一个函数，该函数用layui渲染翻页按钮，并实现翻页调用

   /*** 分页按钮显示*/
   function putPageHelper(data, curnum) {var count = data.data.records;//总页数大于页码总数layui.use('laypage', function () {var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'page-helper', count:  count//数据总数, limit: 5, curr: curnum, jump: function (obj, first) {if (!first) {curnum = obj.curr;pageRender(curnum);}}});});
   }
   

3. 在pageRender函数中调用，并且调用scrollTo(0,0)实现翻页后，页面转至最顶部，即将pageRender完善为

   /*** 博客分页查询并显示*/
   function pageRender(currentPage)  {var jsonStr = {pageSize: 5,pageNumber: currentPage};$.ajax({type: "GET",url: "/myArticles",dataType: "json",data: jsonStr,success: function (data) {//放入数据putInArticle(data.data.rows);//显示翻页按钮和翻页调用putPageHelper(data, currentPage);scrollTo(0,0);}})
   }
   

4. 运行并测试，往下翻将显示翻页按钮

5.4 个人信息及文章统计显示

5.4.1 引入aside.html页面

1. 引入templates/aside.html
2. 将index.html中的
   解注释
3. 将csdn图标、qq二维码、微信二维码保存至style/images/中
   
4. 运行项目（报错则检查target中是否有生成aside.html，没有则删除target重新运行），可以看到项目右侧将显示一些个人信息，但qq和微信二维码默认显示的，我们要做的效果是默认不显示，当鼠标移动到qq、微信图标时再显示，接下来将编写header.js来实现

5.4.2 编写header.js

创建static/style/js/header.js文件，编写内容如下

$("#wx_picture").hide();
$("#qq_picture").hide();$(".wxchat").mouseenter(function (){$("#wx_picture").show();
});
$(".wxchat").mouseleave(function (){$("#wx_picture").hide();
});$(".qq").mouseenter(function (){$("#qq_picture").show();
});
$(".qq").mouseleave(function (){$("#qq_picture").hide();
});

这样就实现了鼠标移入移出qq、微信图标的二维码显示与隐藏

5.4.3 实现文章总数

未完待续

六、关于显示

6.1 页面编写