SpringBoot博客开发日常记录-博客浏览界面

之前是用markdown语法写博客，现在需要将博客展示
这里引入了thymeleaf模板

1. 编写ArticleController

@Autowired
    ArticleService articleService;
    @GetMapping("/article/showArticle/{articleId}")
    public String showArticle(@PathVariable("articleId") int articleId,
                              HttpServletResponse response,
                              Model model,
                              HttpServletRequest request){
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //articleService.getArticleById()
        Article article=articleService.getArticleById(articleId);
        if(article!=null&&article.getTitle()!=null){
            model.addAttribute("article",article);
        }
        response.setHeader("articleId",articleId+"");
        return "showArticle";
    }

2. 在ArticleService中实现了getArticleById函数

import java.util.List;

public interface ArticleService {
    public List<Article> findAllArticle();
    public List<Article> findUserArticle(int userid);
    public Article getArticleById(int id);
    public int createNewArticle(Article article);
    public List<Article> getArticleList();
}

ArticleServerImpl.class是ArticleService的实现类

import com.nevergetme.nevergetmeweb.bean.Article;
import com.nevergetme.nevergetmeweb.mapper.ArticleMapper;
import com.nevergetme.nevergetmeweb.service.ArticleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ArticleServerImpl implements ArticleService {
    @Autowired
    private ArticleMapper articleMapper;
    @Override
    public List<Article> findAllArticle() {
        List<Article> articles=articleMapper.getAllArticle();
        return articles;
    }

    @Override
    public List<Article> findUserArticle(int userid) {
        return articleMapper.getUserArticle(userid);
    }

    @Override
    public Article getArticleById(int id) {
        return articleMapper.getArticleById(id);
    }

    @Override
    public int createNewArticle(Article article) {
        return articleMapper.createNewArticle(article);
    }

    @Override
    public List<Article> getArticleList() {
        return articleMapper.getArticleList();
    }
}

3. ArticleMapper是mybatis映射

import com.nevergetme.nevergetmeweb.bean.Article;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

@Mapper
public interface ArticleMapper {
    public List<Article> getAllArticle();
    public List<Article> getUserArticle(int userId);
    public Article getArticleById(int id);
    public int createNewArticle(Article article);
    public List<Article> getArticleList();
}

4. 在ArticlesMapper.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="com.nevergetme.nevergetmeweb.mapper.ArticleMapper">
    <resultMap id="articleResultMap" type="com.nevergetme.nevergetmeweb.bean.Article">
        <id column="id" property="id"/>
        <result column="title" property="title"/>
        <result column="content" property="content"/>
        <result column="publishDate" property="publishDate"/>
        <result column="updateDate" property="updateDate"/>
        <result column="likes" property="likes"/>
        <association property="author" javaType="com.nevergetme.nevergetmeweb.bean.User">
            <id property="id" column="user_id"/>
            <result property="username" column="username"/>
        </association>
    </resultMap>
    <select id="getArticleById" parameterType="java.lang.Integer" resultMap="articleResultMap">
        select article.id,article.title,article.content,
               DATE_FORMAT(article.publishDate,'%Y-%m-%d %H:%i:%s') publishDate,
               DATE_FORMAT(article.updateDate,'%Y-%m-%d %H:%i:%s') updateDate,article.likes,
               user.id as user_id,user.username
               from article left join user on article.authorId=user.id where article.id=#{id}
    </select>
</mapper>

5. 编写模板

在template地下新建showArticle.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ReadArticle</title>
    <link rel="stylesheet" href="/plug/editor.md-master/css/editormd.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/plug/editor.md-master/lib/marked.min.js"></script>
    <script src="/plug/editor.md-master/lib/prettify.min.js"></script>
    <script src="/plug/editor.md-master/lib/raphael.min.js"></script>
    <script src="/plug/editor.md-master/lib/underscore.min.js"></script>
    <script src="/plug/editor.md-master/lib/sequence-diagram.min.js"></script>
    <script src="/plug/editor.md-master/lib/flowchart.min.js"></script>
    <script src="/plug/editor.md-master/editormd.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="card">
        <div class="card-header">
            <h1 id="articleTitle" th:text="${article.title}"></h1>
        </div>
        <div class="card-body">
            <div id="layout" class="editor">
                <div id="test-editormd">
                    <textarea></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var showText=[[${article.content}]];
</script>
<script>
    $(document).ready(function (){
        var testEditor = editormd.markdownToHTML("test-editormd", {
            markdown:showText ,
            htmlDecode: "style,script,iframe",  // you can filter tags decode
        });
    });
</script>
</body>
</html>

6. 运行结果

7.注意事项

• thymeleaf在h5和js中的使用问题
• @Controller和@RestController的区别

1. 如果只是使用@RestController注解，Controller中的方法无法返回html，视图配置器不起作用
2. 如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。如果需要返回JSON，XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。
3. @RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。

8.项目地址

项目地址