苏州网站建设一条龙,请问做网站需要什么,网页设计网站导航怎么弄红色字体的,四川省安监站网址文章目录29.加入购物车操作#xff08;难点#xff09;29.1加入购物车按钮29.2addCartSuce29.3购物车29.3.1 向服务器发送ajax请求#xff0c;获取购物车数据29.3.2UUID临时游客身份29.3.3动态展示购物车29.4修改购物车产品的数量#xff08;需要发请求#xff1a;参数理解…
文章目录29.加入购物车操作难点29.1加入购物车按钮29.2addCartSuce29.3购物车29.3.1 向服务器发送ajax请求获取购物车数据29.3.2UUID临时游客身份29.3.3动态展示购物车29.4修改购物车产品的数量需要发请求参数理解29.5删除某一产品29.6修改产品状态29.7删除全部选中的商品29.8全选操作本人其他相关文章链接29.加入购物车操作难点 重难点说明 用户临时ID的处理 购物车数据的管理(复杂) 不使用v-model监控用户输入 async / await / Promise.all() 的使用
思路 加入购物车按钮 路由跳转之前发请求 成功路由跳转与参数传递 失败提示失败信息 addCartSuce 查看详情查看购物车 购物车 购物车静态组件-需要修改样式结构删除第三项并调整css让各个项目对齐比例为15 35 10 17 10 13向服务器发送ajax请求获取购物车数据UUID临时游客身份动态展示购物车 修改购物车产品的数量需要发请求参数理解 删除某一产品 修改产品状态 删除全部选中的商品 全选操作
29.1加入购物车按钮
加入购物车按钮 路由跳转之前发请求 成功路由跳转与参数传递 失败提示失败信息
修改代码 src/pages/Detail/index.vue a hrefjavascript: clickaddOrUpdateShopCar加入购物车/amethods: {//加入购物车async addOrUpdateShopCar() {//1:在点击加入购物车这个按钮的时候做的第一件事情将参数带给服务器发请求通知服务器加入购车的产品是谁//this.$store.dispatch(addOrUpdateShopCart),说白了它是在调用vuex仓库中的这个addOrUpdateShopCart函数。//2:你需要知道这次请求成功还是失败如果成功进行路由跳转如果失败需要给用户提示try {//成功await this.$store.dispatch(addOrUpdateShopCar, {skuId: this.$route.params.skuId, skuNum: this.skuNum});//3:进行路由跳转//4:在路由跳转的时候还需要将产品的信息带给下一级的路由组件//一些简单的数据skuNum通过query形式给路由组件传递过去//产品信息的数据【比较复杂:skuInfo】,通过会话存储不持久化,会话结束数据在消失//本地存储|会话存储一般存储的是字符串sessionStorage.setItem(SKUINFO, JSON.stringify(this.skuInfo))this.$router.push({name: addCartSuccess, query:{skuNum: this.skuNum}})} catch (error) {//失败alert(error.message);}}
}src/api/index.js //将产品添加到购物车中获取更新某一个产品的个数
// /api/cart/addToCart/{ skuId }/{ skuNum } POST
export const addOrUpdateShopCar (skuId, skuNum)requests({url:/cart/addToCart/${skuId}/${skuNum}, method:post});src/store/detail/index.js import {getGoodsInfo, addOrUpdateShopCar} from /api;const actions {//加入购物车的||修改某一个产品的个数注意一定要用解构方法解构形参对象不能写成接收两个形参形式那样会报错接口调不通async addOrUpdateShopCar(context, {skuId, skuNum}) {//发请求:前端带一些参数给服务器【需要存储这些数据】存储成功了没有给返回数据//不需要在三连环仓库存储数据了//注意:async函数执行返回的结果一定是一个promise【要么成功要么失败】let response await addOrUpdateShopCar(skuId, skuNum);if (response.code 200) {//返回的是成功的标记return OK;} else {//返回的是失败的标记return Promise.reject(new Error(fail))}},
}注意点1 问题加入购物车路由跳转跟普通的路由跳转不一样不一样在哪里 答案因为加入购物车功能得先调接口保存加入购物车的数据然后再跳转路由。而普通的路由跳转直接跳转并传参就行。
注意点2 问题点击购物车函数派发定义在详情组件中但是加入购物车接口调用在仓库中如何获取调用函数的结果呢 答案第一种方案在vuex的state中保存结果第二种方案在详情组件中采用asyncawait修饰派发方法获取调用成功失败结果。
注意点3
问题如下代码vuex中执行ajax调用接口返回失败为啥 src/api/index.js //将产品添加到购物车中获取更新某一个产品的个数
// /api/cart/addToCart/{ skuId }/{ skuNum } POST
export const addOrUpdateShopCar (skuId, skuNum)requests({url:/cart/addToCart/${skuId}/${skuNum}, method:post});src/store/detail/index.js async addOrUpdateShopCar(context, skuId, skuNum) {let response await addOrUpdateShopCar(skuId, skuNum);console.log(******response:, response) }报错如下 答案vuex中action定义的函数接收形参书写个数不对。
如果是一个参数可以写成addOrUpdateShopCar(context, skuId)
但如果是传入多个参数则不能这样写这是错误写法addOrUpdateShopCar(context, skuId, skuNum)
正确写法是派发时传入一个对象通过解构方式获取属性值正确写法addOrUpdateShopCar(context, {skuId, skuNum})注意点4: 问题理解异步函数async和await的用法 答案
async 函数 1)函数的返回值为Promise对象 2)Promise对象的结果由async函数执行的返回值决定await 表达式 1)await右侧的表达式一般为promise对象, 但也可以是其它的值 2)如果表达式是promise对象await就忙起来了它会阻塞函数后面的代码等着Promise对象resolve然后得到resolve的值作为await表达式的运算结果。 3)如果表达式是其它值, 直接将此值作为await的返回值async和await基于promise的。使用async的函数将会始终返回一个 promise 对象。这一点很重要要记住可能是你遇到容易犯错的地方。在使用await的时候我们只是暂停了函数而非整段代码。async和await是非阻塞的仍然可以使用 Promise例如Promise.all().注意 1)await必须写在async函数中, 但async函数中可以没有await 2)如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理
29.2addCartSuce 重难点说明区别使用sessionStorage与localStorage addCartSuce
查看详情查看购物车 效果如图 修改代码 拷贝src/pages/AddCartSuccess文件夹 src/router/routes.js import AddCartSuccess from /pages/AddCartSuccess
import ShopCart from /pages/ShopCart
{name: addCartSuccess,path: /addCartSuccess,component: AddCartSuccess,meta:{isShow: true} //自定义元数据属性判断Footer组件在底部是否显示
},
{name: shopCart,path: /shopCart,component: ShopCart,meta:{isShow: true} //自定义元数据属性判断Footer组件在底部是否显示
},src/pages/AddCartSuccess/index.vue img :srcskuInfo.skuDefaultImg
p classtitle{{skuInfo.skuName}}/p
p classattr{{skuInfo.skuDesc}} 数量{{$route.query.skuNum}}/p
router-link classsui-btn btn-xlarge :to/detail/${skuInfo.id}查看商品详情/router-link
router-link to/shopCart去购物车结算/router-linkcomputed: {skuInfo() {return JSON.parse(sessionStorage.getItem(SKUINFO))}
}注意点1 问题点击加入购物车按钮后跳转路由需要传参购物详情参数采用哪种方式queryparams 答案其实都可以但是最优雅的还是采用query方式具体效果看如下
首先是采用params方式地址栏显示的是地址字符串但组件中控制台打印居然也能正确解析说明能获取到参数但是URL看起来一大长串东西还是不优雅万一后续URL一顿追加参数岂不是越来越长根本不优雅。 而采用query方式地址栏很清爽所以推荐采用这种方式传参。 注意点2 问题参数传递采用本地存储好还是会话存储好 答案推荐采用会话存储localStorage本地存储会在硬盘保留一份需手动清除而sessionStorage会话存储随着浏览器窗口关闭就清楚了使用方便。
注意点3 问题无论是本地存储还是会话存储可以存对象吗 答案不能只能存json字符串直接存对象会无法解析。
存储存对象效果这东西无法解析 29.3购物车
购物车
购物车静态组件-需要修改样式结构删除第三项并调整css让各个项目对齐比例为15 35 10 17 10 13向服务器发送ajax请求获取购物车数据UUID临时游客身份动态展示购物车
29.3.1 向服务器发送ajax请求获取购物车数据
修改代码 src/api/index.js //获取购物车列表数据接口
//URL:/api/cart/cartList method:get
export const reqCartList ()requests({url:/cart/cartList ,method:get});src/store/index.js import shopCar from /store/shopCarmodules:{...shopCar}src/store/shopCar/index.js import {reqCartList} from /api;//shopCar模块的小仓库
//actions代表一系列动作可以书写自己的业务逻辑也可以处理异步
const actions {async reqCartList({commit}) {let response await reqCartList();if (response.code 200) {commit(REQ_CART_LIST, response.data)}},}
//mutations代表维护操作维护的是state中的数据且state中数据只能在mutations中处理
const mutations {REQ_CART_LIST(state, carList) {state.carList carList},
}
//state代表仓库中的数据
const state {//购物车列表carList: [],
}
//计算属性
//项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
const getters {carList(state) {return state.carList[0] || {};}
}//创建并暴露store
export default {actions,mutations,state,getters
}src/pages/ShopCart/index.vue methods: {getData() {this.$store.dispatch(reqCartList)},},
mounted() {this.getData()
}注意点1如图这一列多余删除第三项并调整css让各个项目对齐比例为15 35 10 17 10 13 注意点2 问题向服务器发送查询购物车ajax请求获取购物车数据为啥返回数据是空呢 答案因为你得带UUID的东西后端不知道你谁也就不知道把那条数据返回给你了。
29.3.2UUID临时游客身份
安装命令cnpm install --save uuid修改代码 src/utils/uuid_token.js import { v4 as uuidv4 } from uuid;
//要生成一个随机字符串且每次执行不能发生变化游客身份持久存储
export const getUUID (){//先从本地存储获取uuid看一下本地存储里面是否有let uuid_token localStorage.getItem(UUIDTOKEN);//如果没有if(!uuid_token){//我生成游客临时身份uuid_token uuidv4();//本地存储存储一次localStorage.setItem(UUIDTOKEN,uuid_token);}//切记有返回值,没有返回值undefinedreturn uuid_token;
}src/api/axios.js //在当前模块中引入store
import store from /store;
if(store.state.detail.uuid_token){//请求头添加一个字段(userTempId):和后台老师商量好了config.headers.userTempId store.state.detail.uuid_token;
}src/store/detail/index.js const state {//游客临时身份uuid_token: getUUID()
}注意点1 问题假设现在我有UUID了那如何传过去呢接口已经定义好了只有2个参数UUID咋传过去 答案可以放在请求头header中传递过去。
注意点2 问题我如何使用UUID第三方插件呢 答案登录npm官网https://www.npmjs.com/package/uuid搜索uuid下方就是使用方式。 注意点3切记UUID不能在vuex中生成因为vuex是每次触发就会随机生成会变动这是不行的正常应该是一次生成有效期内不改变。所以这个uuidv4()不能放在vuex中最好放在src目录下新建一个文件夹utils这个文件夹里面经常放一些常用的功能模块比如正则、临时身份UUID等等。
注意点4切记src/utils/uuid_token.js下封装的uuid方法一定要有返回值否则返回值是underfine无效的。
注意点5 问题在src/api/axios.js中现在需要给请求头header添加uuid但是uuid在vuex仓库中如何获取呢 答案在src/api/axios.js中引入import store from ‘/store’;通过store 对象可以获取仓库中的state属性。
29.3.3动态展示购物车
修改代码 src/pages/ShopCart/index.vue ul classcart-list v-for(car, index) in cartInfoList :keycar.id
input typecheckbox namechk_list :checkedcar.isChecked 1
div classitem-msg{{car.skuName}}/div
span classprice{{car.skuPrice}}.00/span
input autocompleteoff typetext :valuecar.skuNum minnum1 classitxt
span classsum{{car.skuNum * car.skuPrice}}/span
i classsummoney{{carTotalPrice}}/iimport {mapGetters} from vuex;
data() {return {totalPrice: 0}},computed: {...mapGetters([carList]),//购物车数据cartInfoList() {return this.carList.cartInfoList || []},//计算购买产品的总价carTotalPrice() {this.cartInfoList.forEach(item {this.totalPrice item.skuNum * item.skuPrice;})return this.totalPrice;},//判断底部复选框是否勾选【全部产品都选中采勾选】isAllChecked() {//遍历数组里面原理只要全部元素isChecked属性都为1真 true//只要有一个不是1假falsereturn this.cartInfoList.every(item item.isChecked 1)}}注意点1 问题查询购物车信息的接口方法放在哪里是放在“去购物车结算”按钮还是放在“购物车”页面加载完毕中定义 答案放在“购物车”页面加载完毕中定义只要购物车页面一初始化甭管哪个入口跳转进来的都能进行批量查询购物车数据并动态展示。
注意点2购物车左下角的全选按钮判断是否勾选推荐适用every而不是foreach方法
isAllChecked() {//遍历数组里面原理只要全部元素isChecked属性都为1真 true//只要有一个不是1假falsereturn this.cartInfoList.every(item item.isChecked 1)
}29.4修改购物车产品的数量需要发请求参数理解
修改代码 src/pages/ShopCart/index.vue li classcart-list-con5a hrefjavascript:void(0) classmins clickhandle(minus, -1, car)-/ainput autocompleteoff typetext :valuecar.skuNum minnum1 classitxt changehandle(change, $event.target.value * 1, car)a hrefjavascript:void(0) classplus clickhandle(add, 1, car)/a
/li//引入lodash:是把lodash全部封装好的函数全都引入进来了
//按需引入只是引入节流函数其他的函数没有引入模块这样做的好处是当你打包项目的时候体积会小一些
import throttle from lodash/throttle;
methods: {//修改某一个产品的个数[节流]handle: throttle(async function(flag, disNum, car) {//type:为了区分这三个元素//disNum形参: 变化量1 -变化量-1 input最终的个数并不是变化量//cart:哪一个产品【身上有id】//向服务器发请求修改数量switch (flag) {case add://加号disNum 1;break;case minus://判断产品的个数大于1才可以传递给服务器-1//如果出现产品的个数小于等于1传递给服务器个数0原封不动disNum car.skuNum 1 ? -1 : 0;break;case change:/*用户输入进来的最终量如果非法的带有汉字|出现负数带给服务器数字零* 问题为啥是disNum 1而不是disNum 1* 答案哪怕输入1也会走else里面的代码不影响功能所以无需加“”等于号*/if (isNaN(disNum) || disNum 1) {disNum 0;} else {//属于正常情况小数取证带给服务器变化的量 用户输入进来的 - 产品的起始个数disNum parseInt(disNum) - car.skuNum;}break;}try {//派发actionawait this.$store.dispatch(addOrUpdateShopCar, {skuId: car.skuId, skuNum: disNum})//再一次获取服务器最新的数据进行展示this.getData();} catch (error) {//失败alert(error.message);}}, 500),
}注意点1如图购物车中的【、-、输入值】都应该触发修改购物车接口且三个函数是同一个函数 注意点2 问题如何区分是点击了加号、减号、还是输入值呢 答案通过传参字符串flag标识名称进行区分。
注意点3 问题实际触发修改购物车接口的传值要注意。 答案点击“”号应传值1点击“-”号应传值-1点击输入值应传值输入值-原始值。
注意点4输入框中事件一定要写成change而不是click否则效果不对。
注意点5 问题对于“minus”情况为啥是disNum 1而不是disNum 1 答案哪怕输入1也会走else里面的代码不影响功能所以无需加“”等于号
注意点6点击减号“-”要加判断不能让值小于1。
case minus://判断产品的个数大于1才可以传递给服务器-1//如果出现产品的个数小于等于1传递给服务器个数0原封不动disNum car.skuNum 1 ? -1 : 0;break;注意点7对于“change”情况也要加判断
case change:/*用户输入进来的最终量如果非法的带有汉字|出现负数带给服务器数字零* 问题为啥是disNum 1而不是disNum 1* 答案哪怕输入1也会走else里面的代码不影响功能所以无需加“”等于号*/ if (isNaN(disNum) || disNum 1) {disNum 0;} else {//属于正常情况小数取证带给服务器变化的量 用户输入进来的 - 产品的起始个数disNum parseInt(disNum) - car.skuNum;}break;注意点8 问题连续点击居然能出现负数而慢慢点击就不会出问题为什么 答案因为没有加“节流”效果由于点击过快就会出现这种错误现象。 旧代码 //修改某一个产品的个数[节流]async handle(flag, disNum, car) {//type:为了区分这三个元素//disNum形参: 变化量1 -变化量-1 input最终的个数并不是变化量//cart:哪一个产品【身上有id】//向服务器发请求修改数量switch (flag) {case add://加号disNum 1;break;case minus://判断产品的个数大于1才可以传递给服务器-1//如果出现产品的个数小于等于1传递给服务器个数0原封不动disNum car.skuNum 1 ? -1 : 0;break;case change:/*用户输入进来的最终量如果非法的带有汉字|出现负数带给服务器数字零* 问题为啥是disNum 1而不是disNum 1* 答案哪怕输入1也会走else里面的代码不影响功能所以无需加“”等于号*/if (isNaN(disNum) || disNum 1) {disNum 0;} else {//属于正常情况小数取证带给服务器变化的量 用户输入进来的 - 产品的起始个数disNum parseInt(disNum) - car.skuNum;}break;}try {//派发actionawait this.$store.dispatch(addOrUpdateShopCar, {skuId: car.skuId, skuNum: disNum})//再一次获取服务器最新的数据进行展示this.getData();} catch (error) {//失败alert(error.message);}},修改后代码 //引入lodash:是把lodash全部封装好的函数全都引入进来了
//按需引入只是引入节流函数其他的函数没有引入模块这样做的好处是当你打包项目的时候体积会小一些
import throttle from lodash/throttle;//修改某一个产品的个数[节流]handle: throttle(async function(flag, disNum, car) {//type:为了区分这三个元素//disNum形参: 变化量1 -变化量-1 input最终的个数并不是变化量//cart:哪一个产品【身上有id】//向服务器发请求修改数量switch (flag) {case add://加号disNum 1;break;case minus://判断产品的个数大于1才可以传递给服务器-1//如果出现产品的个数小于等于1传递给服务器个数0原封不动disNum car.skuNum 1 ? -1 : 0;break;case change:/*用户输入进来的最终量如果非法的带有汉字|出现负数带给服务器数字零* 问题为啥是disNum 1而不是disNum 1* 答案哪怕输入1也会走else里面的代码不影响功能所以无需加“”等于号*/if (isNaN(disNum) || disNum 1) {disNum 0;} else {//属于正常情况小数取证带给服务器变化的量 用户输入进来的 - 产品的起始个数disNum parseInt(disNum) - car.skuNum;}break;}try {//派发actionawait this.$store.dispatch(addOrUpdateShopCar, {skuId: car.skuId, skuNum: disNum})//再一次获取服务器最新的数据进行展示this.getData();} catch (error) {//失败alert(error.message);}}, 500),29.5删除某一产品
修改代码 app/src/api/index.js //删除购物产品的接口
//URL:/api/cart/deleteCart/{skuId} method:DELETE
export const reqDeleteCartById (skuId)requests({url:/cart/deleteCart/${skuId},method:delete});src/store/shopCar/index.js import {reqDeleteCartById} from /api;const actions {//删除购物车某一个产品async reqDeleteCartById({commit}, skuId) {let response await reqDeleteCartById(skuId);if (response.code 200) {//返回的是成功的标记return OK;} else {//返回的是失败的标记return Promise.reject(new Error(fail))}}
}src/pages/ShopCart/index.vue a classsindelet clickreqDeleteCartById(car.skuId)删除/a//删除某一个产品的操作
async reqDeleteCartById(skuId) {try {//派发actionawait this.$store.dispatch(reqDeleteCartById, skuId)this.getData();} catch (error) {alert(error.message)}
}29.6修改产品状态
修改代码 app/src/api/index.js //修改商品的选中状态
//URL:/api/cart/checkCart/{skuId}/{isChecked} method:get
export const reqUpdateCheckedByid (skuId,isChecked)requests({url:/cart/checkCart/${skuId}/${isChecked},method:get});src/store/shopCar/index.js import {reqUpdateCheckedByid} from /api;const actions {//修改购物车某一个产品的选中状态async reqUpdateCheckedByid({commit}, {skuId,isChecked}) {let response await reqUpdateCheckedByid(skuId,isChecked);if (response.code 200) {//返回的是成功的标记return OK;} else {//返回的是失败的标记return Promise.reject(new Error(fail))}},
}src/pages/ShopCart/index.vue input typecheckbox namechk_list :checkedcar.isChecked 1 changereqUpdateCheckedByid(car.skuId, $event)//修改某个产品的勾选状态async reqUpdateCheckedByid(skuId, event) {try {//如果修改数据成功再次获取服务器数据购物车let isChecked event.target.checked ? 1 : 0;//派发actionawait this.$store.dispatch(reqUpdateCheckedByid, {skuId: skuId, isChecked})this.getData();} catch (error) {alert(error.message)}},29.7删除全部选中的商品
修改代码 src/pages/ShopCart/index.vue a clickdeleteAllCheckedCar删除选中的商品/a//删除全部选中的产品
//这个回调函数咱门没办法手机到一些有用数据
async deleteAllCheckedCar() {try {//成功//派发一个actionawait this.$store.dispatch(deleteAllCheckedCar)//再发请求获取购物车列表this.getData()} catch (error) {//失败alert(error.message)}
}src/store/shopCar/index.js //删除全部勾选的产品
async deleteAllCheckedCar({dispatch, getters}) {//context:小仓库commit【提交mutations修改state】 getters【计算属性】 dispatch【派发action】 state【当前仓库数据】//获取购物车中全部的产品是一个数组let primoseAll [];getters.carList.cartInfoList.forEach(item {let promise item.isChecked 1 ? dispatch(reqDeleteCartById, item.skuId) : ;//将每一次返回的Promise添加到数组当中primoseAll.push(promise);})//只要全部的p1|p2....都成功返回结果即为成功//如果有一个失败返回即为失败结果return Promise.all(primoseAll);}注意点1接口API未提供选中删除的功能只提供了单独删除的所以可以采用批量循环删除的方式。
注意点2dispatch派发不仅可以存在于vue中使用也可以在vuex仓库中使用
注意点3vuex仓库中的context包含很多东西包括【commit、dispatch、getters、state…】具体如图 注意点4Promise.all用法all里面的是个数组如果其中的子项promise有一个失败返回即为失败结果。具体用法如下
let primoseAll [];
let promise item.isChecked 1 ? dispatch(reqDeleteCartById, item.skuId) : ;
//将每一次返回的Promise添加到数组当中
primoseAll.push(promise);
//只要全部的p1|p2....都成功返回结果即为成功
//如果有一个失败返回即为失败结果
return Promise.all(primoseAll);29.8全选操作
修改代码 src/pages/ShopCart/index.vue input classchooseAll typecheckbox :checkedisAllChecked cartInfoList.length 0 clickupdateAllCheckedCar($event.target.checked)//修改全部产品的选中状态
async updateAllCheckedCar(checked) {try {//成功//派发一个actionlet isChecked checked ? 1 : 0;await this.$store.dispatch(updateAllCheckedCar, isChecked)//再发请求获取购物车列表this.getData()} catch (error) {//失败alert(error.message)}
},src/store/shopCar/index.js //修改全部产品的状态
async updateAllCheckedCar({dispatch, getters}, isChecked) {//context:小仓库commit【提交mutations修改state】 getters【计算属性】 dispatch【派发action】 state【当前仓库数据】//获取购物车中全部的产品是一个数组let primoseAll [];getters.carList.cartInfoList.forEach(item {let promise dispatch(reqUpdateCheckedByid, {skuId:item.skuId, isChecked});//将每一次返回的Promise添加到数组当中primoseAll.push(promise);})//只要全部的p1|p2....都成功返回结果即为成功//如果有一个失败返回即为失败结果return Promise.all(primoseAll);}注意点1全选或全不选后的正确效果如图 注意点2 问题全部删除后左下角的勾选按钮居然还是选中状态需要优化 答案在后面多补充个cartInfoList.length 0判断条件即可
:checkedisAllChecked cartInfoList.length 0本人其他相关文章链接
1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示开发Search组件】 2.vue尚品汇商城项目-day04【25.面包屑处理关键字】 3.vue尚品汇商城项目-day04【26.排序操作难点】 4.vue尚品汇商城项目-day04【27.分页器静态组件难点】 5.vue尚品汇商城项目-day04【28.详情页面Detail】 6.vue尚品汇商城项目-day04【29.加入购物车操作难点】
