【畅购商城】购物车模块之查看购物车
目录
分析
接口
后端实现
前端实现:显示页面
前端实现:显示购物车信息
分析
- 用户如果没有登录,购物车存放在浏览器端的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…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)
目录 🔍 若用递归计算每一项,会发生什么? Horners Rule(霍纳法则) 第一步:我们从最原始的泰勒公式出发 第二步:从形式上重新观察展开式 🌟 第三步:引出霍纳法则&…...