人资总结
2023-06-16 11:16:01 37 举报AI智能生成
Vue 项目技术点
作者其他创作
大纲/内容
集成方案
vue-element-admin
建议看一看人家完成之后的效果，知道有哪些功能可以让我们使用
vue-admin-template
关于格式化项目的注意点
公司里面不要随便安装格式化插件格式代码
要么和老大保持一致
要么手动去处理
如果是自己负责的 Vue2 新项目
启动项目有坑
Node 版本介于 12.x 到 16.x 之间
可以把自己的 Node 卸了，重新安装
nvm
可以很方便的切换 Node 版本，自己调研一下
重新安装 core-js
NPM 源
切换到淘宝
如何查看现在的源
如何切换源到某个地址
nrm
干啥的
专门用来管理 npm 镜像源的
怎么用
1. 全局安装
npm i -g nrm
2. 测试安装成功
nrm -V
3. 查看有哪些源可以给我用
nrm ls
4. 如何切换某个源
nrm use 名字
Git 注意点
注意拉过来的代码包含了作者的提交信息
建议：先删除 .git 隐藏文件
提交命令
初始化操作
main.js
注释了 mock 的操作
vue.config.js
注释了 devServer 中加载 mock 的代码
配置跨域
.env.development
修改了 VUE_APP_BASE_API 的值和后端一致
request.js
vue.config.js
配置 devServer 选中中的 proxy
Element Form
布局结构
收集数据
如何校验
如何自定义校验规则
常用方法
兜底校验
this.$refs.formRef.validate()
清理校验规则和数据
this.$refs.formRef.resetFields()
注意点
resetFields() 操作的是和 Form 表单绑定的那些数据，没有绑定的并不会重置
所以，例如关闭弹框的时候，比较保险的做法要再手动重置一下数据
结合 Vuex 做登录
1. 点击登录按钮
2. dispatch action
注意：一般这个 action 咱是写到某个模块里面的（user）
触发方式 1：this.$store.dispatch('user/login')
触发方式 2
触发方式 3
3. action
3.1 action 中调用封装好的登录的接口
涉及到 Axios 的封装
1. 创建一个 axios 实例
2. 封装 baseURL
3. 封装 timeout 超时时间
4. 请求拦截器统一携带 token
5. 响应拦截器
成功
数据的脱壳
也可能统一的错误（业务错了，不属于 HTTP 状态码的错误）处理
失败
统一处理错误的 HTTP 状态码
涉及到跨域
前端
代理服务器，如果是 Vue CLI 创建的项目，可以在 vue.config.js 配置 devServer 的 proxy 选项
后端
通过设置响应头（Access-Control-Allow-Origin）来允许某些域名访问
3.2 登录接口结果返回后通过 commit mutation 修改 state
3.3 注意 state 中一般至少包含 token
4. 持久化 state 中的数据
存
什么时候存
触发 mutation 修改 state 的时候存
取
什么时候取
在初始化 state 的时候取
用什么方式持久化
Cookie
Cookie 的特点
存到 Cookie 里面的数据在符合条件的情况下，会随着请求头自动的带到后端
那有同学会想？那既然我的 token 存到了 Cookie 中，是不是我就不需要在请求头携带了呢？
答：理论上是的，但是也取决于后端，例如后端取 token 的时候，他就是从请求头中找的是 Authorization 这个字段，并没有找 Cookie 字段，那你确实也要再带一下。
怎么添加
后端通过响应头 set-cookie 去设置到前端
前端通过 document.cookie 去设置
localStorage
5. token 过期
在哪做的
在响应拦截器处理的回调处
做了什么事情
根据后端返回的状态码，如果是 401
退出
清理 token
清理 Vuex 中的
清理持久化的 Token
删除用户信息
清理 router 中的信息，resetRouter
目的：地址栏输入的时候，下一个用户不要受到上一个用户的影响
清理了 Vuex 中 routes
目的：下一个用户的侧边栏不要受到上一个用户的影响
跳转到登录页
弹框错误提示
return Promise.reject(new Error(401))
6. 没登录的用户不期望访问内页（界面访问控制）
在全局路由前置导航守卫 beforeEach 处做的
如果有 token
看一下访问的是不是登录页
如果是，就拦截到首页（免登陆）
如果不否，直接放行
如果没有 token
看一下访问的在不在白名单
如果是，就放行
如果否，就拦截到登录页
关键的业务
el-tree
data：数据源
Array to tree
performant-array-to-tree
特点：转换出的结果即便 children 为空也会有个空数组
如何去掉
props: { label: 'label', children: 'children' }
default-expand-all
show-checkbox
check-strictly：选中的时候父子不关联
node-key="id"
如何收集到选中的那些选项
getCheckedKeys
如何选中某些复选框
通过 default-checked-keys 绑定数据，例如 [1, 2, 3]
setCheckedKeys
选中/高亮某一个
setCurrentKey
编辑思路
弹框编辑
1. 点击编辑按钮，通过作用域插槽拿到 ID 调用接口获取详情
2. 数据回显：把详情赋值给 => 给表单绑定的那个【对象】
3. 点击确定按钮调用编辑的接口
需不需要 ID？
id 从哪来
第一种方式，最开始点击编辑按钮的时候记到 data 中
第一步调用详情接口的时候，有可能后端返回的数据里面有 id，所以表单【对象】里面可能有 id
4. 重新调用获取列表的刷新页面
行内编辑
1. 循环后端返回的数据，给每一行数据加一个变量 isEdit 来控制当前行状态
2. 模板中根据 row.isEdit 来做判断显示普通数据还是编辑的
3. 数据回显注意点：用的并不是当前行的数据
为啥呢？
假如用了当前行数据去绑定，边输边改
有可能点取消的时候回到原来的数据状态
正确做法：重新给每一行数据加了一个变量，例如叫 xxx，xxx 的值就是当前行数据的拷贝
4. 上面操作可能会涉及到数据响应式问题
给对象后续新增的 key 去赋值不是响应式的
解决
this.$set(对象, key, value)
Vue.set(对象, key, value)
跳转编辑
1. 跳转的时候用 params 或 query 传递 id 到新的页面
2. 新页面用 this.$route.params 或 this.$route.query 获取 id 并调用获取详情的接口
3. 拿到数据填充并回显
4. ...
需求：添加和编辑用户公用一个页面
如何显示左侧组织架构第一个的员工列表
1. 获取左侧的树数据并渲染，假设获取到数据存储到了变量 list
2. 给 list[0].id 给到变量 currentId
3. 根据 currentId 发请求拿对应的员工数据
4. 点击侧边树的某一个行的时候，改变 currentId 为当前点击的这一行的 id
5. 根据最新的 currentId 重新发请求
性能优化
是什么：节流和防抖都是性能优化的一种手段
防抖
防抖就是持续触发（事件）不执行，不触发的一段时间后才执行
应用场景：根据输入的内容发请求
生活例子：王者荣耀英雄回城
如何封装
实际使用：lodash 里面的 debounce
节流
节流就是持续触发也执行，只不过执行的频率变低了
Excel 的导入导出
导入
1. 前端要拿到文件信息
1. 准备一个 input file 框并通过 hidden 属性隐藏
2. 给普通的导入按钮绑定点击事件，在事件回调中触发 input file 框的 click() 事件，目的是调用系统的文件选择框
3. 监听 input file 框的 onchange 事件
4. 在 onchange 事件的回调函数中通过 e.target.files[0] 拿到【文件信息】
2. 处理方式
方式 1
1. 前端可以通过 xlsx 解析拿到的【文件信息】为普通的数据
2. 通过调用添加数据的接口传递到后端
3. 重新获取数据
方式 2
后端提供的有专门的导入/上传 Excel 的接口，只需要直接调用此接口上传即可（前端无需解析）
注意点：一般要把文件信息放到 formData 中并上传到后端，看接口
导出
方式 1
1. 前端通过 xlsx 可以把普通的数据转成 excel 类型的文件信息
2. 前端通过 file-saver 保存文件信息到本地
方式 2
1. 后端提供的有接口，调用这个接口可以直接拿到 Excel 文件信息（二进制）
2. 前端通过 file-saver 保存文件信息到本地
注意点
上传 el-upload
第一种：指定 action 为后端提供的接口；一般要指定 name，值是后端接口规定好的
第二种：通过 http-request 进行自定义上传，可以自定义上传时候的逻辑
基于角色的权限控制 RBAC
路由/页面级别的
在哪做的
在全局路由前置导航守卫做的
做了什么事情
1. 用户登录成功后，后端返回当前用户的【权限标识】，例如 [a, b, c]
2. 前端从自己准备好的完整一份动态路由中筛选出有权限的路由，例如 [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
3. 然后通过 addRoutes 添加到路由实例
4. 一旦添加到了路由实例，当前用户就具有了访问某个路由的权限了
碰到的问题
404 问题
原因
addRoutes 之后，404 路由跑中间了
解决
把路由配置表中写死的 404 路由删除，通过 addRoutes 添加到最后
白屏问题
原因
addRoutes 添加的路由是"异步的"，就是不会马上生效
解决
要重新执行下 beforeEach 的逻辑，写 next(to.path)
侧边栏并没有
原因
侧边栏信息是通过 this.$router.options.routes 获取的，而这个 API 就是拿不到通过 addRoutes 添加的路由信息
解决
在 Vuex 中再维护一份路由信息，包括筛选之后的动态路由
退出的时候，多用户影响的问题
重置 router
管地址栏输入的时候不要相互影响
重置 Vuex 中的路由信息
管侧边栏的
功能/按钮级别的
方式 1
封装一个全局的方法（挂载到 Vue 原型），这个方法只做 1 件事情
接收一个标识，内部看一下这个标识在不在后端返回的【功能数组】里面
如果在就返回 true，不在就返回 false
在做按钮控制的地方，调用一下这个方法，根据此方法返回的是 true 还是 false，对按钮做禁用或启用，显示或隐藏的操作
方式 2
通过 Vue.directive 定义一个全局的指令
在指定的 inserted(el, binding) 钩子中，通过 binding.value 拿到传递过来的标识
内部看一下这个标识在不在后端返回的【功能数组】里面
如果不在，就禁用或删除按钮，el.remove()
Vue2 中如何做代码业务逻辑复用的
面试官想听到的就是 mixin
缺点
数据来源不清晰
命名冲突（变量污染）
优先级
如果 data 中的数据一样，听组件的
如果 methods 中的方法一样，听组件的
如果生命周期钩子一样，先走混入的，再走组件自身的
...
项目上线
1. 执行打包命令，npm run build，生成 dist 文件夹
2. 可以把 dist 文件夹交给后端
把 .gitignore 中忽略的 dist 删除掉，提交上去
直接把 dist 发给对应的人
3. 后端一般通过 Nginx 部署上线
如果咱时 history 模式的路由
后端要做处理
接口注意点
打包的时候会读取 .env.production 中的环境变量
例如我们设置了接口的基地址是 VUE_APP_BASE_API = '/prod'
那么打包出来的接口都是这样的：/prod/user、/prod/sports...
假如后端把 dist 部署到了这个服务器， IP 是 192.153.166.172
其实相当于发请求的地址都是 192.153.166.172/prod/user、192.153.166.172/prod/sports
问题来了！我们真实的接口可能在 https://www.xxx.com，所以有没有发现，打包后的代码的接口根本没法请求
所以！后端要做转发（代理），他要把所有 /prod 开头的都代理到 https://www.xxx.com
如果 https://www.xxx.com 它开启了允许跨域，其实我可以直接配置 .env.production 中为 VUE_APP_BASE_API = 'https://www.xxx.com/prod-ap'
0 条评论
下一页
