位置: IT常识 - 正文

vue大型电商项目尚品汇(前台篇)day05终结篇(用vue做的企业项目)

编辑:rootadmin
前台部分到此结束,一路走来还挺怀念,今天主要是对整个项目的完成做一个最后的收尾工作,对于功能上的需求没有什么了,主要就是项目上线的一些注意事项。 一.个人中心二级路由 当我们点击查看订单应该跳转到个人中心 个人中心拆分两个子路由组件 分好组件后,在routes里面父组件写上childre配置项 写路 ...

推荐整理分享vue大型电商项目尚品汇(前台篇)day05终结篇(用vue做的企业项目),希望有所帮助,仅作参考,欢迎阅读内容。

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

前台部分到此结束,一路走来还挺怀念,今天主要是对整个项目的完成做一个最后的收尾工作,对于功能上的需求没有什么了,主要就是项目上线的一些注意事项。

一.个人中心二级路由

当我们点击查看订单应该跳转到个人中心

个人中心拆分两个子路由组件

分好组件后,在routes里面父组件写上childre配置项

写路由不需要写/了,写跳转路由需要写全地址

路由重定向

二.我的订单

获取订单列表详情,保存数据

注意这里的布局是采用的table,里面每一个订单为一个table

一个订单里面可一次性买多个东西吧,所以一行就是一件物品,这里的rospan要动态改为物品数组的长度

同时由于我们后面这些内容是集中显示,所以只需要显示一个的就可以了,并非每个遍历出来都有一个这些列

三.未登录的导航守卫判断

在未登录的状态下不应该能够随便进入订单、购物车、个人中心等界面,所以需要到全局前置路由守卫设置权限

但是有个问题我们正常应该是点击谁,然后提示登录登录完成后继续进入的是这个页面而并非是进入home

可以给我们往login跳的地方来一个query参数

然后去我们点击登录按钮这个判断一下,不是直接跳到home界面了

四.登录的独享守卫

我们进入交易界面,只能从购物车进入,其他地方不能进来,这里会用到next第三种用法next(false)表示从哪来回哪去

1.组件内守卫

我们支付成功界面只能从支付界面来,所以同样的事情也可以由组件守卫完成

五.图片懒加载

vue-lazyload

它是一个插件,所以需要Vue.use,注意这里我们的图片需要引入,才能用

然后给我们需要懒加载的图片添加自定义指令

来回顾一下自定义插件和自定义指令

首先自定义指令必须是暴露的一个对象,然后这个对象肯定是要封装一个install方法,而且他接受两个参数,一个是Vue,有了他可以做很多事情Vue.component、Vue.directive等,第二个参数是我们在注册那里传进来的值

参数可以为对象等任意形式

那么就可以用这个插件里面来定义一个全局自定义指令,将这个指令的语法修改为传进来的参数,后面是指令的回调,接受两个参数,第一个是绑定这个指令的元素,第二个是这个元素的一些信息也可以拿到他的元素体内容

六.vee-validate表单验证

用的是vee-validate2版本

vue大型电商项目尚品汇(前台篇)day05终结篇(用vue做的企业项目)

首先需要安装并注册,因为是一个插件,由于main入口文件内容已经过多,这里可以把这个模块单拎出来然后直接导入进入口文件

注册之后需要引入一个配置项,后面表单属性会用到主要是用来做中文匹配的。

我们需要中文所以还要引入中文包

配置好过后就可以对相应的input表单做一些处理了,基本格式没变,加了一个name,一个自定义指令还有一个动态的类名,下面的错误信息也要动态展现,这里规则验证跟node里面的validate差不多

我来说一下匹配规则,首先引入的中文包能保证我们的提示信息除特殊字段也就是phone之外都转换为中文,不要就是这种效果

我们的关键字phone就是我们规定的attr匹配来进行转换,你定义的是什么,提示信息就会转换为什么,表单里面name就是让你去找配置里面对应的什么属性

验证码部分同理

密码这里跟上面差不多,说一下确认密码部分,我们的规则已经在配置文件写好了,这里只需要在匹配规则写上属性名值为要匹配的值

单选框需要用到自定义规则,true就返回true,false就走否定规则

最后一步关键,要全部验证成功才能点击注册去发请求,他返回的是一个布尔值

七.路由懒加载

当打包的时候,js包会变得非常大,加载也会很慢,我们可以把不同的路由对应的组件分割成不同的代码块,当路由访问时再去加载

原理上是这样

可以简写为

八.打包上线1.map文件处理

