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)}}