位置: IT常识 - 正文

vue大型电商项目尚品汇(前台篇)day02(vue大型项目架构设计)

编辑:rootadmin
现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了。 而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex、router这些都是必备的,后期一定要练得非常熟练才行。 一.重写push/replace方法 有一个编程式导航的bug,当 ...

推荐整理分享vue大型电商项目尚品汇(前台篇)day02(vue大型项目架构设计),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue商城项目实战,vue网上商城项目,vue适合做电商网站么,vue电商app的项目难点,vue网上商城项目,vue适合做电商网站么,vue电商项目完整版,vue电商app的项目难点,内容如对您有帮助,希望把文章链接给更多的朋友!

现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了。而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex、router这些都是必备的,后期一定要练得非常熟练才行。

一.重写push/replace方法

有一个编程式导航的bug,当我们重复点击编程时导航的跳转,同时传的都是相同的参数,这个时候就会报错,报NavigationDuplicated,这是一个底层错误,归根结底是因为vue在2的版本将编程式导航跳转的添加了一个 promise,我们都知道promise是需要一个成功回调和失败回调的,而我们在发起跳转的时候并没有定义这些,所以会报错

所有有一个简单粗暴的解决办法,就是在后面添加两个回调函数,甚至你可以参数都不写,反正回调已经有了,无非就是你不打印输出也不做什么逻辑的事情

但是这种方法治标不治本,万一有很多路由的跳转,那是不是每一个跳转这里都要去写一下这两个回调,显然是不可能的。

要治标治本,首先得弄清楚几个问题,我们的$router其实是VueRouter这个构造函数new出来的实例,然后我们的push、replace方法其实是在这个构造函数的prototype也就是原型对象上,所以我们的push方法里面的this指向的就是VueRouter的对象实例

下面就可以开始重写了,要找到VueRouter所在的地方,也就是router的配置文件,这里面注册了他一下,首先我们需要定义一个变量将原来的VueRouter原型对象上的push方法保存下来,然后开始重写,可以看到我们的原始push方法是要传入是三个参数,第一个是跳转的位置,后面两个是promise的回调

所以我们可以判断一下我们传进来的参数除了location之外有没有两个回调,做一个if判断,如果有就执行你的回调,如果没有我就自动写上两个回调,这里还有一个注意点,我们之前分析过push的this是构造函数实例,你如果直接像下面这样调用,很明显你里面的this都会指向window,因为这个变量是在全局作用域下定义的

所以通过call方法将this改回来,幸运的是,此时这个push方法里面的this就是我们的构造函数实例

replace同理

二.Home模块组件拆分

又是进行模块拆分的时候,所以首先要完成静态页面,再进行模块拆分,然后是动态数据展示,最后是一些事件的完成。对于Home模块

首先是一个三级联动效果,而且由于是home、search都有的,所以这个组件可以注册为全局组件

然后轮播图是一个组件

今日推荐一个组件

热卖排行一个组件

猜你喜欢一个组件

家用电器一个组件,后面的手机通讯跟其一样的结构,所以可以复用

最后各商品的log一个组件

所以一共有七个组件

1.TypeNav三级联动全局组件

直接在Home文件夹下面创建一个文件夹typenav作为我们的三级联动组件

静态页面创建好

然后就可以去注册全局组件了,在入口文件注册,前面是我们的组件标签名字,后面是我们的组件所在的位置

因为是全局组件,所以其他组件要用直接用,不用再去注册导入

2.剩下静态组件

在Home下创建对应的组件文件夹,然后创建组件复制对应的html+css+图片,导入到home并注册即可,要注意这里这是完成静态页面,所有的逻辑包括轮播图等,这些都暂时不要管

三.axios相关配置1.axios二次封装

为什么要对axios进行二次封装?

其主要目的是为了请求拦截器和响应拦截器,其中请求拦截器就是当我们发起请求之前可以处理一些业务;响应拦截器就是当我们的数据响应回来的时候可以处理一些业务

首先我们一般是在src下面创建一个api的文件夹里面存放一些axios的配置文件

首先在api下创建一个request关于请求的axios配置文件

先通过axios的create方法可以创建一个axios的自定义实例,其中里面的 baseurl会自动加在以后配置axios时的url前面,就不用再去输入一些大家都有的前缀了,timeout就不用说了,xhr2新特性

添加请求和响应拦截器可以直接参考axios中文文档

这里面 config是我们的请求头,必须原样返回,Promise.reject()是promise的一个方法,专门返回一个错误的promise对象至于这里为什么要返回一个promise对象(因为我们封装了之后后面发起ajax请求都是用requests来发起,我们的axios最典型的特点就是promise风格,所以由.then方法),然后我们只要返回成功的data数据直接在这里响应拦截器返回成功的数据返回data

