项目day14: 分页、登录注册、购物车、支付->这几个业务有疑问的地方及时喊我 elementUI:今晚在稍微看看【后台管理系统项目:全都是用elementUI】
1)个人中心路由搭建 1.1当年学习路由的时候:一级路由、二级路由、三级路由 【二级路由搭建】 1.2完成个人中心数据的展示【分页】
2)未登录全局守卫的判断
在前面课程当中:导航守卫【导航:路由发生变化,守卫可以检测到,通过判断,确定这次路由跳转】
前置守卫:在路由跳转之前,进行判断 后置守卫:路由都已经跳转完毕才执行。
未登录的情况: 全局守卫:只要的项目当中任何某一个路由发生变化,就会出发。 项目守卫使用:一般有用前置全局守卫
用户登录:
用户未登录:点击购物车的结算按钮->交易页面【没有登录:去不了】 未登录不能调到支付页面 未登录不能调到支付成功页面 未登录不能去个人中心【都不知道你是谁:展示谁的个人中心啊】
3)路由独享守卫 路由独享守卫:需要在配置路由的地方使用 导航守卫:全局守卫->项目当中有任何路由变化【a->b,b->d】触发。 路由独享守卫:专门负责某一个路由
用户登陆了: 去交易页面:从购物车才能跳转到交易页面。
next():你本来想去哪里,我就放行,你就去完事了。
next('/login'):执行守卫放行到执行的路由。
next(false):路由跳转的时候,从哪里来回那里去。
4)组件内守卫---->一般很少用【全局 + 路由独享守卫】 组件内守卫:也是专门负责某一个路由【并非负责全部路由】,写法和路由独享守卫有区别? 组件内守卫需要书写在组件内部
beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
6)路由懒加载 面试【高频的面试】:项目的性能优化手段有哪些? v-if|v-show:尽可能采用v-show 按需引入【lodash、elementUI】 防抖与节流 路由懒加载:当用户访问的时候,加载对应组件进行展示。
7)图片懒加载 vue-lazyload:图片懒加载 图片:比用用户网络不好,服务器的数据没有回来, 总不可能让用户看白色,至少有一个默认图片在展示。
8)表单验证【后台管理系统:大量使用elementUI】 以后工作的时候经常会进行表单验证【element-ui】进行表单验证,so 简单。 项目当中表单验证功能比较常见的。
8.1vee-validate插件:Vue官方提供的一个表单验证的插件【老师接下来的操作能大概看懂即可】 这个插件很难用:如果你翻看它的文档(看一个月:不保证能看懂),依赖文件很多(文档书写的很难理解) 花大量时间学习,很难搞懂。
8.2哪怕将来工作了,真的使用vee-valadiate【老师项目搞出来:改老师代码即可】
使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 4:注册插件的时候,用中文,以及需要验证的字段【用中文显示提示形式】 5:在入口文件需要引入执行一次 6:使用vee-valadiate插件
8)vee-validate 基本使用
第一步:插件安装与引入 cnpm i vee-validate@2 --save 安装的插件安装2版本的
import VeeValidate from 'vee-validate' import zh_CN from 'vee-validate/dist/locale/zh_CN' // 引入中文 message Vue.use(VeeValidate)
第二步:提示信息
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => ${field}必须与密码相同
// 修改内置规则的 message,让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password:'密码',
password1:'确认密码',
isCheck:'协议'
}
})
第三步:基本使用 {{ errors.first("phone") }}
const success = await this.$validator.validateAll(); //全部表单验证 //自定义校验规则 //定义协议必须打勾同意 VeeValidate.Validator.extend('agree', { validate: value => { return value }, getMessage: field => field + '必须同意' })
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。