添加評論功能

評論框：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>