vue之写发表评论思路

后端接口

var express = require('express');
const sql = require('../sql')
const Comment = require('../sql/collection/comments')
const User = require('../sql/collection/users')
const uuid = require('node-uuid');
const utils = require('./../utils');
var router = express.Router();

// 获取评论信息列表
router.get('/', function(req, res, next) {
  let { proid } = req.query;
  let arr = []
  let comment = []
  // 内部包含用户的信息，通过用户id 获取到所有的用户名，对应的相关评论，拼接数据
  sql.find(Comment, { proid }, { _id: 0 }).then(data => {
    comment = data
    var promises = data.map((item, index) => {
        return sql.find(User, { userid: item.userid }, { _id: 0 })
    })
    return Promise.all(promises)
  }).then(list => {
    console.log('comment', comment)
    console.log('list', list)
    list.map((item,index) => {
      arr.push({
        commentid: comment[index].commentid,
        username: item[0].username,
        text: comment[index].text,
        rating: comment[index].rating,
        file: comment[index].file,
        flag: comment[index].flag,
        time: comment[index].createtime
      })
    })
    res.send({
      code: '200',
      data: arr
    })
  })
});

router.post('/add', (req, res, next) => {
  var now = new Date();
       var year = now.getFullYear(); //得到年份
       var month = now.getMonth();//得到月份
       var date = now.getDate();//得到日期
       month = month + 1;
       if (month < 10) month = "0" + month;
       if (date < 10) date = "0" + date;
       var time = "";
       time = year + "-" + month + "-" + date;
  let { userid, rating } = req.body;
  rating = rating * 1 || 5
  let list = JSON.parse(req.body.info)
  for (let item of list) {
    item.userid = userid,
    item.commentid = 'comment_' + uuid.v1()
    item.rating = rating
    item.createtime = time
  }
  console.log(list)
    sql.insert(Comment, ...list).then(() => {
      res.send(utils.commentsuccess)
    })
})
// router.post('/add',(req, res, next) => {
//   let { userid, rating } = req.body
//   rating = rating *1 || 5
//   let list = JSON.parse(req.query.)
// })
module.exports = router;

sql/collection:

const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

// 设计用户表的集合
const commentSchema = new Schema({ // 设计用户集合的字段以及数据类型
  commentid: {type: String },
  userid: { type: String },
  proid: { type: String },
  text: { type: String }, //评论内容
  rating: { type: Number }, //评分
  username: {type: String},
  num: { type: Number },
  price: { type: Number },
  proimg: {type: String},
  createtime:{ type: String}, // 发布时间
  proname: {type: String},
  createtime:{ type: String}, // 发布时间
  file: {type: String},// 头像信息
  flag: {type: String}//好、中、差评
})

module.exports = mongoose.model('Comment', commentSchema);

前端页面：

<template>
  <div class="box">
    <Header>
      <div slot="center">我的评价</div>
      <div slot="Icon"></div>
      <div slot="release" class="release" @click="release(scorelist)">发布</div>
    </Header>
    <div class="content">
      <ul>
        <li v-for="item of scorelist[0]" :key="item.proid">
          <div class="shopimg">
            <img :src="item.proimg" alt="">
            <p>{{ item.proname }}</p>
          </div>
          <div class="comment">
            <p>整体评价
              <i class="iconfont icon-haoping"  :class="item.flag === 3 ? 'active' : ' '" @click="score(item,3)"></i><span>好评</span>
              <i class="iconfont icon-zhongping" :class="item.flag === 2 ? 'active' : ' '" @click="score(item,2)"></i><span>中评</span>
              <i class="iconfont icon-chaping" :class="item.flag === 1 ? 'active' : ' '"  @click="score(item,1)"></i><span>差评</span>
              <input type="hidden" v-model="hidden" >
            </p>
          </div>
          <div class="evacontent">
            <van-cell-group :key="item.proid">
              <van-field
                v-model="item.text"
                rows="2"
                autosize
                type="textarea"
                maxlength="100"
                placeholder="你觉得产品好用吗？"
                show-word-limit
                :name="item.proid"
              />
            </van-cell-group>
          </div>
          <div class="upload">
            <van-uploader :after-read="afterRead" upload-text="添加照片"/>
          </div>
          <div class="anonymous">
            <div class="checkbox">
              <van-checkbox v-model="checked" checked-color="#ff9000">匿名</van-checkbox>
            </div>
            <p>你写的评价将会以匿名的方式展现</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Header from '@/components/Header'
