搭建小而美博客总结

个人博客采取技术栈：semanticUI+Thymeleaf+springboot+Mybatis

博客搭建环境：

JDK8 、MySQL 5.7 、Springboot 2.5.2、Maven、Idea

搭建博客所遇问题：

SQL表与实体类的关系：
因为表中带有多个外键，所以会产生一对多，和多对一的关系，我们的实体类的编写，比如一个博客对应一个分类，但是SQL表中blog表与type表是以外键相关联，所以要查询全部博客的信息，需要采用mybatis的Assoation进行结果集映射，其余同理；
多条件查询：
在博客的后台管理处，查询博客需要对三个条件进行判断，此处采用了动态SQL解决
博客的编辑页面和新增页面无法共用一个：
在thymeleaf中，始终无法解决通过获取地址栏的请求，去决定是否数据回显，（自己对thymeleaf模板引擎的语法不熟悉），采取笨重的方法新建了编辑页面来完成2个功能，有点代码冗余！
分页查询
教程采取JPA自带的，我采用了PageHelper插件，以前都是写原生的分页，觉得头疼，用了PageHelper真是舒服，使用步骤：
导入启动器
在查询sql执行前加上分页条件，就会自动按照分页条件查询
查询结果保存生成一个PageInfo对象，这样就可以在前台进行分页操作了！
集成markdown
官网：https://pandao.github.io/editor.md/
编辑博客的时候需要集成markdown的插件，使用方法很简单，去到官网下载css和js文件，然后拷贝一下文本域初始化为markdown的js代码，一定要主要这段代码中的路径path的问题：

 //初始化Markdown编辑器
    var contentEditor;
    $(function() {
      contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
       // path    : "../../static/lib/editormd/lib/"
        path    : "/lib/editormd/lib/"
      });
    });

网页动画问题：
官网：https://animate.style/
也是通过引入css和js文件，去官网选择自己喜欢的动画使用即可，使用方法：
新版本：animate__animated animate__pulse这种输入方式才可以，
老版本：animated bounce
样式选择： bounce pulse flush fadeIn

代码块高亮问题：
官网：https://prismjs.com/
我们前端展示的时候，如果是代码，需要进行高亮显示，同理，选择自己喜欢的代码高亮样式下载，然后导入js和css文件，拷贝初始化代码即可！

文章目录的生成：
官网：https://tscanlin.github.io/tocbot/
同样步骤：导入css和js，确定目录位置，，拷贝初始化代码：

文章二维码生成：
官网：https://davidshimjs.github.io/qrcodejs/

前端页面解析问题：
官网：https://github.com/atlassian/commonmark-java
因为我们提交的blog对象是经过markdown语法修饰过的，但是前台thymeleaf进行解析的时候，是把这种语法转化为纯文本进行解析的，我们需要进行处理，使得前台可以按照html的格式进行解析blog对象！
使用步骤：
1.导入依赖：需要导入三个依赖，这三个jar包作用是将markdown格式转成html格式
2.拷贝工具类MarkDownUtils
3.使用工具类在获取到数据后，在service层处理一下

 @Override
    public Blog getAndConvert(int id) {
        Blog blog = blogMapper.findBlogById(id);
        if(blog==null){
            throw new NotFoundException("该博客不存在");
        }
        //将查询出来的博客的content内容处理一下
        String content=blog.getContent();
        blog.setContent(MarkdownUtils.markdownToHtmlExtensions(content));//处理
        return blog;
    }

4.前台获取文本content的时候使用 th:utext="${blog.content}"来解析！

看板娘的添加：
地址：https://blog.csdn.net/Allure_LoveU/article/details/112603534
在前台页面展示处编写div，然后对div进行js修饰即可，js代码在连接处！

网站添加音乐播放器：
本站采取了最简单的html原生audio标签，去播放本地音乐

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
        	src="音频在项目中的绝对路径">
</audio>

背景图片处理
背景图片原本一直存在问题，不是repeat就是背景图片太大不会等比适应，直接按F12copy的acwing的backgroud的css样式，果然有效，y总牛皮！

body {
    background: url("../images/back04.jpg");
    background-position-x: initial;
    background-position-y: initial;
    background-size: 100% 100%;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: white;
}