添加评论功能

评论框：src/views/articles/Content.vue

<!-- 评论框 -->
<div id="reply-box" class="reply-box form box-block">
  <div class="form-group comment-editor">
    <textarea v-if="auth" id="editor"></textarea>
    <textarea v-else disabled class="form-control" placeholder="需要登录后才能发表评论." style="height:172px"></textarea>
  </div>
  <div class="form-group reply-post-submit">
    <button id="reply-btn" :disabled="!auth" @click="comment" class="btn btn-primary">回复</button>
    <span class="help-inline">Ctrl+Enter</span>
  </div>
  <div v-show="commentHtml" id="preview-box" class="box preview markdown-body" v-html="commentHtml"></div>
</div>

未登录时，我们显示一个被禁用的评论框：

HTML 格式的评论被保存在 commentHtml，我们使用 v-html 指令实时输出它：

2、在 created 钩子后面添加 mounted 钩子，我们在这里创建一个 SimpleMDE 编辑器的实例：

src/views/articles/Content.vue

mounted() {
  // 已登录时，才开始创建
  if (this.auth) {
    // 自动高亮编辑器的内容
    window.hljs = hljs

    const simplemde = new SimpleMDE({
      element: document.querySelector('#editor'),
      placeholder: '请使用 Markdown 格式书写 ;-)，代码片段黏贴时请注意使用高亮语法。',
      spellChecker: false,
      autoDownloadFontAwesome: false,
      // 不显示工具栏
      toolbar: false,
      // 不显示状态栏
      status: false,
      renderingConfig: {
        codeSyntaxHighlighting: true
      }
    })

    // 内容改变监听
    simplemde.codemirror.on('change', () => {
      // 更新 commentMarkdown 为编辑器的内容
      this.commentMarkdown = simplemde.value()
      // 更新 commentHtml，我们先替换原内容中的 emoji 标识，然后使用 markdown 方法将内容转成 HTML
      this.commentHtml = simplemde.markdown(emoji.emojify(this.commentMarkdown, name => name))
    })

    // 按键松开监听
    simplemde.codemirror.on('keyup', (codemirror, event) => {
      // 使用 Ctrl+Enter 时提交评论
      if (event.ctrlKey && event.keyCode === 13) {
        this.comment()
      }
    })

    // 将编辑器添加到当前实例
    this.simplemde = simplemde
  }
},

 

3.点击发表按钮时候的comment事件在 methods 选项中添加评论方法 comment：

src/views/articles/Content.vue

comment() {
  // 编辑器的内容不为空时
  if (this.commentMarkdown && this.commentMarkdown.trim() !== '') {
    // 分发 comment 事件以提交评论
    this.$store.dispatch('comment', {
      comment: { content: this.commentMarkdown },
      articleId: this.articleId
    }).then((comments) => {
      // 在浏览器的控制台打印返回的评论列表
      console.log(comments)
    })

    // 清空编辑器
    this.simplemde.value('')
    // 使回复按钮获得焦点
    document.querySelector('#reply-btn').focus()
  }
},

 

打开 src/store/actions.js 文件，在代码的最后面，导出评论事件 comment：

src/store/actions.js

.
.
.
// 参数 articleId 是文章 ID；comment 是评论内容；commentId 是评论 ID
export const comment = ({ commit, state }, { articleId, comment, commentId }) => {
  // 仓库的文章
  let articles = state.articles
  // 评论列表
  let comments = []

  if (!Array.isArray(articles)) articles = []

  for (let article of articles) {
    // 找到对应文章时
    if (parseInt(article.articleId) === parseInt(articleId)) {
      // 更新评论列表
      comments = Array.isArray(article.comments) ? article.comments : comments

      if (comment) {
        // 获取用户传入的评论内容，设置用户 ID 的默认值为 1
        const { uid = 1, content } = comment
        const date = new Date()

        if (commentId === undefined) {
          const lastComment = comments[comments.length - 1]

          // 新建 commentId
          if (lastComment) {
            commentId = parseInt(lastComment.commentId) + 1
          } else {
            commentId = comments.length + 1
          }

          // 在评论列表中加入当前评论
          comments.push({
            uid,
            commentId,
            content,
            date
          })
        }
      }

      // 更新文章的评论列表
      article.comments = comments
      break
    }
  }

  // 提交 UPDATE_ARTICLES 以更新所有文章
  commit('UPDATE_ARTICLES', articles)
  // 返回评论列表
  return comments
}

添加评论列表

1、打开 src/views/articles/Content.vue 文件，在 data 中添加 comments：

src/views/articles/Content.vue