import Vue from 'vue'
import { Field, Uploader, Checkbox, CheckboxGroup, Rate, Toast, CellGroup } from 'vant'
Vue.use(Field)
Vue.use(CellGroup)
Vue.use(Uploader)
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Rate)
Vue.use(Toast)
export default {
  data () {
    return {
      name: '', // 每个文本域的单独的id
      checked: true,
      scorelist: [],
      proid: '',
      message: '',
      hidden: 1
    }
  },
  components: {
    Header
  },
  created () {
    axios.get('/order/evaluate?orderid=' + this.$route.query.orderid).then(res => {
      let arr = []
      res.data.data.map(item => {
        arr.push(item.list)
      })
      this.scorelist = arr
      console.log(this.scorelist)
      for (let it of this.scorelist[0]) {
        console.log(it)
        it.text = ''
        it.flag = 3
        it.username = localStorage.getItem('username')
      }
    })
    axios.get('headimg/getimg?userid=' + localStorage.getItem('userid')).then(res => {
      let headimg = res.data.data[0].file
      for (let it of this.scorelist[0]) {
        it.file = headimg
      }
    })
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    score (obj, index) {
      obj.flag = index
      console.log(this.scorelist[0])
      console.log(obj)
      this.hidden = Math.random()
    },
    release (scorelist) {
      // console.log(scorelist)
      // let note = []
      scorelist[0].map(item => {
        if (item.text === '') {
          Toast('请填写内容')
        } else {
          console.log(scorelist[0])
          // note.push(item.text)
          let userid = localStorage.getItem('userid')
          let orderid = this.$route.query.orderid
          // console.log(userid)
          // console.log(url)
          axios.post('/comment/add', {
            userid,
            info: JSON.stringify(scorelist[0])
          }).then(res => {
            axios.get('order/updatestatus?orderid=' + orderid + '&status=' + 3).then(res => {
              this.$router.back()
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.box{
  @include rect(100%,100%);
  .release{
    color:#d79968;margin-right:2px;font-weight:bold;@include rect(100%,100%);
  }
  .content{
    @include rect(100%,100%);
    ul{
      @include rect(100%,100%);margin-bottom:.1rem;
      li{
        @include rect(100%,auto);@include background-color(#fff);@include flexbox();@include flex-direction(column);margin:.1rem 0 ;
        .shopimg{@include flexbox();@include flex-direction();@include align-items();
        padding:0 .1rem;
          img{@include display(block); @include rect(.8rem,.8rem);margin:.05rem .1rem 0 0;border:1px solid #dcdcdc;}
          p{color:#626262;}
        }
        .comment{
           @include rect(100%,.5rem);margin-top:.1rem;@include flexbox();@include align-items();border-bottom:1px solid #dcdcdc;padding:0 .1rem;
          p{
            font-size:.18rem;color:#000;
            i{font-size:.25rem;margin:0 .1rem 0 .25rem;display: inline-block;
            @include color(#bfbfbf);}
          .active{@include color(#f23030);}
            span{font:.12rem/.5rem '';}
          }
        }
        .evacontent{
        margin-top:.1rem; @include rect(100%,auto);
        }
        .upload{
          padding:0 .1rem; @include rect(100%,auto);
        }
        .anonymous{
          border-top:1px solid #dcdcdc; padding:0 .1rem;@include rect(100%,.5rem);
          @include flexbox();justify-content: space-between;@include align-items();
            .checkbox{}
            p{font:.14rem/.5rem '';@include color(#bfbfbf);}
        }
      }
    }
  }
}
</style>