【智慧商城 | 项目笔记】第六天

前言智慧商城项目是关于前端的Vue2的项目本系列文章我讲总结我从这个项目中学到的知识点写项目笔记。如果你也在初学Vue或想巩固Vue相关的知识希望这系列文章可以帮助到你。【智慧商城 | 项目笔记】第六天今日完结今日收获1.实现封装通用接口适配多业务场景2.mixins复用 - 处理登录确认框的弹出3.Vuex 跨模块调用 mutation4.打包发布5.打包优化 - 路径懒加载总结今日完结获取收货地址列表渲染通用接口封装和购物车结算立刻购买结算和mixin混入处理完成订单管理和个人中心页面打包今日收获1.实现封装通用接口适配多业务场景当我们在购物车页面或立即购买页面点击购买时都会跳转到支付界面此时我们可以封装通用的订单信息确认接口避免重复写接口调用逻辑这里跟之前封装接口不同的是两个页面传递的参数个数不一样此时我们可以用扩展运算符 …obj 接收不同场景的专属参数购物车传 cartIds立即购买传 goodsId/skuId 等通用接口importrequestfrom/utils/request// 提交订单// mode: cart obj { cartIds, remark } 购物车// mode: buyNow obj { goodsId, goodsNum, goodsSkuId, remark } 立即购买exportconstcheckOrder(mode,obj){returnrequest.get(/checkout/order,{mode,delivery:10,// 10 快递配送couponId:0,// 优惠券isUsePoints:0,// 积分payType:10,// 余额支付...obj})}跳转传递查询参数cart.vuegoPay(){if(this.selCount0){this.$router.push({path:/pay,query:{mode:cart,cartId:this.selCartList.map(itemitem.id).join(,)}})}}跳转传递查询参数prodetail.vuegoBuyNow(){this.$router.push({path:/pay,query:{mode:buyNow,goodsId:this.goodsId,goodsSkuId:this.detail.skuList[0].goods_sku_id,goodsNum:this.addCount}})}在pay.vue中通过$route.query获取参数mode(){returnthis.$route.query.mode},cartIds(){returnthis.$route.query.cartIds},goodsId(){returnthis.$route.query.goodsId},goodsSkuId(){returnthis.$route.query.goodsSkuId},goodsNum(){returnthis.$route.query.goodsNum}基于请求携带参数法请求渲染asyncgetOrderList(){if(this.modecart){const{data:{order,personal}}awaitcheckOrder(this.mode,{cartIds:this.cartIds})this.orderorderthis.personalpersonal}if(this.modebuyNow){const{data:{order,personal}}awaitcheckOrder(this.mode,{goodsId:this.goodsId,goodsSkuId:this.goodsSkuId,goodsNum:this.goodsNum})this.orderorderthis.personalpersonal}}2.mixins复用 - 处理登录确认框的弹出概念Vue 的 Mixin混入是一种组件复用机制可以将多个组件共用的配置项data、methods、生命周期等抽离成独立文件通过 mixins 配置注入到组件中实现代码复用避免重复编写相同逻辑如本例中多个按钮点击前的登录校验。1.建立一个单独的文件夹mixnis在里面编写loginConfirm.js文件exportdefault{// 此处编写的就是 Vue组件实例的 配置项通过一定语法可以直接混入到组件内部// data methods computed 生命周期函数 ...// 注意点// 1. 如果此处 和 组件内提供了同名的 data 或 methods 则组件内优先级更高// 2. 如果编写了生命周期函数则mixins中的生命周期函数 和 页面的生命周期函数// 会用数组管理统一执行methods:{// 根据登录状态判断是否需要显示登录确认框// 1. 如果未登录 显示确认框 返回 true// 2. 如果已登录 啥也不干 返回 falseloginConfirm(){// 判断 token 是否存在if(!this.$store.getters.token){// 弹确认框this.$dialog.confirm({title:温馨提示,message:此时需要先登录才能继续操作哦,confirmButtonText:去登陆,cancelButtonText:再逛逛}).then((){this.$router.replace({path:/login,query:{backUrl:this.$route.fullPath}})}).catch((){})returntrue}returnfalse}}}在需要用到登录校验的组件中引入importloginConfirmfrom/mixins/loginConfirmexportdefault{mixins:[loginConfirm],}asyncaddCart(){if(this.loginConfirm()){return}....},goBuyNow(){if(this.loginConfirm()){return}...}3.Vuex 跨模块调用 mutation因为Vuex 为了模块化管理状态会将不同业务的 state/mutation/action 拆分到不同模块Module中比如本例中用户模块、购物车 cart 模块。默认情况下模块内部的 mutation/action 是命名空间隔离的组件或其他模块无法直接调用需通过特定语法实现跨模块调用。actions:{logout(context){// 1. 调用当前模块的 mutation无需特殊配置context.commit(setUserInfo,{})// 2. 跨模块调用 cart 模块的 mutation核心代码// 语法context.commit(模块名/mutation名, 载荷, { root: true })context.commit(cart/setCartList,{},{root:true})}}4.打包发布当一个项目我们要上线发布时就要进行打包。打包的作用1.解决 “浏览器看不懂” 的问题兼容性 语法转换比如语法转换把 ES6 转成 ES5把 .vue/.jsx 转成浏览器能解析的原生 JS/CSS/HTML2.优化性能减小体积 提升加载速度3.整合资源统一管理 简化部署4.提升开发效率构建流程自动化5.适配不同环境环境隔离打包命令yarn build打包结果在项目的根目录会自动创建一个文件夹’dist’dist中的文件就是打包后的文件只需要放在服务器中即可。打包配置默认情况下需要放在服务器根目录打开如果希望双击运行需要配置publicPath配成相对路径const{defineConfig}require(vue/cli-service)module.exportsdefineConfig({publicPath:./,transpileDependencies:true})5.打包优化 - 路径懒加载说明:当打包构建应用时JavaScript包会变的非常大影响页面加载如果我们能把不同路由对应的组件分割成不同的代码块然后当路由被访问的时候才加载对应组件这样就更高效了。步骤异步组件改造constSearch()import(/views/search/index)constSearchList()import(/views/search/list)constProDetail()import(/views/prodetail/index)constMyOrder()import(/views/myorder/index)路由中应用{path:/search,component:Search},{path:/searchlist,component:SearchList},{path:/prodetail/:id,component:ProDetail},{path:/myorder,component:MyOrder}总结通过学习这个智慧商城项目给我的零碎知识之间都建立起来的联系也学到了很多好用的东西从之前只会打单个知识点的代码到现在可以把知识点整合起来写项目对我收获很大希望你通过我的这系列文章也有所收获感谢你的阅读。如果我的内容对你有帮助请点赞评论收藏。创作不易大家的支持就是我坚持下去的动力