【畅购商城】购物车模块之查看购物车
目录
分析
接口
后端实现
前端实现:显示页面
前端实现:显示购物车信息
分析
- 用户如果没有登录,购物车存放在浏览器端的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);}},
【畅购商城】购物车模块之查看购物车相关推荐
- 畅购商城4.0 微信支付
畅购商城4.0 1.微信支付 1.1流程分析 1.2微信支付概述 1.2.1账号申请 步骤一:注册公众号,根据自身主体类型注册对应的公众号 只能申请服务号,订阅号没有办法申请支付 https:// ...
- 畅购商城-添加订单实现(一)
观前提示: 详细资料观看黑马程序员的畅购商城. 该博客尝试用解题思路说明代码实现. 笔者当前水平有限,因此该博客质量不高. 已知: Idworke:一个分布式的ID生成工具. 可以理解为帮助生成数据库 ...
- Java毕业设计项目【畅购商城】
为了帮助更多的铁汁们,快速进步,完成毕业设计,挺近大厂,我前面已经分享了很多项目 但是有铁汁们觉得实战项目不够,为了给支持我的朋友吧 此次分享的是商城项目,里面包含视频和代码,涉及到SSM.Sprin ...
- 畅购商城(三):商品管理
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 畅购商城(一):环境搭建 畅购商 ...
- 商品品牌信息的增删改查操作步骤_畅购商城(三):商品管理
好好学习,天天向上 本文已收录至我的Github仓库 DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 畅购商城(一):环境搭建 畅购商城(二):分布式文件系统 ...
- 畅购商城(五):Elasticsearch实现商品搜索
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 畅购商城(一):环境搭建 畅购商 ...
- 畅购商城_第11章_ 订单
畅购商城_第11章_ 订单 文章目录 畅购商城_第11章_ 订单 第11章 订单 课程内容 1 订单结算页 1.1 收件地址分析 1.2 实现用户收件地址查询 1.2.1 代码实现 1.2.2 测试 ...
- 畅购商城(十三):秒杀系统「上」
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 畅购商城(一):环境搭建 畅购商城(二):分布式文件系统F ...
- 畅购商城六:微服务网关与jwt令牌
微服务网关 基本概念 对于微服务的各个服务一般会有不同的地址,外部客户端的一个服务可能要调用诸多的接口,这会带来以下的问题 客户端会多次请求不同的微服务,地址复杂 存在跨域请求,处理复杂 认证复杂 难 ...
最新文章
- python 文件命令
- qmenubar无边框 qt_Qt UI测试:如何模拟使用QTest QMenuBar项目上的点击?
- Label Assign综述:提升目标检测上限
- nv4_disp.dll 蓝屏
- itextpdf添加表格元素_java使用iText生成pdf表格详解
- 线性存储的最短平均检索时间(洛谷P1253题题解,Java语言描述)
- laravel-admin 在列表页添加自定义按钮
- 渗透测试 已学课时 1 个_我14岁上创业课时学到的东西
- 【LeetCode】剑指 Offer 62. 圆圈中最后剩下的数字
- 以命令行的方式运行activity
- 潭州课堂25班:Ph201805201 爬虫高级 第十二 课 Scrapy-redis分布 项目实战 (课堂笔记)...
- Maven 配置使用小技巧
- UVA10882 Koerner's Pub【数学】
- opencv_找cv::Mat中的最大值和最小值
- 卸载mysql数据库报错_完全卸载mysql数据库图文教程
- MySql 分布式集群原理(2)MySQL设置用户和赋权限
- Canvas绘制地图
- 西门子免授权CNC数控系统数据采集c#、C、python都支持,可支持再各种操作系统上运行,无须西门子OPC,支持828D	840dsl 808 802dsl 840d 810d 西门子数控DNC程序
- 富爸爸穷爸爸(读后感悟,书中重点)
- python pandas excel 慢_使用Python、Pandas和openpyx时,小Excel电子表格加载速度非常慢...