前端项目-08-商品详情组件开发-加入购物车

最新推荐文章于 2024-05-05 10:01:14 发布

ycmy2017

最新推荐文章于 2024-05-05 10:01:14 发布

阅读量558

点赞数

分类专栏： # 项目实战-前端-前台系统文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/ycmy2017/article/details/130024694

版权

项目实战-前端-前台系统专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1-商品详情页面静态页面开发

前端开发步骤：写静态-写api-配置路由-请求接口(vuex)-渲染页面；
由于项目重点在前后端的逻辑交互，不在于静态页面，所以省略开发，直接导入。

2-获取服务器数据

2.1-获取服务器数据

静态页面已经开发完成，我们需要定义接口注册到路由中，vuex 派发action，发起请求

api封装请求方法-注册组件和路由-创建store文件-注册仓库文件-开发store文件-详情组件加载派发action。

2.2-抽取路由配置相关信息

由于src\router\index.js文件过大，我们将路径配置抽取到另外一个文件中src\router\routes.js中，减少index.js体积。因为取名KV一致，所以在index.js中KV一致，简写，省略V

2.3-动态渲染页面

服务端返回的数据结构：

看出服务器返回数据比较复杂，为了取数据方便，我们需要使用到store文件中vuex中的getters特性，简化数据获取。

3-动态渲染导航栏和商品信息

ps:从列表页面跳转到商品详情页面，滚动条默认在底部，我们需要配置一下滚动条的位置，在顶部。需要在src\router\index.js中配置：

先通过getters来简化数据获取，然后动态渲染导航栏和商品基本信息数据。

动态渲染导航栏数据：

动态渲染商品名字，描述和价格信息。

动态渲染商品售卖属性数据

售卖属性的排他属性事件；

首先有默认高亮，接口返回数据中，使用isChecked判断；但是用户点击哪个售卖属性，必须要高亮显示哪个；思路是先把所有同一类isChecked设置为0，然后再把选中isChecked设置为1。

4-动态渲染左侧图片数据

左侧的数据在组件中渲染，首先是放大镜组件（zoom）和小图列表；首先我们需要展示的是zoom组件的图片，默认是第一张图片，数据是skuInfo.skuImageList的第一张图；数据在父组件detail组件中，需要向子组件zoom传输数据，使用props属性来传递数据。

ps:console控制台会报错，但是不影响程序的运行，因为skuInfo有可能没有数据，导致skuInfo.skuImageList会是undefined，所以我们需要对skuInfo.skuImageList进行二次计算处理。同理我们需要在zoom组件中对数据进行二次处理，避免出现undefined控制台显示红色警告信息。

4.1-轮播图

轮播图跟当时的全局组件不一样，这里我们单独使用，不使用全局组件...
轮播图使用步骤：1-引入swiper组件 import Swiper from 'swiper'，引入样式在main.js中已经引入
import 'swiper/css/swiper.css';2-需要使用的组件结构完整；3-new Swiper实例；
如果是子组件中使用轮播图组件，并且轮播图数据是父组件传递过来的，new Swiper操作可以在子组件的mounted函数中进行，但是我们使用统一的watch+nextTick来实现是最好的...

需求1，轮播图3个一组，需要用到Swiper组件的参数slidesPerView属性，点击前后，一次移动多少张图，需要用到参数slidesPerGroup；

需求2：点击某张图，需要在图片上加上红色框框，两种方式，一个可以使用样式&:hover来实现，但是我们使用JS来控制，JS控制样式颜色之前首页三级分类中，划到哪个一级分类，背景色改变。

4.2-放大镜图片

当点击下面的小图ImageList组件，需要将选中的图片索引传递给上面的大图，大图对应Zoom组件也要发生变化；ImageList和Zoom是兄弟组件，所以涉及到兄弟组件的通信，采用$bus来解决。ImageList中使用this.$bus.$emit来发送参数，Zoom中采用this.$bus.$on来接受参数，并且在zoom中之前写死是固定第1张图（索引值是0），现在需要变更为动态，响应式数据currentIndex，默认值是0

放大镜放大功能开发，确定移动位置计算...

5-购买商品数量功能开发

购买商品的数量这里需要注意，需求用户可以点击+和- 分别将数量+1和-1；用户还可以输入自己希望的数字以及任何字符，这时需要校验。

首先我们需要定义一个响应数据变量skuNum初始值为1，然后在input文本输入框需要收集到数据skuNum，收集数据需要用到v-model来收集数据；分别给+和- 绑定@click事件，还需要对文本框绑定@change事件；

6-加入购物车

点击加入购物车，需要做两件事情：1-调用加入购物车接口；2-如果接口返回成功，需要进一步路由跳转。

开发步骤：编写api(接口封装)-派发action-仓库编写action；由于加入购物车接口，没有数据返回，只是告知成功或者失败，所以仓库中不需要mutations和定义state相关数据对象。

重难点：派发action是异步操作，如果获得store中action的返回结果呢，如何定义成功失败呢？我们需要将派发action方法定义为async和await，然后action中如果服务器返回失败，需要返回一个失败的Promise，这样就可以判断派发action成功失败，在派发方法中进行下一步操作。