后台管理界面搭建完成后做前台的展示就非常容易了，这里只记录一些注意点，具体参考demo

1.前台展示的很多接口不需要token验证

var jwt = require('express-jwt');
app.use(jwt({secret: 'jwt-secret', debug: true}).unless({
    path: ['/user/regiest', '/user/login', '/admin/login', '/works/list', '/works/detail']
}))
// /tourist 接口忽略401报错
app.use(function (err, req, res, next) {
    if (err.name === 'UnauthorizedError') {
        if (req.path.indexOf("/tourist") != -1 || req.path.indexOf("/static") != -1) {
            next()
        } else {
            res.status(401).send('invalid token...');
        }
    }
});

2.回复评论：将该回复加入数组，更新数组

// 回复评论
router.post('/reply', (req, res, next) => {

    let articleId = req.body.articleId
    let commentId = req.body.commentId

    var reply = new Reply({
        replyUser: req.body.replyUser,
        content: req.body.content,
        acceptUser: req.body.acceptUser,
        replyTimer: new Date()
    })

    Article.findOne({_id: articleId}).then((article) => {

         var arr = []
        for (let i = 0; i < article.commentList.length; i ++) {
            let comment = article.commentList[i]
            if (comment._id == commentId) {
                comment.replyArr.push(reply)
            }
            arr.push(comment)
        }

        Article.updateOne({_id: articleId}, {commentList: arr}).then((article) => {
            responseData.success = true
            responseData.message = '回复成功'
            res.json(responseData)
        }).catch((err) => {
            responseData.success = false
            responseData.message = err.message
            res.json(responseData)
        })

    }).catch((err) => {
        responseData.success = false
        responseData.message = err.message
        res.json(responseData)
    })
})

3.vue.js中$set与数组更新:$set()方法更新时，页面会全部更新一遍

data:{
    arr1 = ['a','b','c'];
    arr2 = [‘foo’,'bar','baz'];      
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

结果
arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo’, 'alpha', 'bar','baz'];  

项目上传  github 每次提交都是一个分支

线上地址