不用去记,文档里面有,但是要懂写的什么。这样一配置过后,在请求和响应被then或者catch之前就会被拦截到了

vue大型电商项目尚品汇(前台篇)day02(vue大型项目架构设计)

2.接口统一管理

当我们项目比较小的时候完全可以在mounted生命周期函数来发起ajax请求。

但是如果我们项目比较大的时候,每个都去他的mounted去发,如果接口地址一变化,又要每个去改就不太现实。

所以这里采用接口统一管理,一般是定义在api文件夹下的index.js文件

我们先来获取三级联动的数据,当我们在前面axios二次封装的时候,就已经创建了一个axios的实例,这个实例才拥有拦截器的功能,所以我们后面要使用拦截器发起请求就只能靠这个实例来发起,还有我们已经添加了baseurl所以在写url的时候可以不写api了

像这样我们就可以去测试一下了,如果要发起获取三级联动的请求,就直接调用函数即可,注意这里是按需导出

结果是报错404,因为我们从始至终都还没有配置过服务器的地址,这里两个解决方案

方案一:将前面的baseurl添加上服务器地址

方案二:(推荐),用到我们的vue专门用来处理服务器的一个配置项,代理。

这样配置过后,当我们发起axios请求,并且路径当中含有/api的话, 就会自动去这个服务器找/api下面的这些资源,我们原来做代理还有一个配置项pathWrite一个正则替换为空字符串,这个的意思是绕过public下面的同名配置文件,但是服务器里面没有这个pathwrite的目录所以要替换为空,但是我们这里服务器里面有api的目录就不用去替换了

3.nprogress进度条使用

首先需要明确一点,这个进度条是我们刷新网页也就是获取请求的时候发起的,所以说我们可以把进度条的逻辑写在请求和响应的拦截器里面,这也是第一次使用拦截器,知道了拦截器的处理一些事件的逻辑是写在这个拦截器里面

安装导入,并且他有两个方法,start和done分别表示什么时候开始,什么时候结束,并且还需要导入他的样式

四.vuex模块式开发

vuex是来帮我们管理数据的,当一个项目过大时,不仅是要用vuex来帮我们管理数据,而且还需要分模块来管理数据,这里就不多介绍了,前面已经介绍过了,直接说怎么来分,一般是先安装vuex然后创建一个store文件夹,里面有一个总得vuex配置文件index.js,因为他是一个插件,所以需要注册,然后这里直接采用模块化开发。

在store创建文件夹home、search代表两个模块

然后在我们的主store里面导入并且暴露,注意暴露要添加一个配置项 modules

最后还有一点在入口文件导入store并且放到vm里面去

五.三级联动数据业务

做好了前面的这些前置工作,就可以开始第二步,动态数据的渲染,这里三级联动的nav需要通过vuex来处理处理,所以要dispatch到actions,而且应该是页面一刷新就有,所以直接写在mounted生命周期函数里

开始之前,有个主意事项,我们之前是把TypeNav这个组件写在Home这个路由组件里面的,全局组件一般写在Components里面,所以交换一下位置

这里就不用传值了,我们要在home模块的actions里面去发起ajax请求,然后我们前面接口统一管理,已经做好了获取三级联动的函数,所以这里直接导入,然后调用

接下来重点来了,我们封装的这个函数是做了一个拦截器,到后导入的这个拦截器,但是我们的拦截器requests他也是axios的一个实例,所以axios得到的结果是promise对象,所以requests出来的结果也是promise对象,所以我们的这个函数的返回结果也是promise对象

虽然我们封装拦截器的时候,在响应拦截器里面写了一些逻辑比如如果是成功,就直接返回data这个数据,但是这是回调里面写的,意思就是要用then的方法,你就可以直接读取data,而我们这里返回的是那个promise对象,这里重点来了,利用async和await提取我们要的数据,首先await放在一个promise前面一个作用是他会等待所有的promise异步处理完,第二个是他可以提取而且只能提取promise里面成功的回调函数的结果,然后我们的async就是会把不管正常函数还是promise对象都变成promise对象,所以他们两个经常一起使用,最终得到的结果就是这个promise成功的回调函数的结果,注意区别一下.then获取到的结果就是data,而这里就是成功返回的那整个对象

注意,我这里在组件里面获取数据,之前说用mapstate要用简写方法,还需要在vuex的模块里面加入配置项namespaced

这里真的搞了半天,终于找到解决办法了,首先这种情况我们的namespaced写在导出处

