废弃说明：
这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

需求

上一篇文章介绍了如何在主页展示文章列表，这篇文章主要介绍点击列表中文章标题跳转到文章详情界面功能的实现

后端api设计

• 首先封装一个ArticleVO类，用户存储一篇文章的详细信息

package com.qianyucc.blog.model.vo;

import lombok.*;

/**
 * @author lijing
 * @date 2019-10-12 18:18
 * @description 封装文章详细信息
 */
@Data
public class ArticleVO {
    private Long id;
    private String author;
    private String title;
    private String content;
    private String[] tags;
    private Integer type;
    private String category;
    private String gmtCreate;
    private String gmtUpdate;
    private String tabloid;
    private Integer comments;
    private Integer views;
}

• 自定义异常：找不到指定id的文章时发生的异常

package com.qianyucc.blog.exception;

/**
 * @author lijing
 * @date 2019-10-12 18:23
 * @description 自定义异常：找不到当前文章
 */
public class NotFindArticleException  extends RuntimeException {
    public NotFindArticleException() {
        super("找不到当前文章！");
    }

    public NotFindArticleException(String message) {
        super(message);
    }
}

• 编写业务层代码，注意每浏览一次文章阅读数都要加一

/**
 * 根据id查询文章信息
 *
 * @param id
 * @return
 */
public ArticleVO findArticleById(Long id) {
    Optional<ArticleDO> byId = articleRepository.findById(id);
    if (byId.isPresent()) {
        ArticleDO articleDO = byId.get();
        ArticleVO articleVO = ArticleUtil.doToArticleVO(articleDO);
        //增加阅读数
        articleDO.setViews(articleDO.getViews() + 1);
        articleRepository.save(articleDO);
        return articleVO;
    } else {
        throw new NotFindArticleException(StrUtil.format("找不到id为{}的文章！", id));
    }
}

上面用到了自定义的工具方法：doToArtocleVO()，功能是将一个DO对象转换为ArticleVO对象

/**
 * 将一个ArticleDO对象转换为ArticleVO对象
 *
 * @param articleDO
 * @return
 */
public static ArticleVO doToArticleVO(ArticleDO articleDO) {
    ArticleVO articleVO = new ArticleVO();
    BeanUtil.copyProperties(articleDO, articleVO);
    articleVO.setTags(articleDO.getTags().split(","));
    articleVO.setGmtCreate(BlogUtil.formatDate(articleDO.getGmtCreate(), DATE_PATTERN));
    articleVO.setGmtUpdate(BlogUtil.formatDate(articleDO.getGmtUpdate(), DATE_PATTERN));
    return articleVO;
}

• 编写Controller

@GetMapping("/getArticleById")
public ArticleVO getArticleById(Long id) {
    return articleService.findArticleById(id);
}

前端页面渲染

• 同样，在/src/request/api/url.js中添加根据id获取文章信息的url

const getArticleByIdUrl = baseUrl + 'api/comm/article/getArticleById';

• 在/src/request/api/article.js中封装请求方法

getArticleById(id, callback) {
  axios
    .get(url.getArticleByIdUrl, {
      params: {
        id: id
      }
    })
    .then(callback)
    .catch(err => {
      console.log("selArticleById Error");
    });
},

• 由于点击事件发生在articles.vue组件中，跳转的时候还要带上文章的id，所以将路由修改为：
  
  在跳转的过程中携带文章id：
  

• 在articleDetails.vue组件的created函数中，发送请求，成功后将markdown转为html，并将文章信息储存到变量article中

由于showdown只能将markdown转换为html没有代码高亮的功能，这里使用highlight.js进行代码高亮显示
highlight.js官网：https://highlightjs.org/
使用方法：https://www.npmjs.com/package/showdown-highlight

// 记得导入：import showdownHighlight from "showdown-highlight";
created() {
  this.$api.article.getArticleById(this.$route.params.articleId, resp => {
    this.article = resp.data;
    let converter = new showdown.Converter({
      // 使代码高亮显示
      extensions: [showdownHighlight]
    });
    // markdown 转 html
    this.content = converter.makeHtml(this.article.content);
  });
}

同时还需要在index.html中引入highlight.js

• 解决图片溢出问题：在index.html设置全局样式

img {
	max-width:100%;
}

• 效果如下：