当前位置: 首页 > news >正文

【畅购商城】购物车模块之查看购物车

目录

分析

接口

后端实现

前端实现:显示页面

前端实现:显示购物车信息

分析

  1. 用户如果没有登录,购物车存放在浏览器端的localStorage处,且以数组的方式进行存储。
  2. 用户如果登录了,购物车存放在redis中,以Cart对象字符串方式存储。
    1. 问题:前后端数据不一致,无法使用一个也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": {}
}

后端实现

  1. 步骤一:修改CartService,添加 queryCartList 方法,从redis查询的购物车信息
  2. 步骤二:修改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>

前端实现:显示购物车信息

  1. 步骤一:修改api.js 查询购物车信息
  2. 步骤二:页面加载成功后,获得购物车信息(如果登录从后端获取,如果没有登录从浏览器端获得)
  3. 步骤三:遍历显示购物车信息,
  4. 步骤四:通过计算属性,计算总价格

步骤一:修改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);}},

相关文章:

【畅购商城】购物车模块之查看购物车

目录 分析 接口 后端实现 前端实现&#xff1a;显示页面 前端实现&#xff1a;显示购物车信息 分析 用户如果没有登录&#xff0c;购物车存放在浏览器端的localStorage处&#xff0c;且以数组的方式进行存储。用户如果登录了&#xff0c;购物车存放在redis中&#xff0c…...

Spring Boot 学习笔记

学习代码第一步&#xff1a;如何写 Hello world &#xff1f; 1、新建项目 新建一个 Maven Java 工程&#xff0c;在 pom.xml 文件中添加 Spring Boot Maven 依赖&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId>spri…...

快速打造智能应用:从设计到上线的全流程指南

随着人工智能技术的快速发展&#xff0c;如何将大模型技术转化为实际应用成为了各行业关注的焦点。本文将以一个经典的 RAG&#xff08;检索增强生成&#xff09;知识问答系统为例&#xff0c;详细介绍从智能体设计到最终应用部署的全流程。通过结合阿里云的魔笔低代码平台和丰…...

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频段信道优化四、信道优化代码具体示例五、其他优化措施 一、信道优化的基本原则 信道优化旨在减少信道间的干扰&#xff0c;提高网络覆盖范围和信号质量。基本原则包括&#xff1a; 1. 选择合适的信道&#xff1a;根据…...

C#编写的金鱼趣味小应用 - 开源研究系列文章

今天逛网&#xff0c;在GitHub中文网上发现一个源码&#xff0c;里面有这个金鱼小应用&#xff0c;于是就下载下来&#xff0c;根据自己的C#架构模板进行了更改&#xff0c;最终形成了这个例子。 1、 项目目录&#xff1b; 2、 源码介绍&#xff1b; 1) 初始化&#xff1b; 将样…...

计算机网络|数据流向剖析与分层模型详解

文章目录 一、网络中的数据流向二、计算机网络通信模型1.OSI 模型2.TCP/IP 模型3.TCP/IP五层模型3.1 分层架构描述3.2各层地址结构3.3UDP数据包报头结构 三、总结 一、网络中的数据流向 在计算机网络中&#xff0c;数据的流向是指数据从发送端到接收端的传输路径。数据流向涉及…...

某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题

一些型号的iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题 延迟问题 navigator.mediaDevices.getUserMedia({ audio: true }) .then((stream) > {console.log(stream) }&#xff09;从开始到获取stream会有将近2s的延迟 导致按下按钮开始录音 会有前…...

gazebo_world 基本围墙。

如何使用&#xff1f; 参考gazebo harmonic的官方教程。 本人使用harmonic的template&#xff0c;在里面进行修改就可以分流畅地使用下去。 以下是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 卡牌分组

扑克牌分组问题&#xff1a;探索最大公约数的应用 在编程的世界里&#xff0c;我们经常会遇到各种有趣的算法问题&#xff0c;今天要和大家分享的是一道关于扑克牌分组的问题&#xff0c;它巧妙地运用了最大公约数的概念来解决。 一、问题描述 给定一副牌&#xff0c;每张牌…...

MicroDiffusion——采用新的掩码方法和改进的 Transformer 架构,实现了低预算的扩散模型

介绍 论文地址&#xff1a;https://arxiv.org/abs/2407.15811 现代图像生成模型擅长创建自然、高质量的内容&#xff0c;每年生成的图像超过十亿幅。然而&#xff0c;从头开始训练这些模型极其昂贵和耗时。文本到图像&#xff08;T2I&#xff09;扩散模型降低了部分计算成本&a…...

QWT 之 QwtPlotDirectPainter直接绘制

QwtPlotDirectPainter 是 Qwt 库中用于直接在 QwtPlot 的画布上绘制图形的一个类。它提供了一种高效的方法来实时更新图表&#xff0c;特别适合需要频繁更新的数据可视化应用&#xff0c;例如实时数据流的显示。 使用 QwtPlotDirectPainter 的主要优势在于它可以绕过 QwtPlot 的…...

埃斯顿机器人程序案例多个点位使用变量

多个点位使用变量取放...

【数据分析】贝叶斯定理

文章目录 一、贝叶斯定理的基本形式二、贝叶斯定理的推导三、贝叶斯定理的应用四、贝叶斯定理的优势与挑战 贝叶斯定理&#xff08;Bayes Theorem&#xff09;是概率论中的一个重要公式&#xff0c;它提供了一种根据已有信息更新事件发生概率的方式。贝叶斯定理的核心思想是通过…...

学AI编程的Prompt工程,marscode

利用marscode做个创意应用 Datawhale-AI活动 首先把自己的创意告诉marscode&#xff0c;marscode会针对你的创意开始写代码。如果在把创意给marscode前有更好的梳理&#xff0c;会有更好的结果。 对于一个新开始的项目&#xff0c;只需要点击apply进行应用 由于ai的效果不稳定…...

python中的与时间相关的模块

python中的与时间相关的模块 1. time 模块2. datetime 模块3. calendar 模块4. timeit 模块5. pytz 模块6. dateutil 模块参考资料 1. time 模块 time 模块提供了时间相关的函数&#xff0c;主要用于测量时间间隔、获取当前时间、格式化时间等 主要功能 获取当前时间&#xff…...

【Python运维】构建基于Python的自动化运维平台:用Flask和Celery

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代IT运维中,自动化运维平台扮演着至关重要的角色,它能够显著提高运维效率,减少人为错误,并且增强系统的可维护性。本文将引导读者如…...

Qt 12.28 day3

作业&#xff1a; 1】 思维导图 2】 在登录界面的登录取消按钮进行以下设置&#xff1a; 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&a…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

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

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

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新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...