其次很重要的一点,当我们做了模块化又写了命名空间后,我们的dispatch需要写对应的目录才能够找到这个actions

现在有了数据,根据结构去列表渲染即可

1.js完成动态背景颜色

鼠标滑过有动态有背景颜色,不通过css,通过js来完成,这里的核心在于,我们列表渲染的时候有一个index,同时定义一个数据currentIndex,当我们鼠标滑过哪一个就把这个一个index赋值给currentIndex,重点逻辑在于给标题绑定一个:class也就是动态的绑定class,里面写一个对象前面是属性名,后面为逻辑当index=currentIndex,为true,你这个才会有class

再添加一个鼠标离开事件,将currentIndex改为-1即可,一开始currentIndex不能为任何一个已有的index。

但是这里还有一个需求,鼠标不是离开标题就没有背景颜色了,包括上面的全部商品分类离开之后才会消失背景颜色

商品分类和我们的三级联动是同级

这里把他们添加一个共同的父级,通过事件委托,把鼠标移出事件给到他们的父级,移出他们都会通过冒泡去触发这个移出事件

2.js完成二三级分类显示隐藏

找到二级分类代码处,来一个style动态绑定并且值为一个三目表达式,看current是否等于你这个index,是就返回block,否则返回none

这两个事件用css都可以完成,但是js有js的好处,比如现在我鼠标移到全部商品分类,这个二级分类还是在的,这个用css实现起来好像也可以,但是有点不太符合语义化,感觉有点强制性

本文链接地址:https://www.jiuchutong.com/zhishi/304531.html 转载请保留说明!

上一篇:vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机)

