vue+mongoose+node.js項目總結第三篇_實現評論和回復功能

一、前言                                                                          

1、如下面演示所示：點擊評論的時候是評論該條動態，點擊評論的內容列表就是在回復發起評論的那個人。

二、主要知識                                                                   

1、功能實現分析

      第一步：用戶點擊“評論”，跳轉到一個單獨的評論頁面

      第二步：如果是點擊評論列表，跳轉到一個單獨的回復頁面（評論頁面和回復頁面是同一個）

      第三步：輸入評論或者回復的內容，點擊發送的時候請求后端接口評論成功

      第四步：評論成功后跳轉到瀏覽動態的頁面

2、前台實現

 Found.vue中：

（1）評論的時候將該條動態的id, 發布該條動態的用戶名傳進去， 回復的時候將該條動態的id、comment.from是評論的人、以及發布動態的用戶

 

 

（2）這里使用的是動態路由參數：https://www.jianshu.com/p/45ee7a6bdc0c

      //評論
      comment(id,writer){//moodlist._id, moodlist.writer.username
        this.$router.push({path:'/comment', query:{id, writer}})
      },

      //回復
      commentTo(id, to, writer){//id是動態id, to是被回復的人，writer是發表動態的人
        console.log(id, to, writer)
        this.$router.push({path:'/comment', query:{id, to, writer}})

      },

 

Comment.vue中：

 

（1）因為評論和回復組件是用的同一個，所以用是否傳入了“被回復人”來區分是回復還是評論

 

 

（2）data對象里面保存從Found.vue中傳過來的參數

data(){
           return{
                to:this.$route.query.to || '', //to是被回復的人
                id:this.$route.query.id || '', //動態的id
                 writer:this.$route.query.writer || '',
                content:''//評論或者回復的內容
            }
            

        },
computed:{
          ...mapState(['userInfo'])
        },

 

（3）comment方法請求后台評論

comment(){
                if(!this.content){
                    Toast('內容不能為空')
                    return
                }

                this.$axios.post('/api/comment/comment',{
                    writer: this.writer, //發動態的作者
                    from: this.userInfo.username, //回復人
                    to: this.to, //被回復的用戶
                    Mood:this.id, //動態的id
                    content: this.content //評論內容
                }).then((rs)=>{
                    console.log(111)

                    if(this.writer === this.userInfo.username && this.to === this.userInfo.username){
                        //返回到上一個路由
                        this.$router.go(-1)
                        Toast(rs.data.msg)
                        return
                    }

                    this.$router.go(-1)
                    Toast(rs.data.msg)


                })
            }

 

3、后台實現

（1）實現用戶評論和回復功能需要用到三個schema對象模型，首先是用戶User對象模型、PdMood動態schema模型、Comment評論schmema模型

User對象模型：

 

let express = require('express')

let mongoose = require('mongoose')

module.exports = new mongoose.Schema({
    username: String,
    password: String,

    nickName:{  
        type: String,
        default: '一只會說話的豬'
    },
    isAdmin:{ //標識是否為管理員
        type: Boolean,
        default: false
    },
    avater:{
        type: String,
        default:'http://localhost:4000/public/images/ava.jpg'

    },
    description:{
        type:String,
        default:'這個人很懶，什么都沒留下'
    },

    cartList:{
        type: Array
    }
})

 

PdMood動態對象模型：

 

/*
用戶動態的schemas
*/
var mongoose = require('mongoose')
module.exports = new mongoose.Schema({
    addTime:{
        type: Date,
        default: Date.now
    },
    content:String, //用戶發表內容
    writer:{
       type: mongoose.Schema.Types.ObjectId, //這里的類型是User里面的id
       ref:'User'//關聯User集合
    },
    comments:[{
        type:mongoose.Schema.Types.ObjectId,
        ref:'Comment'
    }],
    moodImg:{//用戶上傳的圖片數組
        type: Array,
        default:[]
    }
})

 

Comment評論模型：

let express = require('express')

let mongoose = require('mongoose')

module.exports = new mongoose.Schema({
    addTime:{
        type: Date,
        default: Date.now
    },
    content:{
        type:String
    },
    writer:{
        type:String
    },
    from:{
        type:String
    },
    to:{
        type:String
    },
    Mood:{
        type:mongoose.Schema.Types.ObjectId,
        ref:'PdMood'
    }
    
})

 

（2）前台點擊“發送”請求后台："/comment"接口

/*
處理用戶評論的模塊
*/
let User = require('../Models/User')
let PdMood = require('../Models/PdMood')
let Comment = require('../Models/Comment')
let express = require('express')
let router = express.Router()

router.post('/comment',(req,res)=>{
    let content = req.body.content //接受到評論內容
    let from = req.body.from //評論人
    let to = req.body.to ||'' //被評論
    let moodId = req.body.Mood //被評論動態的id
    //拿到這些參數之后新建一個評論對象存儲這些參數
    let writer = req.body.writer//發布動態的人
    console.log(content,from,to,moodId,writer)
    new Comment({
        content: content,
        from: from,
        to: to,
        Mood: moodId,
        writer: writer
    })
    .save()//保存
    .then((rs)=>{//保存成功之后去動態表里面查找動態
        PdMood.findOne({
            _id: moodId
        }).then((result)=>{
            let comments = result.comments //取到關於該動態的所有評論
            comments.push(rs._id) //在當前的動態數中將當前的評論加到該動態的評論數組中
            PdMood.update({//更新該動態
              _id: moodId
            },{
                comments:comments
            })
            .then(()=>{
                res.json({
                    code:0,
                    msg:'評論成功'
                })
            })
        })
    })
})

module.exports = router;