Vue.js开发个人博客(4)----文章详情页编写

源码地址：https://github.com/BadWaka/blog-waka-by-vue

读取服务器上的一篇Markdown格式的文章，并展示。
仿自定义Markdown样式。

上图

难点

1. node.js读取文件
2. Markdown转换至HTML，不同
3. 如何自定义好看的Markdown样式
4. 如何让Markdown代码高亮

开发步骤

1. 设计mock数据

在根目录放置一篇Markdown文章

在build/dev-server.js中编写文章详情接口，这里是假数据，所以接口名就直接写死了

// 因为要读取.md文件，所以引入文件读取模块fs
var fs = require('fs');

// 请求具体的某一篇文章
apiRoutes.get('/article/1', function (req, res) {
  // 文件路径
  var mdPath = path.join(__dirname, '../article1.md');
  fs.readFile(mdPath, {
    encoding: 'utf-8'
  }, function (err, data) {
    if (err) {
      console.log(err);
      return;
    }
    var mdStr = data;
    // console.log('mdStr = ' + mdStr);
    res.json({
      errorCode: 0,
      data: mdStr
    });
  });
});

2. 编写文章详情界面 ArticleDetail.vue

ArticleDetail.vue

代码如下：

// ArticleDetail.vue