添加商品评论

首先先建一张表，该表拥有四个字段，其中有三个整型字段: id, gid(商品id), uid(用户id)。有一个字符串变量: content，用来存储评论。

那么首先在前端写一个textarea，以及一个用来提交的button。将该textarea绑定一个变量并设定最大字符数量，将该button绑定一个提价按钮。

1
2
3

<textarea rows="10" v-autosize v-wordcount="100" v-model="comments"></textarea>
<br>
<Button color="blue" @click="submit_comment">评论</Button>

这里的Button标签使用的heyui，实际效果和button并无区别，只是美观。

textarea这里的v-wordcount=”100”，可以实现以下效果:

然后点击评论后判断一下字数，若是字数无误便提交至后台:

// 提交评论
      submit_comment(){
          // this.comments是评论变量
        if(this.comments.length > 100){
            // Message是heyui提供的功能，其效果等同于alert
          this.$Message('您的评论超出了长度限制');
          return false
        }
        else{
          var form_data = new FormData();
            // 将商品id添加到表单
          form_data.append('gid',this.good_msg.id);
            // 将用户id添加到表单
          form_data.append('uid',localStorage.getItem('uid'));
            // 将评论内容添加到表单
          form_data.append('content', this.comments);
            // 提交至后台
          this.axios({
            url: 'http://127.0.0.1:8000/comment/',
            method: 'post',
            data: form_data
          }).then(res=>{
            this.$Message(res.data.message);
            return false
          })
        }
      },

然后下面是后台的代码，这里我使用了反序列化。

# 评论
class CommentsView(APIView):

    def post(self, request):
        # 插入数据
        comment = CommentsSer(data=request.data)
        if comment.is_valid():
            # 提交
            comment.save()
            return Response({'code': 200, 'message': '评论成功'})
        else:
            return Response({'code': 200, 'message': '评论失败'})