美文网首页
05-个人博客笔记-博客前台展示

05-个人博客笔记-博客前台展示

作者: Darren151666 | 来源:发表于2018-07-09 15:28 被阅读12次

后台管理界面搭建完成后做前台的展示就非常容易了,这里只记录一些注意点,具体参考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 每次提交都是一个分支

线上地址

相关文章

  • 05-个人博客笔记-博客前台展示

    后台管理界面搭建完成后做前台的展示就非常容易了,这里只记录一些注意点,具体参考demo 1.前台展示的很多接口不需...

  • beego框架 golang web项目-个人博客系统

    beego框架 golang web项目-个人博客系统 beego个人博客系统功能介绍 首页 分页展示博客 博客详...

  • 个人博客搭建

    记录一下个人博客的搭建: 1.核心思想1.1博客分为前端展示页面以及后端博客管理系统前端主要负责展示博客,后端负责...

  • 博客前台模板

    从 https://github.com/PomeloFoundation/YuukoBlog 这个博客上扒下来的...

  • 这博客要写些什么?

    我的个人博客地址:http://zhangbohun.github.io/个人博客是一个人的展示厅。 这博客不写什...

  • Hexo+github博客搭建记录

    为何搭建个人博客 一直想搭建自己的个人博客,写博客可以记录我的学习笔记、总结经验、分享技术等等。本来csdn、博客...

  • React+Egg.js实现全栈个人博客

    React+Egg.js实现全栈个人博客 这是一个个人博客软件,前台和后台使用的都是React,后端使用egg.j...

  • 新文章和个人博客地址

    上一篇云服务器搭建了云笔记和个人博客,因此新的笔记发在个人博客:http://180.76.138.249:809...

  • github上创建个人博客

    玩github标准打卡动作就是创建个人博客,今天我们就来创建个博客。偶尔在博客上更新下文章,将来遇到给别人展示自己...

  • 全栈开发—使用Nginx配置HTTPS和反向代理

    个人博客开发系列文章: 博客前端展示总结:https://www.jianshu.com/p/1348bcd1e7...

网友评论

      本文标题:05-个人博客笔记-博客前台展示

      本文链接:https://www.haomeiwen.com/subject/pkfkrftx.html