data() {
  return {
    title: '', // 文章标题
    content: '', // 文章内容
    date: '', // 文章创建时间
    uid: 1, // 用户 ID
    likeUsers: [], // 点赞用户列表
    likeClass: '', // 点赞样式
    showQrcode: false, // 是否显示打赏弹窗
    commentHtml: '', // 评论 HTML
    comments: [], // 评论列表
  }
},

2、修改 created 钩子（注释部分是涉及的修改）：

src/views/articles/Content.vue 在页面渲染的时候将评论渲染出来

created() {
  const articleId = this.$route.params.articleId
  const article = this.$store.getters.getArticleById(articleId)

  if (article) {
    // 获取文章的 comments
    let { uid, title, content, date, likeUsers, comments } = article

    this.uid = uid
    this.title = title
    this.content = SimpleMDE.prototype.markdown(emoji.emojify(content, name => name))
    this.date = date
    this.likeUsers = likeUsers || []
    this.likeClass = this.likeUsers.some(likeUser => likeUser.uid === 1) ? 'active' : ''
    // 渲染文章的 comments
    this.renderComments(comments)

    this.$nextTick(() => {
      this.$el.querySelectorAll('pre code').forEach((el) => {
        hljs.highlightBlock(el)
      })
    })
  }

  this.articleId = articleId
},

3、在 methods 选项中添加渲染评论方法 renderComments：

src/views/articles/Content.vue

renderComments(comments) {
  if (Array.isArray(comments)) {
    // 深拷贝 comments 以不影响其原值
    const newComments = comments.map(comment => ({ ...comment }))
    const user = this.user || {}

    for (let comment of newComments) {
      comment.uname = user.name
      comment.uavatar = user.avatar
      // 将评论内容从 Markdown 转成 HTML
      comment.content = SimpleMDE.prototype.markdown(emoji.emojify(comment.content, name => name))
    }

    // 更新实例的 comments
    this.comments = newComments
    // 将 Markdown 格式的评论添加到当前实例
    this.commentsMarkdown = comments
  }
},

注：深拷贝 comments 是为了不影响已保存的文章，其方法等价于：

const newComments = comments.map(function (comment) {
  return Object.assign({}, comment)
})

上面的方法只处理了对象的第一层数据，当对象能被 JSON 解析时，可以使用下面的方法进行完整的深拷贝：

JSON.parse(JSON.stringify(comments))

4、修改 comment 评论方法（注释部分是涉及的修改）：

src/views/articles/Content.vue

comment() {
  if (this.commentMarkdown && this.commentMarkdown.trim() !== '') {
    this.$store.dispatch('comment', {
      comment: { content: this.commentMarkdown },
      articleId: this.articleId
    }).then(this.renderComments) // 在 .then 的回调里，调用 this.renderComments 渲染评论

    this.simplemde.value('')
    document.querySelector('#reply-btn').focus()

    // 将最后的评论滚动到页面的顶部
    this.$nextTick(() => {
      const lastComment = document.querySelector('#reply-list li:last-child')
      if (lastComment) lastComment.scrollIntoView(true)
    })
  }
},

5、查找 <Modal ，在其后面添加『评论列表』：

src/views/articles/Content.vue

<Modal :show.sync="showQrcode" class="text-center">
  .
  .
  .
</Modal>

<!-- 评论列表 -->
<div class="replies panel panel-default list-panel replies-index">
  <div class="panel-heading">
    <div class="total">
      回复数量: <b>{{ comments.length }}</b>
    </div>
  </div>
  <div class="panel-body">
    <ul id="reply-list" class="list-group row">
      <li v-for="(comment, index) in comments" :key="comment.commentId" class="list-group-item media">
        <div class="avatar avatar-container pull-left">
          <router-link :to="`/${comment.uname}`">
            <img :src="comment.uavatar" class="media-object img-thumbnail avatar avatar-middle">
          </router-link>
        </div>
        <div class="infos">
          <div class="media-heading">
            <router-link :to="`/${comment.uname}`" class="remove-padding-left author rm-link-color">
              {{ comment.uname }}
            </router-link>
            <div class="meta">
              <a :id="`reply${index + 1}`" :href="`#reply${index + 1}`" class="anchor">#{{ index + 1 }}</a>
              <span> ⋅ </span>
              <abbr class="timeago">
                {{ comment.date | moment('from', { startOf: 'second' }) }}
              </abbr>
            </div>
          </div>

          <div class="preview media-body markdown-reply markdown-body" v-html="comment.content"></div>
        </div>
      </li>
    </ul>
    <div v-show="!comments.length" class="empty-block">
      暂无评论~~
    </div>
  </div>
</div>