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

devtools/2024/11/14 21:51:50/

文章目录

    • 二十一、收藏按钮组件实现
      • 一、前端处理
      • 二、云函数定义
      • 获取数据后前端处理

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

一、前端处理

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

http://www.ppmy.cn/devtools/134003.html

相关文章

机器学习在网络安全中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 机器学习在网络安全中的应用 机器学习在网络安全中的应用 机器学习在网络安全中的应用 引言 机器学习概述 定义与原理 发展历程 …

【论文阅读】Virtual Compiler Is All You Need For Assembly Code Search

阅读笔记:Virtual Compiler Is All You Need For Assembly Code Search 1. 研究背景 逆向工程:逆向工程需要在庞大的二进制文件中快速定位特定功能(例如恶意行为)。传统方法依赖于经验和启发式算法,效率低下。汇编代码搜索:通过自然语言搜索汇编代码功能,能够更高效地处…

Java中的泛型

什么是泛型&#xff1f; 限制容器存储的元素类型&#xff0c;用于集合、接口、实现类中 说明&#xff1a;泛型参数在指明时&#xff0c;不可以使用基本数据类型&#xff01;不过可以使用包装类替换 案例1&#xff1a;ArrayList ArrayList<Integer> list new ArrayList…

LLMs之VDB:Elasticsearch的简介、安装和使用方法、案例应用之详细攻略

LLMs之VDB&#xff1a;Elasticsearch的简介、安装和使用方法、案例应用之详细攻略 目录 Elasticsearch的简介 1、特点 Elasticsearch的安装和使用方法 1、安装 T1、云服务—使用 Elastic Cloud T2、本地安装、运行和管理Elasticsearch(仅限开发和测试) 用start-local脚本…

如何制作代购系统的 物流管理模块

在代购系统中&#xff0c;物流管理模块是至关重要的组成部分&#xff0c;它涉及到商品配送的各个环节&#xff0c;确保商品能够高效、准确地送达消费者手中。本文将详细介绍如何制作一个代购系统的物流管理模块&#xff0c;包括后端服务设计和前端界面实现&#xff0c;以及如何…

【eNSP】企业网络架构实验——vlan间的路由通信(三)

VLAN间的路由是指不同VLAN之间的通信&#xff0c;通常VLAN是用来分割网络流量和提高网络安全性的。 一、VLAN 1. 什么是VLAN&#xff1f; VLAN&#xff0c;全称是虚拟局域网&#xff08;Virtual Local Area Network&#xff09;&#xff0c;是一种将物理局域网&#xff08;LA…

SpringBoot赋能的共享汽车业务管理系统

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

【日常记录-Java】代码配置Logback

1. 简介 在Logback中&#xff0c;推荐使用配置文件&#xff08;如logback.xml或logback-spring.xml&#xff09;来设置日志记录的行为。但在实际应用中&#xff0c;会有动态配置logback的需求。此时可通过编程的方式直接操作LoggerContext以及相关的Logger、Appender、Encoder等…