![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
电商平台项目
文章平均质量分 88
小婵婵不怕鬼
努力学好前端
展开
-
Vue项目流程8,导航守卫的使用,图片懒加载,利用vee-validate实现表单验证,路由懒加载,打包并处理map文件
/Vue插件一定暴露一个对象 let myPlugins = {//Vue.prototype.$bus:任何组件都可以使用 //Vue.directive //Vue.component Vue . directive(options . name ,(element , params) => {此插件的使用方法与图片懒加载方法一样。原创 2022-09-04 16:38:57 · 396 阅读 · 0 评论 -
Vue项目流程7,交易页面,提交订单,支付页面,利用element UI 以及 QRCode 完成微信支付,弹出框按钮的相关工作,个人中心以及子路由我的订单
此时需要使用到定时器,当用户没有支付即服务器返回的是未支付成功,此时需要一直向服务器发送请求,直到支付完成或是取消支付。4、二维码生成之后需要知道成功或失败,如果支付成功就路由跳转如果支付失败弹出提示信息,所以此时需要向服务器发请求。React(Vue):antd[PC端]----antd-mobile[移动端]2、点击提交订单时,还需要向服务器发起一次请求并将支付的信息传递给服务器。Vue:ElementUI[PC端]----vant[移动端](3)路由跳转时派发action,即交易页面挂载完毕。原创 2022-09-02 20:36:49 · 2309 阅读 · 0 评论 -
Vue项目流程6,登录与注册,完成获取验证码,登录跳转,利用token获取用户信息,退出登录等功能,利用导航守卫在路由跳转之间进行判断
当未发起请求时,state中的token无法在本地中找到,即为null。当第一次发起请求即登录成功之后,token就已经本地存储了,当再次刷新时state中的token可以获得本地存储的token,所以再次刷新仍有token。登录成功时,后台为了区分这个用户是谁,服务器会下发token【令牌:唯一标识】,一般会持久化存储token,再带着token找服务器要用的信息进行展示。获取验证码的这个接口,把验证码返回,但是正常情况后台把验证码发到用户手机上。6、当获取到token时持久化存储token。...原创 2022-08-29 16:39:32 · 1397 阅读 · 1 评论 -
Vue项目流程5,TheDetail和购物车页面的获取数据,Vuex三连环,动态展示等操作,利用swiper制作轮播图,制作放大镜,加入购物车的功能,购物车页面的各功能的实现
5、路由跳转时需将产品信息带给下一个路由组件,简单的信息如skuNum通过query形式传递过去,比较复杂的产品信息如skuInfo,通过会话存储。此时并不能获取到购物车的数据,因为服务器不知道你是谁,此时需要用到uuid临时游客身份,即在加入购物车的瞬间高速浏览器你的uuid。接口仍是使用加入购物车的接口,返回修改产品的skuId和变化值,正数为加,负数为减。注意:存储功能一般存储的是字符串,要将对象转化成字符串进行存储,在使用时再将得到的字符串转换成对象。5、Vuex三连环,获取购物车数据。...原创 2022-08-27 00:15:29 · 423 阅读 · 0 评论 -
Vue项目流程4,TheSearch模块开发,getters的使用,带给服务器的参数,实现可以再次发送请求,分类、搜索框、品牌信息、属性面包屑,排序操作,分页器的相关步骤
点击了品牌,需要整理参数,向服务器发送请求获取相应的数据进行显示,此时应该在父组件TheSearch发送请求,父组件中的searchParams参数带给服务器参数,子组件需要将点击的品牌信息传递给父组件。当用户点击删除时,则categoryName和各级Id的赋值为undefined,由于所带参数过多占宽带,所以选择赋值为undefined,即没有值的参数不被携带。如果用户网络出现问题,此时服务器还未返回数据,但是已经开始遍历了,此时返回的可能是一个undifined,所以此时需要给用户返回一个空数组。原创 2022-08-22 18:53:56 · 294 阅读 · 0 评论 -
Vue项目流程3,TheSearch模块中商品分类与过渡动画,全部商品分类优化,合并参数,mock,完成轮播图,swiper基本使用,watch+nextTick解决问题,将轮播图拆分为公用的全局组件
然而这次的请求不是在TheFloor当中发送,而是TheHome中发送请求,当初始化实例时,数据已经完全得到了,所以在mounted可以写。getFloorList的action需要在TheHome组件当中发,不能在TheFloor组件内部发,因为需要v-for遍历TheFloor组件。3、把mock数据需要的图片放置到public文件夹中【public文件夹会把相应的资源原封不动到dist文件夹中】将TypeNav组件里的发送请求数据的代码移到App组件中,无论使用TypeNav多少次,请求只发送一次。.原创 2022-08-18 01:30:30 · 270 阅读 · 0 评论 -
Vue项目流程2,axios二次封装,接口统一管理,nprogress使用,vuex模块式开发,三级联动展示数据业务,JS控制二三级商品分类的显示与隐藏,防抖与节流,三级联动组件路由跳转与传递参数
正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)切记,并不是全部项目都需要Vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多、数据很多,数据维护很费劲。防抖:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发只会执行一次。使用声名式导航,当点击各个标签时,会产生很多组件实例,耗用内存,导致卡顿现象。actions:处理action,可以书写自己的业务逻辑,也可以处理异步。...原创 2022-08-16 02:33:55 · 444 阅读 · 0 评论 -
Vue项目流程1,vue-cli脚手架初始化项目,项目的其他配置,路由组件的搭建,TheFooter组件显示与隐藏,路由传参相关面试题,重写push与replace方法,以及相关我遇到的问题及解决办法
node_modules文件夹:项目依赖文件夹。public文件夹:一般放置一些静态资源(图片),需要注意,放在public文件 夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中。src文件夹(程序员源代码文件夹):assets文件夹:一般也是放置的静态资源(一般放置多个组件共用的静态资源),需要注意,放置在assets文件夹里面的静态资源,在webpack打包的时候,webpack会把静态资源当作一个模块打包到JS文件里面。......原创 2022-08-14 00:52:20 · 354 阅读 · 0 评论