添加点赞功能

Posted 2020-12-04 yangguoe

添加点赞事件

打开 src/store/actions.js 文件，在代码的最后面，导出点赞事件 like：

src/store/actions.js

 1 .
 2 .
 3 .
 4 // 参数 articleId 是文章 ID；isAdd 为 true 时点赞，为 false 时取消赞
 5 export const like = ({ commit, state }, { articleId, isAdd }) => {
 6   // 仓库的文章
 7   let articles = state.articles
 8   // 点赞用户列表
 9   let likeUsers = []
10   // 用户 ID，默认为 1
11   const uid = 1
12 
13   if (!Array.isArray(articles)) articles = []
14 
15   for (let article of articles) {
16     // 找到对应文章时
17     if (parseInt(article.articleId) === parseInt(articleId)) {
18       // 更新点赞用户列表
19       likeUsers = Array.isArray(article.likeUsers) ? article.likeUsers : likeUsers
20 
21       if (isAdd) {
22         // 是否已赞
23         const isAdded = likeUsers.some(likeUser => parseInt(likeUser.uid) === uid)
24 
25         if (!isAdded) {
26           // 在点赞用户列表中加入当前用户
27           likeUsers.push({ uid })
28         }
29       } else {
30         for (let likeUser of likeUsers) {
31           // 找到对应点赞用户时
32           if (parseInt(likeUser.uid) === uid) {
33             // 删除点赞用户
34             likeUsers.splice(likeUsers.indexOf(likeUser), 1)
35             break
36           }
37         }
38       }
39 
40       // 更新文章的点赞用户列表
41       article.likeUsers = likeUsers
42       break
43     }
44   }
45 
46   // 提交 UPDATE_ARTICLES 以更新所有文章
47   commit(‘UPDATE_ARTICLES‘, articles)
48   // 返回点赞用户列表
49   return likeUsers
50 }

点赞事件的最后面使用 return 返回了 likeUsers，我们稍后将从分发事件的回调函数里获取该值。

 

在页面上点赞

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

src/views/articles/Content.vue

data() {
  return {
    title: ‘‘, // 文章标题
    content: ‘‘, // 文章内容
    date: ‘‘, // 文章创建时间
    uid: 1, // 用户 ID
    likeUsers: [], // 点赞用户列表
    likeClass: ‘‘, // 点赞样式
  }
},

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

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

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

    this.uid = uid
    this.title = title
    this.content = SimpleMDE.prototype.markdown(emoji.emojify(content, name => name))
    this.date = date
    // 更新实例的 likeUsers
    this.likeUsers = likeUsers || []
    // 更新 likeClass，点赞用户列表包含当前用户时，赋值为 active，表示已赞
    this.likeClass = this.likeUsers.some(likeUser => likeUser.uid === 1) ? ‘active‘ : ‘‘

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

  this.articleId = articleId
},

3、在 methods 选项中，添加点赞方法 like：

src/views/articles/Content.vue

 1 like(e) {
 2   // 未登录时，提示登录
 3   if (!this.auth) {
 4     this.$swal({
 5       text: ‘需要登录以后才能执行此操作。‘,
 6       confirmButtonText: ‘前往登录‘
 7     }).then((res) => {
 8       if (res.value) {
 9         this.$router.push(‘/auth/login‘)
10       }
11     })
12   } else {
13     const target = e.currentTarget
14     // 点赞按钮是否含有 active 类，我们用它来判断是否已赞
15     const active = target.classList.contains(‘active‘)
16     const articleId = this.articleId
17 
18     if (active) {
19       // 清除已赞样式
20       this.likeClass = ‘‘
21       // 分发 like 事件取消赞，更新实例的 likeUsers 为返回的值
22       this.$store.dispatch(‘like‘, { articleId }).then((likeUsers) => {
23         this.likeUsers = likeUsers
24       })
25     } else {
26       // 添加已赞样式
27       this.likeClass = ‘active animated rubberBand‘
28       // 分发 like 事件，传入 isAdd 参数点赞，更新实例的 likeUsers 为返回的值
29       this.$store.dispatch(‘like‘, { articleId, isAdd: true }).then((likeUsers) => {
30         this.likeUsers = likeUsers
31       })
32     }
33   }
34 },

调用 store.dispatch 默认返回一个 Promise 对象，表示一个异步操作的最终状态及其返回的值，因此我们可以在 .then 的回调函数里获取 likeUsers。

4、查找 <div class="panel article-body content-body">，在其后面添加『点赞』：

src/views/articles/Content.vue

<div class="panel article-body content-body">
  .
  .
  .
</div>

<!-- 点赞 -->
<div class="votes-container panel panel-default padding-md">
  <div class="panel-body vote-box text-center">
    <div class="btn-group">
      <a @click="like" href="javascript:;" class="vote btn btn-primary popover-with-html" :class="likeClass">
        <i class="fa fa-thumbs-up"></i> {{ likeClass ? ‘已赞‘ : ‘点赞‘ }}
      </a>
    </div>
    <div class="voted-users">
      <div class="user-lists">
        <span v-for="likeUser in likeUsers">
          <!-- 点赞用户是当前用户时，加上类 animated 和 swing 以显示一个特别的动画  -->
          <img :src="user && user.avatar" class="img-thumbnail avatar avatar-middle" :class="{ ‘animated swing‘ : likeUser.uid === 1 }">
        </span>
      </div>
      <div v-if="!likeUsers.length" class="vote-hint">成为第一个点赞的人吧 ?</div>
    </div>
  </div>
</div>

在模板中，我们根据 likeClass 是否包含 ‘active‘，来判断显示 已赞 或者 点赞。