当我们项目完成准备上线打包后,可以看到在我们的js文件夹里面有很多的map文件

先了解他是干嘛的,因为我们打包之后,所有的js文件都是压缩且加密的,如果出现错误无法提示哪一行哪一列有错,而我们的map文件就是来做这件事情的,项目上线后会给你提示哪一行哪一列有错误,但是我们项目都上线了,一般也不需要提示错误信息了,所以一般是可以删除的,也可以在vue.config.js里面配置productionSourceMap为false也是可以的

这样打包出来就不会有map文件了。

2.服务器

购买服务器之后

先修改密码然后打开安全组,把那些端口号打开然后就可以通过xshell或者xftp去操作你的服务器了3.Nginx反向代理

先抛出一个问题:当用户一访问你这个服务器的地址,怎么就能直接访问到你dist打包下的index.html,也就是怎么就能找到你的项目,毕竟一个centos里面有那么多目录

然后了解一个概念:我们用户访问的是买来的服务器的地址,而我们项目里面所有的数据接口都是向另一个服务器要来的资源,我们买来的服务器能向接口的服务器要资源的这种行为就是Nginx反向代理,Nginx是一个服务器,反向代理是一种行为

流程:

xhell进入根目录下的etc下的Nginx文件夹

如果里面只有四五个文件说明还没有安装Nginx(yum install nginx)

安装完nginx服务器之后,打开nginx.conf文件,添加两个配置项

这个可解决用户一访问服务器就访问我们的项目设置

这个可解决nginx反向代理问题

最后 service nginx start让nginx服务器跑起来即可

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

上一篇:python中except的异常处理(python中except用法)