下一篇:帝国cms怎么更新(帝国cms配置数据库)

  • 荣耀magic3至臻版怎么设置熄屏显示(荣耀magic3至臻版参数配置详情)

    荣耀magic3至臻版怎么设置熄屏显示(荣耀magic3至臻版参数配置详情)

  • 爱奇艺怎么二维码登录(爱奇艺怎么二维码登会员)

    爱奇艺怎么二维码登录(爱奇艺怎么二维码登会员)

  • 朋友圈发过的怎么编辑(朋友圈发过的怎么删除)

    朋友圈发过的怎么编辑(朋友圈发过的怎么删除)

  • 苹果11怎么关闭横屏(苹果11怎么关闭屏幕自动调节亮度)

    苹果11怎么关闭横屏(苹果11怎么关闭屏幕自动调节亮度)

  • 全贴合屏幕和非全贴合屏幕对比(全贴合屏幕和非全贴合)

    全贴合屏幕和非全贴合屏幕对比(全贴合屏幕和非全贴合)

  • 微信消息延迟几个小时(微信消息延迟几个小时怎么回事)

    微信消息延迟几个小时(微信消息延迟几个小时怎么回事)

  • 华为手机花屏显示竖条(华为手机花屏显示竖条无法使用)

    华为手机花屏显示竖条(华为手机花屏显示竖条无法使用)

  • 华为微信聊天如何到顶置(华为微信聊天如何开启美颜)

    华为微信聊天如何到顶置(华为微信聊天如何开启美颜)

  • ios电池健康剩多少可以换电池(iphone电池健康容量多久掉1%)

    ios电池健康剩多少可以换电池(iphone电池健康容量多久掉1%)

  • 拼多多退货申请撤销后还能再申请吗(拼多多退货申请次数上限怎么办)

    拼多多退货申请撤销后还能再申请吗(拼多多退货申请次数上限怎么办)

  • 微信解封发nu啥意思(微信解封后别人发的消息能看见吗)

    微信解封发nu啥意思(微信解封后别人发的消息能看见吗)

  • 华为nova7如何长截屏(华为nova7怎么这么长)

    华为nova7如何长截屏(华为nova7怎么这么长)

  • 没信号为什么说通话中(没信号为什么说关机)

    没信号为什么说通话中(没信号为什么说关机)

  • 微信夜间模式怎么关(微信夜间模式怎么开)

    微信夜间模式怎么关(微信夜间模式怎么开)

  • 电话阻止来电能收到对方的信息吗(电话阻止来电能收到对方电话怎么提醒)

    电话阻止来电能收到对方的信息吗(电话阻止来电能收到对方电话怎么提醒)

  • microsoft是干嘛的(microsoft干嘛的?)

    microsoft是干嘛的(microsoft干嘛的?)

  • 抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

    抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

  • 手机屏幕残留程序影子(手机屏幕残留程序影子vivo)

    手机屏幕残留程序影子(手机屏幕残留程序影子vivo)

  • ddr4和ddr5的区别(电脑内存条ddr4和ddr5的区别)

    ddr4和ddr5的区别(电脑内存条ddr4和ddr5的区别)

  • 快手小店关闭后多久能开通(快手小店关闭后还可以带货吗)

    快手小店关闭后多久能开通(快手小店关闭后还可以带货吗)

  • 拼多多无需物流点哪里(拼多多无需物流怎么发货)

    拼多多无需物流点哪里(拼多多无需物流怎么发货)

  • b站怎么缓存视频(b站怎么缓存视频到本地相册)

    b站怎么缓存视频(b站怎么缓存视频到本地相册)

  • 校招sp和ssp是什么意思(校招sp和ssp全称)

    校招sp和ssp是什么意思(校招sp和ssp全称)

  • 快手发现怎么换类型(快手发现怎么换成精选)

    快手发现怎么换类型(快手发现怎么换成精选)

  • 三星9650是什么型号(三星9650是什么手机)

    三星9650是什么型号(三星9650是什么手机)

  • 热点2.4ghz和5ghz的区别(热点2.4ghz和5ghz哪个网速稳定)

    热点2.4ghz和5ghz的区别(热点2.4ghz和5ghz哪个网速稳定)

  • AI 生成二次元女孩,免费云端部署(仅需5分钟)(ai生成二次元角色全身)

    AI 生成二次元女孩,免费云端部署(仅需5分钟)(ai生成二次元角色全身)

  • 汇算清缴时发现去年的成本少确认了报表怎么填列
  • 冲红凭证更正时摘要怎么写
  • 金税四期的到来意味着什么
  • 个人所得税申报操作流程
  • 新会计准则 预付房租怎么做账
  • 期末现金及现金等价物余额公式
  • 公司税务状态变更怎么办
  • 加计抵减申报表填写说明
  • 委托贷款的资金借出方是谁
  • 住宿费专票可以报销吗
  • 企业注销合适还是转让出去合适
  • 发票认证了还能退回吗
  • 增值税零申报什么意思
  • 股东投入固定资产进来怎么做账
  • 企业拨缴工会经费申报后税务机关需要审核吗
  • 地税附加税减免政策
  • 小规模纳税人附加税会计分录
  • 研发费用研究阶段的支出计入
  • 个人公益性捐赠全额还是限额
  • 商标设计人享有著作吗
  • 个人借单位的钱要交税吗
  • 员工个税需要计提吗现在
  • win11电脑下载的软件桌面没有图标怎么办
  • win10如何获得管理员权限修改文件
  • 合同印花税会计分录
  • 出口暂定关税
  • 办公室椅子固定
  • php过滤emoji
  • 办公费用减少的原因
  • 最值钱的苹果
  • 新制度下财政拨款是什么
  • php验证码扭曲效果怎么做
  • 招待费计入哪里
  • html的论文
  • 转入固定资产清理会计科目
  • 分页显示怎么实现
  • javascript动画教程
  • wordpress图片模板
  • 购入固定资产的会计处理
  • mysqlbinlog -vvv
  • 进项税额抵减额怎么算
  • 审计符合性测试
  • 法定盈余公积的作用
  • 预缴所得税年底处理账务吗
  • sqlserver聚集函数
  • 小企业会计准则和一般企业会计准则的区别
  • 使用SQL语句创建一个名为:bookdb的数据库
  • 税控盘是什么会计科目
  • 上月暂估成本次月用冲回吗
  • 融资租入固定资产的入账价值
  • 经费开支要求
  • 摊销费用用什么凭证
  • 支付宝电子发票怎么开
  • 在保险中,保险利益的载体是
  • 出口单证不齐责令整改可以处
  • 网上认证平台进不去怎么办
  • 坏账准备转回是什么意思
  • 辅助生产成本如何结转
  • sqlserver性能优化5种方式
  • mac安装surge
  • windows server 2016 自动登录
  • 将哪一linux文件系统引入
  • 系统问题怎么处理
  • mac版cad2022使用教程
  • mac电脑登录
  • mysqld-nt.exe - mysqld-nt是什么进程 有什么用
  • win8怎么打开蓝牙设置
  • win1010586升级到最新
  • 炉石传说用什么开发的
  • linux怎么调用python
  • nodejs bff
  • shell脚本编写的基本知识
  • centos6安装python
  • unity自带的ui叫什么
  • unity3d功能介绍
  • js进阶视频教程
  • 可扩展的敏捷方法有哪两种观点,并作以简单阐述?
  • 纳税工会经费申请怎么写
  • 广东税务app下载安装
  • 放管服中的服的深层含义
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设