项目笔记20（尚品汇）

2022-04-16 373 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情

购买产品个数的操作

接下来处理用户购买产品个数的操作。

在这里插入图片描述

首先找到该功能是在详情页中，因此在详情页组件设置一个data值，用来记录用户购买件数，在此设置名称为'skuNum'。默认为1。

在这里插入图片描述

接下来给‘+’和‘-’绑定事件，如下所示。在此注意考虑输入小于1的情况

在这里插入图片描述

接下来处理用户自己输入数据的问题。当用户输入内容时，很有可能输入非法字符，比如‘12a’,'-12','1.5'等，针对这些输入，还需要给输入框绑定一个change事件，检测输入框的变化，同时纠正用户输入。如下所示。这里给字符*1是为了筛选出那些含有非数字的字符。

在这里插入图片描述

购物车操作

发送请求

当用户点击加入购物车时，应该将用户的数据存储到数据库中。

在这里插入图片描述

首先通过手册查看接口文档，发现接口为/api/cart/addToCart/{skuId}/{skuNum} POST请求。接下来去api文件夹下的index.js文件发送请求

在这里插入图片描述

发送请求完成之后，去vuex中的detail仓库设置actions如下所示，此处不需要存储数据，因为没有接收数据。

在这里插入图片描述

接下来回到详情页的加入购物查按钮，绑定点击事件，派发action并且传递所需参数。

在这里插入图片描述

在这里插入图片描述

根据请求成功与否决定是否进行路由跳转

注册添加到购物车页面的路由

首先将准备好的添加购物车页面的静态组件导入到项目中，然后再router文件夹中设置路由，具体设置如下所示。

在这里插入图片描述

判断是否跳转

设置完成之后，重新修改detail仓库中的action，当请求成功，返回ok，请求失败，返回错误。

在这里插入图片描述

然后回到detail组件利用try catch来根据成功与否决定是否跳转。具体代码如下所示

在这里插入图片描述

将详情页的信息带给添加到购物车路由并替换数据

需要给加入购物车组件传递商品信息以及商品数量。针对简单的商品数量这个数据，使用简单的query就可以进行存储。而复杂的产品信息（是一个对象）那么可以利用会话存储（不持久，会话结束就消失）。需要注意的是本地存储，会话存储存储的一般都是字符串，具体操作及代码如下所示

在这里插入图片描述

存储完成后，回到添加到购物车组件，接收数据。

在这里插入图片描述

在这里插入图片描述

购物车静态组件与添加到购物车组件修改

添加到购物车组件还有两个地方需要修改。如图所示，点击这两个按钮同样会进行路由跳转。

在这里插入图片描述

点击商品详情的跳转较为简单。具体代码如下所示。

在这里插入图片描述

而去购物车结算的跳转就相对麻烦一点，首先得先去之前写好的代码中拿到购物车的静态组件引入到项目中。

在这里插入图片描述

引入完成之后，同样注册路由

在这里插入图片描述

注册完成之后，给第二个按钮设置路由跳转

在这里插入图片描述

uuid游客身份获取购物车数据

首先书写获取购物车的数据的接口

在这里插入图片描述

接下来由于是个新模块所以建立一个新的仓库名为shopcart

在这里插入图片描述

在这里插入图片描述

仓库完成之后，开始vuex三连环，在三连环之前，先测试一下拿到的数据

在这里插入图片描述

得到的数据如下所示

在这里插入图片描述

可以发现没有拿到数据，这是因为服务器不知道给你谁的数据。假设用户很多，那么根据用户的不同返回的应该是不同的数据。为了方便演示这个效果，引入uuid。

封装一个固定的uuid

在这里插入图片描述

储存在detail仓库中。

在这里插入图片描述

接下来找到api文件夹下的request.js文件。利用请求头传递数据

在这里插入图片描述

购物车动态展示数据

动态展示数据

在这里插入图片描述

在这里插入图片描述

处理总价和全选按钮

在这里插入图片描述

处理产品数量

与上次产品数量处理不同的是，上次的产品数量处理不需要发送请求，在这里需要发送请求。

在这里插入图片描述