下一篇:python round()函数是什么(Pythonround函数作用)

  • mali-g77是什么处理器(mali-g77mc9是什么处理器)

    mali-g77是什么处理器(mali-g77mc9是什么处理器)

  • 手机锁屏密码忘记了怎么才可以重新打开(手机锁屏密码忘了怎么办10秒解决)

    手机锁屏密码忘记了怎么才可以重新打开(手机锁屏密码忘了怎么办10秒解决)

  • 安卓数据线始终无法给苹果手机充电(安卓数据线不能用了怎么办)

    安卓数据线始终无法给苹果手机充电(安卓数据线不能用了怎么办)

  • 电话拨出去立马挂断对方有显示吗(电话拨出去立马通话结束什么原因)

    电话拨出去立马挂断对方有显示吗(电话拨出去立马通话结束什么原因)

  • 原生模式是什么相机(原生模式是什么拍照软件)

    原生模式是什么相机(原生模式是什么拍照软件)

  • 微信步数和手机步数不一致怎么回事(微信步数和手机步数不一致怎么办)

    微信步数和手机步数不一致怎么回事(微信步数和手机步数不一致怎么办)

  • oppo突然不闪充了(oppo手机闪充突然不闪充了怎么回事)

    oppo突然不闪充了(oppo手机闪充突然不闪充了怎么回事)

  • 苹果手机照片共享是什么意思(苹果手机照片共享出错)

    苹果手机照片共享是什么意思(苹果手机照片共享出错)

  • 内存卡怎么在手机上下载歌(内存卡怎么在手机上读取)

    内存卡怎么在手机上下载歌(内存卡怎么在手机上读取)

  • 支付宝怎么设置不让别人看真实姓名(支付宝怎么设置拒绝别人转账给我)

    支付宝怎么设置不让别人看真实姓名(支付宝怎么设置拒绝别人转账给我)

  • 华为手机设置儿童模式(华为手机设置儿童安全锁怎么设置)

    华为手机设置儿童模式(华为手机设置儿童安全锁怎么设置)

  • qq怎么扩列加好友(qq扩列加好友来源显示什么)

    qq怎么扩列加好友(qq扩列加好友来源显示什么)

  • 电脑开机速度慢怎么解决(电脑开机速度慢和内存有关系吗)

    电脑开机速度慢怎么解决(电脑开机速度慢和内存有关系吗)

  • 抖音能隐藏关注粉丝嘛(抖音能隐藏关注的人吗)

    抖音能隐藏关注粉丝嘛(抖音能隐藏关注的人吗)

  • 华为荣耀7x怎么装双卡(华为荣耀7x怎么调屏幕亮度时间)

    华为荣耀7x怎么装双卡(华为荣耀7x怎么调屏幕亮度时间)

  • 红袖怎么领取免费30天(红袖新用户限免30天怎么领)

    红袖怎么领取免费30天(红袖新用户限免30天怎么领)

  • word中竖线符号怎么打(word中竖线符号怎么去掉)

    word中竖线符号怎么打(word中竖线符号怎么去掉)

  • 抖音账号注销后互相关注的人还能看到我吗(抖音账号注销后重新注册会限流吗)

    抖音账号注销后互相关注的人还能看到我吗(抖音账号注销后重新注册会限流吗)

  • iphne怎么设置来电铃声(苹果手机如何设置来电模式)

    iphne怎么设置来电铃声(苹果手机如何设置来电模式)

  • 红米note7摔坏保修吗(红米note7pro摔了一下就开不了机)

    红米note7摔坏保修吗(红米note7pro摔了一下就开不了机)

  • vivoy97后面有指纹吗(vivo手机有哪几款)

    vivoy97后面有指纹吗(vivo手机有哪几款)

  • oppo手机快捷键如何设置(Oppo手机快捷键怎么设置)

    oppo手机快捷键如何设置(Oppo手机快捷键怎么设置)

  • .net是什么

    .net是什么

  • 笔记本电池怎么修复(笔记本电池怎么换)

    笔记本电池怎么修复(笔记本电池怎么换)

  • Win11安装升级时卡住了怎么办?Win11安装时卡死的解决办法(win11安装更新时出现一些问题)

    Win11安装升级时卡住了怎么办?Win11安装时卡死的解决办法(win11安装更新时出现一些问题)

  • 养鸡增值税税率是多少
  • 消费税基本特点?
  • 电子税务局增值税发票系统
  • 经营者个人所得税申报
  • 个体工商户2023年税收政策
  • 企业财务发工资流程
  • 发票报送失败怎么弄
  • 小规模季度超过45万了怎么缴纳
  • 申报怎么打印
  • 货物发出未开票不确认收入
  • 外汇结汇的方法有哪些呢?
  • 研发费用加计扣除留存备查资料
  • 进口免税店的东西都是正品吗
  • 以前年度损益调整会计分录
  • 税金及附加小于应缴纳所得税是什么原因
  • 发票联丢失用抵扣联做账可以吗
  • 国税里发票采集中的税控机动车发票是指什么发票?
  • 附加税水利行政事业是否取消?
  • 核定征收的企业需要汇算清缴吗
  • 钢化玻璃税率是多少?
  • 装修公司购入材料计入什么科目
  • 进项构成比例是啥
  • 免征房产税是多少
  • 劳务工程款和工人工资的区别
  • 每月固定电话费是半固定成本吗
  • windows10如何设置桌面背景
  • 中介公司代发工资合法吗
  • 土地使用权转让协议
  • 表彰比例如何确定
  • win11无法打开开始菜单怎么办
  • 从劳务市场雇人受伤了怎么办?
  • 销售不动产分期收款怎么确认收入
  • 工程审计的目的包括哪些
  • 电子发票查询真伪
  • php rtrim
  • php自定义表单
  • 西西弗书店主管级
  • 前端打印语句
  • curl error6
  • mysql的间隙锁与排他锁
  • java hash()
  • 脚手架租赁费用超过购买价格
  • 生产车间劳务费会计分录
  • 个体户开发票超过定额是如何交税?
  • 商业折扣影响销售成本吗
  • 办理地税手续费
  • 上个月多计提的费用怎么调整
  • 增值税代扣代缴范围
  • 车辆不在公司名下加油费可以进公司吗
  • 短期借款明细账采用什么格式
  • 出库单上面的单位写谁的
  • 公司车子折旧相差多少
  • 为什么留存收益不考虑筹资费用
  • 小规模应收利息怎么算
  • 公司网站维护费用计哪个科目
  • 会计中结转属于什么科目
  • sql server连接方式
  • innodb底层实现原理
  • 远程桌面安装
  • 远程桌面登录显示其他用户
  • vssvc.exe
  • linux中使用grep命令显示包含特殊字符的行
  • winproj.exe - winproj进程是什么意思
  • win8摄像头设置
  • mac远程桌面mac
  • mac itunes
  • win内存占用率过高
  • centos桌面切换到命令行有什么区别
  • 复制到文件夹怎么弄
  • python2.7.11
  • Python中模块和包的区别
  • python中的魔法函数
  • 高速公路发票在哪里开
  • 办理税控盘的流程
  • 河南网上税务局app下载
  • 社会福利企业可以投资吗
  • 江西省国家税务局工作人员名单
  • 购置税周天上班吗
  • 事业单位的会计制度是什么
  • 如何查北京
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设