购物车模块（ 二）

前言

续上一次的继续 我们搭建了购物车模块 将商品添加到购物车
今天继续 实现查看购物车功能

查看购物车

1.分析

• 用户如果没有登录，购物车存放在浏览器端的localStorage处，且以数组的方式进行存储。
• 用户如果登录了，购物车存放在redis中，以Cart对象字符串方式存储。
  • 问题：前后端数据不一致，无法使用一个也flow1.vue进行数据展示
  • 解决方案：将后端cart数据进行简化，
    Cart对象–>Map(data)–>List(values)
    

结论：前端提供给页面统一数组，页面进行数据展示即可。

2.接口

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": {}
}

3.后端实现

3.1步骤一：修改CartService，添加 queryCartList 方法，从redis查询的购物车信息

/*** * @param user* @return*/
public Cart queryCartList(User user);

3.2步骤二：修改CartController，添加queryCartList 方法，仅返回购物车中的数据

/*** 查询购物车* @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);
}

3.3 步骤三：修改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());}

4.前端实现：显示页面

4.1步骤一：创建 ~/pages/flow1.vue 组件，拷贝 ~/static/flow1.html内容

• flow1.vue

<template><div><!-- 顶部导航 start --><TopNav></TopNav><!-- 顶部导航 end --><div style="clear:both;"></div><!-- 页面头部 start --><HeaderSeach :isFirst="false"></HeaderSeach><!-- 页面头部 end --><div style="clear:both;"></div><!-- 主体部分 start --><div class="mycart w990 mt10 bc"><h2><span>我的购物车</span></h2><table><thead><tr><th class="col1">商品名称</th><th class="col2">商品信息</th><th class="col3">单价</th><th class="col4">数量</th>    <th class="col5">小计</th><th class="col6">操作</th></tr></thead><tbody><tr><td class="col1"><a href=""><img src="data:images/cart_goods1.jpg" alt="" /></a>  <strong><a href="">【1111购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格</a></strong></td><td class="col2"> <p>颜色：073深红</p> <p>尺码：170/92A/S</p> </td><td class="col3">￥<span>499.00</span></td><td class="col4"> <a href="javascript:;" class="reduce_num"></a><input type="text" name="amount" value="1" class="amount"/><a href="javascript:;" class="add_num"></a></td><td class="col5">￥<span>499.00</span></td><td class="col6"><a href="">删除</a></td></tr><tr><td class="col1"><a href=""><img src="data:images/cart_goods2.jpg" alt="" /></a> <strong><a href="">九牧王王正品新款时尚休闲中长款茄克EK01357200</a></strong></td><td class="col2"> <p>颜色：淡蓝色</p> <p>尺码：165/88</p></td><td class="col3">￥<span>1102.00</span></td><td class="col4"> <a href="javascript:;" class="reduce_num"></a><input type="text" name="amount" value="1" class="amount"/><a href="javascript:;" class="add_num"></a></td><td class="col5">￥<span>1102.00</span></td><td class="col6"><a href="">删除</a></td></tr><tr><td class="col1"><a href=""><img src="data:images/cart_goods3.jpg" alt="" /></a> <strong><a href="">【1111购物狂欢节】捷王纯手工缝制休闲男鞋大头皮鞋 头层牛</a></strong></td><td class="col2"> <p>颜色：0922红棕现货</p> <p>尺码：40现货</p></td><td class="col3">￥<span>269.00</span></td><td class="col4"> <a href="javascript:;" class="reduce_num"></a><input type="text" name="amount" value="1" class="amount"/><a href="javascript:;" class="add_num"></a></td><td class="col5">￥<span>269.00</span></td><td class="col6"><a href="">删除</a></td></tr></tbody><tfoot><tr><td colspan="6">购物金额总计： <strong>￥ <span id="total">1870.00</span></strong></td></tr></tfoot></table><div class="cart_btn w990 bc mt10"><a href="" class="continue">继续购物</a><a href="flow2.html" class="checkout">结 算</a></div></div><!-- 主体部分 end --><div style="clear:both;"></div><!-- 底部版权 start --><Footer></Footer><!-- 底部版权 end --></div>
</template><script>
import TopNav from '@/components/TopNav'
import HeaderSeach from '@/components/HeaderSeach'
import Footer from '@/components/Footer'
import BottomNav from '@/components/BottomNav'
import Pagination from '@/components/Pagination'
export default {components:{TopNav,Footer,HeaderSeach,BottomNav,Pagination,
},}
</script><style></style>

4.2步骤二：导入js和css

  head: {title: '首页',link: [{rel:'stylesheet',href: '/style/cart.css'},],script: [{ type: 'text/javascript', src: '/js/cart1.js' },]},

4.3步骤三：添加公共组件

<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>

5.前端实现：显示购物车信息

5.1步骤一：修改apiclient.js 查询购物车信息

  //查询购物车getCart : () => {return axios.get("/cart-service/carts")},

5.2步骤二：页面加载成功后，获得购物车信息

如果登录从后端获取，如果没有登录从浏览器端获得

  data () {return {cart: [],        //购物车对象}},methods: {async queryCart() {// 获得登录标识tokenlet token = sessionStorage.getItem('token')if(token) {// 如果登录状态，发送ajax获得数据let { data } = await this.$request.getCart()this.cart = data.data}  else {// 如果不是登录状态，从localStorage获得数据let cartStr = localStorage.getItem('cart')if(cartStr) {this.cart = JSON.parse(cartStr)}}},minus(cartItem) {if(cartItem.count > 1) {cartItem.count --}},plus(cartItem) {cartItem.count ++},getSpec(specInfo) {return  JSON.parse(JSON.parse(specInfo).id_txt)}},mounted() {// 查询购物车this.queryCart()},

5.3步骤三：遍历显示购物车信息

<tbody><!-- 购物车列表展示start --><tr v-for="(cartItem,index) in cart" :key="index"><td class="col1"><a href=""><img :src="cartItem.midlogo" alt="" /></a><strong><a href="">{{cartItem.goods_name}}</a></strong></td><td class="col2"><span style="display: block;" v-for="(value,key,index) in getSpec(cartItem.spec_info)" :key="index">{{key}} : {{value}}</span></td><td class="col3">￥<span>{{cartItem.price / 100}}</span></td><td class="col4"><a href="javascript:;" class="reduce_num" @click.prevent="minus(cartItem)" ></a><input type="text" name="amount" v-model="cartItem.count" value="1" class="amount"/><a href="javascript:;" class="add_num" @click.prevent="plus(cartItem)"></a></td><td class="col5">￥<span>{{cartItem.price * cartItem.count / 100}}</span></td><td class="col6"><a href="">删除</a></td></tr><!-- 购物车列表展示start --></tbody>

5.4步骤四：通过计算属性，计算总价格

computed : {totalPrice : function(){      //计算总价格//所有小计的和let sum = 0 ;this.cart.forEach( g => {sum += (g.price * g.count);});return (sum/100).toFixed(2);}},

感谢宁看到这里，你的三连就是我更新的动力

企业级项目分享：购物车模块（ 二） 21-06-09相关推荐

1. 企业级项目分享：购物车模块（一）2021-06-08

   购物车模块 目录 购物车模块 前言 1.搭建购物车服务 1.1步骤一:创建changgou4-service-cart 项目 1.2步骤二:修改pom.xml文件,添加坐标 1.3步骤三:创建yml文 ...

2. Vue3电商项目实战-购物车模块2【04-头部购物车-商品列表-本地、05-头部购物车-删除操作-本地、06-购物车页面-基础布局】

   文章目录 04-头部购物车-商品列表-本地 05-头部购物车-删除操作-本地 06-购物车页面-基础布局 04-头部购物车-商品列表-本地 目的:根据本地存储的商品获取最新的库存价格和有效状态. 大致 ...

3. web day25 web day24 小项目练习图书商城, 购物车模块,订单模块,支付(易宝支付)

   购物车模块 购物车存储: 保存在session中(本次使用的) 保存在cookie中 保存在数据库中 购物车相关类 购物车结构 CartItem:包含图书和数量,小计 Cart:包含一个Map< ...

4. 支付项目：9、购物车模块

   统一表单验证 1.为购物车模块编写符合前端API的类 CartVo.java: package com.xiaoxin.mall.service.vo;import java.math.BigDeci ...

5. 购物车模块设计及实现(SSH架构)

   一.系统需求分析 1.系统介绍 2.系统功能性需求 ①用户浏览应用,即登录首页,在首页中主页列出最新出版的4本书,和几本主编推荐的书. ②在首页中提供购物车的链接.分类浏览的链接.结账的链接.查看订单 ...

6. 视频教程-最新完整VUE前端教程从入门到精通，纯干货企业级项目实战-Vue

   最新完整VUE前端教程从入门到精通,纯干货企业级项目实战 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开 ...

7. 购物车模块后端开发详解

   首先,我得说明一下,本人第一次写博客,前一段时间项目刚做完,写这篇博客一是为了分享给大家这个模块的一些知识点供大家参考,二是对自己的模块进行一个总结,毕竟这也是我找下一份工作的项目经验☺☺☺. 需求介 ...

8. 项目分享三：页面之间的传值

   一.回调函数的使用 我们首先来看一下,页面间传值的一个经典例子,列表页与明细页之间的传值,如下面二张图所图.在列表页点击评价晒单,进入评价晒单页面,当用户在该页面完成操作后,列表页对应的选项,相应地改 ...

9. python购物车模块

   # 代码实现: 购物车# 功能要求: 1.用户输入总资产,例如:2000.# 2.显示商品列表,让用户根据序号选择商品,加入购物车购买# 3.如果商品总额大于总资产,提示账户余额不足,否则,购买成功# ...

最新文章

1. 安全学习概览——恶意软件分析、web渗透、漏洞利用和挖掘、内网渗透、IoT安全分析、区块链、黑灰产对抗...
2. postgresql 9.1 暂停 stream 后使用 rsync 异机同步文件
3. lunix系统安装及分区补充安装包
4. python源码精要(8)-CPython源代码结构
5. mysql 逐列读取_mysql – 根据其他列如何使用逐列
6. 构造 Codeforces Round #275 (Div. 2) C. Diverse Permutation
7. leetcode 69. x 的平方根（C语言）
8. netty系列之:使用netty搭建websocket服务器
9. 编写iptables脚本实现IP地址、端口过滤
10. martin fowler_用Java和Java 8创建内部DSL，采用Martin Fowler的方法
11. 教务管理及教材订购系统设计文档
12. 计算机电子琴音乐,电脑电子琴软件
13. 比iOS还流畅！国产手机最优秀90Hz手机发布，2999元起
14. 2018年手机保值排行榜出炉：华为P20成最大赢家？
15. 模具计算机辅助设计笔试题,模具CADCAM试卷
16. 路由跟踪之tcptraceroute IP延时之tcpping
17. 直流稳压稳流电源基本功能，电源使用注意事项
18. 3种常用的图片压缩方法
19. canvas实现5张图片合成一张图片
20. python爬取搜狐最新时政新闻数据

热门文章

1. 如何解决git上传文件出错[rejected] master -＞ master (fetch first) error: failed to push some refs to ‘
2. 微服务场景下数据抽取与统计
3. 因【金刚石刀具】种类很多，故被广泛应用
4. 贝壳扫地机器人_扫地机器人到底好用不好用？
5. 小程序毕业设计 基于微信4S店汽车维修保养小程序毕业设计开题报告功能参考
6. linux shell 实训总结和自评,听评课收获与总结
7. jquery 之 Deferred 使用
8. vue发送请求时遇到Uncaught (in promise) TypeError Cannot read properties of undefined(reading ‘randomExtend
9. c++快递费用计算代码出现的错误
10. 转行为什么选择大数据开发？