vue+vuex+node+express+mysql实现收藏

已于 2022-04-04 09:51:08 修改
阅读量2.1k 收藏 14
点赞数
CC 4.0 BY-SA版权
文章标签： node.js vue.js less
于 2022-04-04 09:23:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46065861/article/details/123948655

首先实现进入详情页看是否已收藏
点击实现取消和确定收藏
查看我的收藏
总结
效果展示
在这里插入图片描述

业务逻辑

  • 首先实现进入详情页看是否已收藏
    在这里插入图片描述

步骤

  • 前端进入详情页，发送用户id和商品id

在这里插入图片描述

  • 后端查询对应用户和对应商品，返回数据给前端
    在这里插入图片描述
  • 前端拿到返回值判断是否收藏
  • 点击实现取消和确定收藏
    在这里插入图片描述

步骤

  • 1.前端发送用户id和商品id给后端
    在这里插入图片描述

  • 2.后端进行删除或者插入表操作
    在这里插入图片描述
    在这里插入图片描述

  • 3.前端拿到后端的值进行更改样式
    在这里插入图片描述

查看我的收藏

在这里插入图片描述

步骤
1.前端发用户id
在这里插入图片描述
2.后端返回商品id
在这里插入图片描述
3.用户发送商品id
在这里插入图片描述
4.前端把返回的值进行处理展示

总结

感觉交互挺有意思的，经过这几次，感觉更好的把握了前后端的交互了，继续加油

最love酸奶
关注
Vue+Spring Boot实现商品收藏功能
linkLiMMO的博客
04-19 7449
SpringBoot+Vue前后端分离实现收藏功能
基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城
05-04
在本项目中，"基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城"，我们看到一个完整的前后端分离的电商应用开发框架。这个框架利用了现代Web技术栈，旨在创建一个高性能、响应式的移动端商城。下面将...
laravel5.3 vue 实现收藏夹功能
weixin_33918114的博客
01-19 311
laravel5.3 vue 实现收藏夹功能 ​ 本篇是接着laravel中使用WangEditor及多图上传(下篇) 所以我们这里不演示怎么新建项目了。​ 1. laravel项目安装 ​下载之前的项目，完成安装。​ 1.0 写在之前的(before) ​ 为了避免后面踩到vue版本的坑，请务必阅读此部分​ 1.0.1 修改packag...
vue 实现收藏功能
2301_76343523的博客
12-16 1440
（1）listQuery里接收后端参数，为了获取商品列表数据。
nodejs 简单教程收藏
weixin_34107955的博客
10-13 273
2019独角兽企业重金招聘Python工程师标准>>> ...
node.js - 收藏集 - 掘金
weixin_33830216的博客
05-25 587
如何部署 Node.js 应用 - 后端 - 掘金当你熟悉 Node.js 之后很可能会自己写些小东西放在 VPS 上跑，比如说一个个人的 API 服务，或者是你的网站。这篇文章分享的内容不管你的 app 大小，都相对适用，因为我们的原则是「run it forever and deploy it smart... Node.js 开启 ...
基于Vue2.0+Vuex+Axios+Node.js+Express+MySQL实现京东移动web商城.zip
最新发布
11-26
基于Vue2.0+Vuex+Axios+Node.js+Express+MySQL实现京东移动web商城是一个复杂的前后端分离项目。以下是实现该项目的概要步骤： 1. 需求分析 用户注册与登录 商品展示 商品分类与搜索 购物车管理 订单提交与支付 用户...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
Node.js+Express+Mysql+Vue+ElementUI 实现登录注册列表 增删改查 全栈开发一个自己的
03-29
有梦必达初衷是一个帮助迷茫的、还没有梦想的、还在寻找梦想的、有梦想却还不知道怎么实现的童鞋更好的寻找或实现梦想的微信小程序。 有梦必达的初始设计功能有：登录、注册、找回密码、梦想列表、梦想详情、推荐...
基于vue全家桶+node.js+express+mysql实现的商城网站
04-27
连接Mysql代码在server/conf/conf.js配置信息改为自己的。表创建在server/malldata.sql文件内直接复制插入。...Mysql实现数据存储 功能 登录注册 商品详情 购物车管理 地址管理 订单管理 模拟支付
小程序点赞收藏功能的实现代码示例
10-18
主要介绍了小程序点赞收藏功能的实现代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中实现添加收藏的功能，以及利用vue-resource发送请求
qq_41681425的博客
10-18 7977
1.添加收藏功能     创建一张表，保存歌手id，用户id，利用外键将歌手表与用户表关联起来。如果添加收藏之后，为该用户添加一条数据，取消收藏后，将该条数据删除。     当用户登录之后才能显示歌手列表中该用户已经收藏过的歌手，然后将这些收藏的信息保存在"我的收藏"中。     同时要考虑，歌手列表在用户未登录之前，是为收藏状态，当用户登录成功之后要进行判断，将已经收藏的歌手信息改变未已收...
vuex 收藏一个循序渐进，易懂易行的博客。
weixin_30800987的博客
03-21 121
https://www.jianshu.com/p/133d329c3702 记录-- 转载于:https://www.cnblogs.com/lml2017/p/10572306.html
小百科项目---vue实现前端收藏功能代码（简洁易懂）
elephant_my的博客
08-12 6699
收藏功能的实现需求实现谨记: 需求 实现 <!--被收藏的次数--> <li class="like"> <span class="iconfont">&#xe663;</span> {{ blogData.f_collection_sum }} </li> <!--是否被收藏的样式--> <li class="like" v-model="key"> <span class="ic
vue3添加收藏网站页面
lulei5153的博客
05-24 592
结构与样式 脚本
Vue收藏/取消收藏
m0_58158705的博客
12-01 873
Vue点击收藏/取消收藏
vuex 购物车 收藏实现
阿豪
03-14 178
原文链接: vuex 购物车 收藏实现 上一篇: ...
Vue之点击收藏与取消收藏
weixin_52418790的博客
01-23 4998
思路 通过条件运算符，给定图片一个属性，点击改变属性值 未点击时，图标灰，默认值false 点击时，图标亮，改变为true 再次点击时，图标灰，改为false 示例 <div> <img :src="isActive===true?'static/image/c_icon1.png':'static/image/c_icon.png'" @click="gostore"> </div> methods: { gostore(){ //收藏 c
Mysql商城收藏功能_Mysql常用命令收藏
weixin_42467374的博客
02-02 283
1、mysql服务的启动和停止(Windows下面)net stop mysqlnet start mysql2、显示当前数据库服务器中的数据库列表：mysql> SHOW DATABASES;注意：mysql库里面有MYSQL的系统信息，我们改密码和新增用户，实际上就是用这个库进行操作。3、显示数据库中的数据表：mysql> USE 库名；mysql> SHOW TABLES;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值