文章目录
- 二十一、收藏按钮组件实现
- 一、前端处理
- 二、云函数定义
- 获取数据后前端处理
二十一、收藏按钮组件实现
一、前端处理
-
收藏图标点击事件内获取用户信息,及文章信息,传递到后端
由于多个界面中都会用到 userInfo 对象,可将 userInfo 对象放在一个全局的 mixin 中进行封存,保证每个界面或组件内部都可以进行使用
-
定义 commonMixin 文件
import { mapState } from "vuex";export default {install(Vue) {Vue.mixin({computed: {...mapState(["userInfo"]),},});}, };
-
main.js 文件中对 common Mixing 文件进行使用
// main.js import commonMixin from "./common/commonMixin.js"; Vue.use(commonMixin);
-
-
将用户 ID 及文件 ID 作为参数传递给云函数
-
创建全局检测用户是否登录函数,供多个组件进行使用,commonMixin 中完成
// commonMixin文件 checkedIsLogin () {return new Promise(resolve => {if (this.userInfo) {resolve()} else {uni.navigateTo({url: '/pages/userInfo/login/login'})}})} // saveLike组件 await this.checkedIsLogin();
-
将文章信息传递到 saveLike 组件内部使用
//listCard 组件 <SaveLikes :item="item"></SaveLikes> // saveLike组件props: {item: Object}
-
发送数据到云服务器
const res = await this.$http.upate_save_like({articleId: this.item._id,userId: this.userInfo._id, });
-
二、云函数定义
-
获取用户记录值
-
找到指定字段 article_likes_ids
-
通过 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
-
处理完成,将 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],},}; };
获取数据后前端处理
-
修改存储的用户信息 article_likes_ids 数组
// saveLikes组件处理 this.updateUserInfo({ ...this.userInfo, ...newUserInfo });
-
弹出提示信息
-
重新对保存状态 icon 图标赋值
使用计算属性处理用户收藏保存状态
computed: {isLike () {return this.userInfo && this.userInfo.article_likes_ids.includes(this.item._id)}}