【畅购商城】购物车模块之查看购物车
目录
分析
接口
后端实现
前端实现:显示页面
前端实现:显示购物车信息
分析
- 用户如果没有登录,购物车存放在浏览器端的localStorage处,且以数组的方式进行存储。
- 用户如果登录了,购物车存放在redis中,以Cart对象字符串方式存储。
- 问题:前后端数据不一致,无法使用一个也flow1.vue进行数据展示
解决方案:将后端cart数据进行简化,Cart对象-->Map(data)-->List(values)
结论:前端提供给页面统一数组,页面进行数据展示即可。
接口
GET http://localhost:10010/cart-service/carts

{"code": 1,"message": "查询成功","data": {"data": {"2600242": {"skuid": 2600242,"spuid": 2,"price": 84900.0,"count": 17,"checked": true,"midlogo": null,"goods_name": "华为 G9 青春版 白色 移动联通电信4G手机 双卡双待","spec_info": "{\"id_list\":\"1:1|2:6|6:22\",\"id_txt\":\"{\\\"机身颜色\\\":\\\"白色\\\",\\\"内存\\\":\\\"3GB\\\",\\\"机身存储\\\":\\\"16GB\\\"}\"}"}},"total": 1443300.0},"other": {}
}
后端实现
- 步骤一:修改CartService,添加 queryCartList 方法,从redis查询的购物车信息
- 步骤二:修改CartController,添加queryCartList 方法,仅返回购物车中的数据
步骤一:修改CartService,添加 queryCartList 方法,
/*** * @param user* @return*/
public Cart queryCartList(User user);
步骤二:修改CartServiceImpl,从redis查询的购物车信息
/*** 查询购物车* @param user* @return*/
public Cart queryCartList(User user) {String key = "cart" + user.getId();// 获取hash操作对象String cartString = this.stringRedisTemplate.opsForValue().get(key);// 2 获得购物车,如果没有创建一个return JSON.parseObject(cartString, Cart.class);
}
步骤三:修改CartController,添加queryCartList 方法,仅返回购物车中的数据
/*** 查询购物车* @return*/
@GetMapping
public BaseResult queryCartList() {//1 获得用户信息// 1.1 获得tokenString token = request.getHeader("Authorization");// 1.2 解析tokenUser loginUser = null;try {loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(),User.class);} catch (Exception e) {return BaseResult.error("token失效或未登录");}Cart cart = this.cartService.queryCartList(loginUser);return BaseResult.ok("查询成功", cart.getData().values());}
前端实现:显示页面
步骤一:创建 ~/pages/flow1.vue 组件,拷贝 ~/static/flow1.html内容

步骤二:导入js和css
head: {title: '首页',link: [{rel:'stylesheet',href: '/style/cart.css'},],script: [{ type: 'text/javascript', src: '/js/cart1.js' },]},
步骤三:添加公共组件
<script>
import TopNav from '../components/TopNav'
import Footer from '../components/Footer'export default {head: {title: '首页',link: [{rel:'stylesheet',href: '/style/cart.css'},],script: [{ type: 'text/javascript', src: '/js/cart1.js' },]},components: {TopNav,Footer,},}
</script>
前端实现:显示购物车信息
- 步骤一:修改api.js 查询购物车信息
- 步骤二:页面加载成功后,获得购物车信息(如果登录从后端获取,如果没有登录从浏览器端获得)
- 步骤三:遍历显示购物车信息,
- 步骤四:通过计算属性,计算总价格

步骤一:修改apiclient.js 查询购物车信息
//查询购物车getCart : () => {return axios.get("/cart-service/carts")},
步骤二:页面加载成功后,获得购物车信息(如果登录从后端获取,如果没有登录从浏览器端获得)
data() {return {cart : [], //购物车对象}},async mounted() {//获得token信息,表示登录this.token = sessionStorage.getItem("token")if(this.token != null) {//登陆:服务器获得数据let { data } = await this.$request.getCart()this.cart = data.data} else {//未登录:从浏览器本地获得购物车let cartStr = localStorage.getItem("cart");if(cartStr != null) {this.cart = JSON.parse(cartStr);}}},
步骤三:遍历显示购物车信息

<tbody><!-- 购物车列表 start --><tr v-for="(goods,k) in cart" :key="k"><td class="col1"><a href=""><img :src="goods.midlogo" alt="" /></a><strong><a href="">{{goods.goods_name}}</a></strong></td><td class="col2"><span style="display: block;" v-for="(value,key,index) in JSON.parse(JSON.parse(goods.spec_info).id_txt)":key="index">{{key}}:{{value}}</span></td><td class="col3">¥<span>{{ (goods.price/100).toFixed(2) }}</span></td><td class="col4"><a href="javascript:;" class="reduce_num" @click.prevent="minus(goods)"></a><input type="text" name="amount" v-model="goods.count" @keyup="updateCount(goods,$event)" value="1" class="amount"/><a href="javascript:;" class="add_num" @click.prevent="plus(goods)"></a></td><td class="col5">¥<span>{{ (goods.price / 100 * goods.count).toFixed(2) }}</span></td><td class="col6"><a href="" @click.prevent="del(k)">删除</a></td></tr><!-- 购物车列表 end --></tbody>
步骤四:通过计算属性,计算总价格

computed : {totalPrice : function(){ //计算总价格//所有小计的和let sum = 0 ;this.cart.forEach( g => {sum += (g.price * g.count);});return (sum/100).toFixed(2);}},相关文章:
【畅购商城】购物车模块之查看购物车
目录 分析 接口 后端实现 前端实现:显示页面 前端实现:显示购物车信息 分析 用户如果没有登录,购物车存放在浏览器端的localStorage处,且以数组的方式进行存储。用户如果登录了,购物车存放在redis中,…...
Spring Boot 学习笔记
学习代码第一步:如何写 Hello world ? 1、新建项目 新建一个 Maven Java 工程,在 pom.xml 文件中添加 Spring Boot Maven 依赖: <parent><groupId>org.springframework.boot</groupId><artifactId>spri…...
快速打造智能应用:从设计到上线的全流程指南
随着人工智能技术的快速发展,如何将大模型技术转化为实际应用成为了各行业关注的焦点。本文将以一个经典的 RAG(检索增强生成)知识问答系统为例,详细介绍从智能体设计到最终应用部署的全流程。通过结合阿里云的魔笔低代码平台和丰…...
Java-将一个大列表均分成多个小列表,每个小列表包含10个元素
要将一个大列表均分成多个小列表,每个小列表包含10个元素,可以使用多种方法。以下是几种常 见的方法: 方法一:使用 subList 这是你已经提到的方法,通过 subList 来获取子列表。 import java.util.ArrayList; import java.util.List;public class BatchProcessingExamp…...
tcp_rcv_synsent_state_process函数
tcp_rcv_synsent_state_process 是 Linux Kernel 中用于处理 TCP 连接在 SYN-SENT 状态下接收到报文的函数。这个函数在 TCP 三次握手阶段起到了至关重要的作用,处理了在客户端发送 SYN 请求之后收到服务器响应报文的各种情况。 以下是这个函数的解读和剖析: int tcp_rcv_sy…...
关于无线AP信道调整的优化(锐捷)
目录 一、信道优化的基本原则二、2.4G频段信道优化三、5G频段信道优化四、信道优化代码具体示例五、其他优化措施 一、信道优化的基本原则 信道优化旨在减少信道间的干扰,提高网络覆盖范围和信号质量。基本原则包括: 1. 选择合适的信道:根据…...
C#编写的金鱼趣味小应用 - 开源研究系列文章
今天逛网,在GitHub中文网上发现一个源码,里面有这个金鱼小应用,于是就下载下来,根据自己的C#架构模板进行了更改,最终形成了这个例子。 1、 项目目录; 2、 源码介绍; 1) 初始化; 将样…...
计算机网络|数据流向剖析与分层模型详解
文章目录 一、网络中的数据流向二、计算机网络通信模型1.OSI 模型2.TCP/IP 模型3.TCP/IP五层模型3.1 分层架构描述3.2各层地址结构3.3UDP数据包报头结构 三、总结 一、网络中的数据流向 在计算机网络中,数据的流向是指数据从发送端到接收端的传输路径。数据流向涉及…...
某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题
一些型号的iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题 延迟问题 navigator.mediaDevices.getUserMedia({ audio: true }) .then((stream) > {console.log(stream) })从开始到获取stream会有将近2s的延迟 导致按下按钮开始录音 会有前…...
gazebo_world 基本围墙。
如何使用? 参考gazebo harmonic的官方教程。 本人使用harmonic的template,在里面进行修改就可以分流畅地使用下去。 以下是world 文件. <?xml version"1.0" ?> <!--Try sending commands:gz topic -t "/model/diff_drive/…...
Ubuntu 上高效实现 Texlive 安装和管理
文章目录 介绍操作步骤1. 下载 Texlive 安装包2. 解压安装包3. 安装基础安装命令通用的 scheme 选项 4. 配置环境变量 使用 tlmgr 管理包总结 介绍 Texlive 是学术和技术文档编写的重要工具, 选择适合的安装方案能帮助您提升效率并减少磁盘空间占用. 本文将为您提供在 Ubuntu …...
LeetCOde914 卡牌分组
扑克牌分组问题:探索最大公约数的应用 在编程的世界里,我们经常会遇到各种有趣的算法问题,今天要和大家分享的是一道关于扑克牌分组的问题,它巧妙地运用了最大公约数的概念来解决。 一、问题描述 给定一副牌,每张牌…...
MicroDiffusion——采用新的掩码方法和改进的 Transformer 架构,实现了低预算的扩散模型
介绍 论文地址:https://arxiv.org/abs/2407.15811 现代图像生成模型擅长创建自然、高质量的内容,每年生成的图像超过十亿幅。然而,从头开始训练这些模型极其昂贵和耗时。文本到图像(T2I)扩散模型降低了部分计算成本&a…...
QWT 之 QwtPlotDirectPainter直接绘制
QwtPlotDirectPainter 是 Qwt 库中用于直接在 QwtPlot 的画布上绘制图形的一个类。它提供了一种高效的方法来实时更新图表,特别适合需要频繁更新的数据可视化应用,例如实时数据流的显示。 使用 QwtPlotDirectPainter 的主要优势在于它可以绕过 QwtPlot 的…...
埃斯顿机器人程序案例多个点位使用变量
多个点位使用变量取放...
【数据分析】贝叶斯定理
文章目录 一、贝叶斯定理的基本形式二、贝叶斯定理的推导三、贝叶斯定理的应用四、贝叶斯定理的优势与挑战 贝叶斯定理(Bayes Theorem)是概率论中的一个重要公式,它提供了一种根据已有信息更新事件发生概率的方式。贝叶斯定理的核心思想是通过…...
学AI编程的Prompt工程,marscode
利用marscode做个创意应用 Datawhale-AI活动 首先把自己的创意告诉marscode,marscode会针对你的创意开始写代码。如果在把创意给marscode前有更好的梳理,会有更好的结果。 对于一个新开始的项目,只需要点击apply进行应用 由于ai的效果不稳定…...
python中的与时间相关的模块
python中的与时间相关的模块 1. time 模块2. datetime 模块3. calendar 模块4. timeit 模块5. pytz 模块6. dateutil 模块参考资料 1. time 模块 time 模块提供了时间相关的函数,主要用于测量时间间隔、获取当前时间、格式化时间等 主要功能 获取当前时间ÿ…...
【Python运维】构建基于Python的自动化运维平台:用Flask和Celery
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代IT运维中,自动化运维平台扮演着至关重要的角色,它能够显著提高运维效率,减少人为错误,并且增强系统的可维护性。本文将引导读者如…...
Qt 12.28 day3
作业: 1】 思维导图 2】 在登录界面的登录取消按钮进行以下设置: 使用手动连接,将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中,在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&a…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
2.3 物理层设备
在这个视频中,我们要学习工作在物理层的两种网络设备,分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间,需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质,假设A节点要给…...
鸿蒙HarmonyOS 5军旗小游戏实现指南
1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发,采用DevEco Studio实现,包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...
