前后端分离下的购物车实现

总结一下前后端分离情况下购物车的实现,首先,购物车需要进行频繁的写操作,这种情况明显不是mysql的应用场景,所以采取了redis来进行存储,比较redis的几种数据类型,个人决定采用hash类型来进行购物车的存储,hash类型类似
<key,map<key,value>>这种形式,所以很适合用来存储购物车信息,例如在选择加入购物车时:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以redis存储的结构为:
<thisuserid,<productId,productNumber>>

点击加入购物车:
在这里插入图片描述

结果:

在这里插入图片描述购物车的展示:
在这里插入图片描述点击购物车:
在这里插入图片描述在这里插入图片描述展示购物车代码如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ProductCarVO是我自定义的购物车传输实体类:
在这里插入图片描述购物车的商品数量的增加与减少我就不展示controller了,只展示关键代码,如下:
在这里插入图片描述
在这里插入图片描述购物车的功能基本完成,有不明白的可以留言问我,创作不易,有用点赞,下一步是支付宝的支付接口整合

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【资源介绍】 基于nodejs+express+vue+mysql的前后端分离在线订餐系统源码+sql数据库.zip 该项目是个人毕设项目,答辩评审分达到95分,代码都经过调试测试,确保可以运行!欢迎下载使用,可用于小白学习、进阶。 该资源主要针对计算机、通信、自动化等相关专业的学生、老师或从业者下载使用,亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值!基础能力强的可以在此基础上修改调整,以实现不同的功能。 基于Vue+Vuex+Axios+NodeJs+Express+MySQL的前后端分离在线订餐系统, 原本使用的是javaweb技术进行后端开发,后经过学习用nodejs重新写了后端接口。 ## 前端架构 - 页面结构(H5,CSS3,原生JS) - 框架(基于Vue脚手架:vue-cli)进行搭建 - 数据请求处理框架(Axios) - Vue-Router进行路由处理 - Vuex进行公共数据与方法的存储 ## 服务端架构 - 选用NodeJs进行后台开发 - Express中间件进行服务的配置,路由、请求的处理 - 官网 http://www.expressjs.com.cn/ - Mysql中间件处理与数据库的"通信" - Body-Parser中间件进行前端请求参数的获取 - 使用jwt对token进行加密 - multer中间件用于文件的上传与存储 ## 数据库选取 - 采用MySQL进行相关数据库的设计与实现 ## 目前项目已实现功能 1. 首页数据的展示 2. 购物车 3. 注册 4. 登录 5. 商品详情页 6. 商品搜索 7. 用户订单管理 8. 商家详情页 9. 商家搜索页 10. 商家发布,查询,修改,删除菜品 11. 商家管理订单 12. 管理员管理商家与用户 ## 安装 已安装MySQL数据库,然后导入mysql文件夹下的mysql.sql文件 然后通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/)) 打开Vue2文件夹,执行命令 ``` npm install 或 cnpm install npm run serve ``` 最后打开nodejs文件夹,执行命令 ``` cd .\myapp\ npm install 或 cnpm install nodemon index.js
实现一个基于Spring和Vue的前后端分离商城项目,可以分为以下几个步骤: 1. 搭建后端环境 首先需要搭建好Spring Boot项目的基本环境,包括配置文件、依赖库等。可以使用Spring Initializr来生成一个基本的项目骨架。然后根据需求,添加相关的依赖库和配置文件,例如MyBatis、Spring Security、JWT等。 2. 实现后端功能 根据商城项目的需求,实现后端的各种功能,包括用户注册登录、商品管理、购物车、订单等。可以使用MyBatis来操作数据库,Spring Security来实现登录验证和权限控制,JWT来生成和验证Token等。 3. 搭建前端环境 使用Vue CLI来搭建一个基本的Vue项目骨架,然后根据需求添加相关的依赖库和配置文件,例如Vue Router、Axios等。 4. 实现前端功能 根据商城项目的需求,实现前端的各种功能,包括用户注册登录、商品展示、购物车、订单等。可以使用Vue Router来实现页面路由,Axios来发起和处理HTTP请求等。 5. 前后端联调 在开发过程中,需要将前后端进行联调,确保数据的正常传递和处理。可以使用Chrome浏览器的开发者工具来进行调试。 6. 部署上线 在开发完成后,需要将项目部署到服务器上,可以使用Docker容器化部署,也可以手动部署。需要确保服务器环境和依赖库的配置正确,并保证项目的安全性和稳定性。 总之,实现一个前后端分离商城项目需要掌握Spring和Vue的相关知识,并且熟悉后端和前端的开发流程和技术栈。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值