uni-app收藏按钮组件实现⑬

二十一、收藏按钮组件实现

一、前端处理

1. 收藏图标点击事件内获取用户信息，及文章信息，传递到后端

   由于多个界面中都会用到 userInfo 对象，可将 userInfo 对象放在一个全局的 mixin 中进行封存，保证每个界面或组件内部都可以进行使用

   1. 定义 commonMixin 文件

      import { mapState } from "vuex";
      
      export default {
        install(Vue) {
          Vue.mixin({
            computed: {
              ...mapState(["userInfo"]),
            },
          });
        },
      };
      

   2. main.js 文件中对 common Mixing 文件进行使用

      // main.js
      import commonMixin from "./common/commonMixin.js";
      Vue.use(commonMixin);
      

2. 将用户 ID 及文件 ID 作为参数传递给云函数

   1. 创建全局检测用户是否登录函数，供多个组件进行使用，commonMixin 中完成

      // commonMixin文件
      checkedIsLogin () {
                return new Promise(resolve => {
                  if (this.userInfo) {
                    resolve()
                  } else {
                    uni.navigateTo({
                      url: '/pages/userInfo/login/login'
                    })
                  }
                })
              }
      // saveLike组件
      await this.checkedIsLogin();
      

   2. 将文章信息传递到 saveLike 组件内部使用

      //listCard 组件
      <SaveLikes :item="item"></SaveLikes>
      // saveLike组件
       props: {
          item: Object
        }
      

   3. 发送数据到云服务器

      const res = await this.$http.upate_save_like({
        articleId: this.item._id,
        userId: this.userInfo._id,
      });
      

二、云函数定义

1. 获取用户记录值

2. 找到指定字段 article_likes_ids

3. 通过 db.command 更新指令修改 article_likes_ids

   参考地址：https://uniapp.dcloud.io/uniCloud/cf-database?id=query-command

   • 当文章 id 存在，进行删除操作，使用 pull 方法 参考地址：https://uniapp.dcloud.io/uniCloud/cf-database?id=pull
   • 当文章 id 不存在，进行添加操作，使用 addToSet 方法 参考地址:https://uniapp.dcloud.io/uniCloud/cf-database?id=addtoset

4. 处理完成，将 article_likes_ids 进行修改之后，重新存储

   "use strict";
   // 定义数据库引用
   const db = uniCloud.database();
   // 定义修改指令
   const dbCmd = db.command;
   
   exports.main = async (event, context) => {
     const { userId, articleId } = event;
     // 获取用户Ids集合
     const userInfo = await db.collection("user").doc(userId).get();
   
     const articleIds = userInfo.data[0].article_likes_ids;
     let returnMsg = null;
   
     let articleArr = null;
     // 如果包含删除收藏
     if (articleIds.includes(articleId)) {
       articleArr = dbCmd.pull(articleId);
       returnMsg = "取消收藏成功";
     } else {
       articleArr = dbCmd.addToSet(articleId);
       returnMsg = "添加收藏成功";
     }
   
     await db.collection("user").doc(userId).update({
       article_likes_ids: articleArr,
     });
   
     const updateUserInfo = await db.collection("user").doc(userId).get();
   
     //返回数据给客户端
     return {
       code: 0,
       data: {
         msg: returnMsg,
         newUserInfo: updateUserInfo.data[0],
       },
     };
   };
   

获取数据后前端处理

1. 修改存储的用户信息 article_likes_ids 数组

   // saveLikes组件处理
   this.updateUserInfo({ ...this.userInfo, ...newUserInfo });
   

2. 弹出提示信息

3. 重新对保存状态 icon 图标赋值

   使用计算属性处理用户收藏保存状态

    computed: {
       isLike () {
         return this.userInfo && this.userInfo.article_likes_ids.includes(this.item._id)
       }
     }