项目第一天评论功能

1.在公共文件中新建一个comment.vue组件
2.结构和样式
结构在组件中的field中有
3.在JS中定义一个父传子的组件方法，以便接收父组件传过来的ID

props: ['id']

4.在相应的页面组件引入和挖坑

<comment :id="$route.params.id"></comment>  //挖坑

5.在文本输入框里绑定一个双向数据，然后在data中定义一个空的数据，以便获取文本输入框的值

6.发送请求

initCommentList () {
      // 1.2 定义接口，发送获取评论的请求
      getNewsComment(this.id, this.pageIndex)
        .then(res => {
          console.log(res)
          // 1.3 定义变量接收服务器返回的评论数据
          // this.commentList = res.message
          // 1.5 要利用...展开运算符将两个数组合并
          let tempArr = this.commentList
          this.commentList = [...tempArr, ...res.message]
          // 1.6 判断是否能够加载更多
          if (res.message.length < 10) {
            this.hasMore = false
          }
        })
    }

二。发表评论
1.给发表按钮添加一个@click

2. 处理发请求的content参数， 利用工具qs来处理参数，先下载 npm i qs -D, qs主要有两个方法，一个stringify()转换成查询字符串, 一个parse()转换成json对象

 let content = {content: this.inputVal}
 let contentStr = qs.stringify(content)

3.判断如果文本输入框为空就给个提示框

 if (!this.inputVal.trim()) {
        Toast('评论内容不能为空，请输入！')
      }

4.否则就发送请求

else {
        postComments(this.id, contentStr)
          .then(res => {
            Toast({
              message: '评论成功',
              iconClass: 'icon icon-success'
            })
            // 1.11 属性评论列表
            this.inputVal = ''
            // 1.12 请求之前，先清空，不然数据会叠加渲染到页面上
            this.commentList = []
            this.pageIndex = 1
            this.hasMore = true
            this.initCommentList()
          })
      }