表格组件的封装逻辑:
将Table组件的通用js逻辑封装在组件内部, 实现逻辑复用;
对外暴露一些接口(属性), 通过接口向组件内传入数据或方法动态控制表格组件的渲染及功能, 确保组件的灵活性和可配置性;
表格列的配置封装在一个独立模块中并导出, 供表格组件使用, 提升代码的可读性, 可维护性.
网络请求:
- 项目中如何管理网络请求?
请求的二次封装: 全局设置请求超时时间,baseURL, 设置请求拦截器, 设置响应拦截器.
按模块管理请求: 一个js文件管理一个功能模块的多个请求, 每个请求都封装成独立的函数并导出供组件调用
- 项目中如何解决跨域请求?
开发环境下: 使用proxy代理.
生产环境下: 后端配置允许跨域访问 或者 后端nginx配置代理.
业务功能:
- 登录怎么做的? 登陆的逻辑是什么?
- 第一次登录的时候,前端(客户端)调后端(服务器)的登陆接口,并发送用户名和密码
- 后端(服务器)收到(客户端)请求,验证用户名和密码,验证成功,就给前端(客户端)返回一个token
- 前端(客户端)拿到token,将token存储到localStorage或vuex中,并跳转路由页面
- 前端(客户端)每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
- 前端(客户端)在组件中每次调后端(服务器)接口,都要在请求头中加token
- 后端(服务器)判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
- 如果前端(客户端)拿到状态码为401,就清除token信息并跳转到登录页面
- 权限管理的实现思路是什么? 路由级权限? 按钮级权限?
前端权限管理的意义:
- 降低非法操作的可能性
- 尽可能排除不必要的请求,减轻服务器的压力
- 提高用户体验
前端权限控制的思路:
- 菜单控制:在登录请求当中,会得到权限数据,权限需要在多个组件之间共享,所以可以通过vuex保存数据并且展示相应的菜单,页面刷新的情况下会丢失数据,所以把权限数据持久化存储。
- 界面控制:如果用户没有登录,手动输入url地址,应该阻止并跳转到登录页面,可以通过路由导航守卫来实现。动态路由可以让不具备权限的界面在路由规则中不存在.
- 按钮控制:路由规则中可以添加元数据meta,通过路由对象可以得到当前的路由规则以及存储在路由规则中的元数据,自定义指令可以实现对按钮的控制
- 请求和响应控制:请求拦截和响应拦截的使用, 对于401类型的请求统一跳转登陆页面,请求方式约定restful
- 单点登录(sso)的实现思路?
单点登录, SSO 英文全称 Single Sign On.
在多个应用系统中,只需要登录一次,就可以访问其他相互信任的应用子系统。
Web服务器对于已登录的用户进行认证有两种方法:
基于Session cookie
HTTP是无状态的协议。在某些应用场景,需要知道登录的用户的状态,于是就使用了会话(Session)的机制。用户的会话信息存储在应用服务器端,同时会将部分会话信息(如session ID,会话标识)存储在客户端浏览器的cookie中。在后续与服务器的通讯中,浏览器会携带相关信息,服务器通过查询存储的会话信息就能够取得用户的登录状态。
基于令牌(Token)
令牌,通常指JWT(JSON Web Tokens),以JSON格式存储的用户身份及相关信息,在服务器端通过密钥签名后使用base64编码成字符串。因为JWT是经过服务器签名的,客户端只能验证,不能更改。服务器在对用户进行认证后,会将令牌发送给客户端。客户端与服务器进行通信时,会在报文头中以Bearer authentication携带令牌,服务器收到后进行校验。不同于基于cookie的会话管理,令牌是无状态的,服务器本身不存储用户状态。令牌的自包含身份信息属性使得其应用更有弹性,易于扩展。
- 访问页面时突然登录过期跳转到了登录页, 登录成功之后如何跳转到之前的页面?
- 地址重定向到登录页时,用一个参数保存重定向之前的页面地址,比如: redirect
- 在登录页面,先获取保存的重定向路径;
- 登录成功之后,判断是否存在重定向地址,存在则跳转到重定向的地址
性能优化:
- 项目中有哪些地方做了优化? 代码复用, 性能, 访问速度.
- v-if和v-show区分使用场景:
(v-if是真正的条件渲染,切换过程中是销毁和重建的,v-show就相当于CSS中的display属性切换)
-
- computed和watch区分使用场景:
(computed是计算属性,依赖的属性值发生改变,下一次获取computed的值才会重新计算它的值,watch更多地是观察)
-
- 长列表性能优化:
有时候我们的组件是纯粹的数据展示,不会有改变,就不需要Vue劫持我们的数据。可以通过Object.freeze方法冻结一个对象,一旦被冻结的对象就不再被修改了
-
- 事件的销毁:
Vue组件销毁时,自动清理它与其他实例的连接,但仅限于组件本身事件,如果在JS内使用addEventListense等方法不会自动销毁,我们需要在组件中手动移除这些事件的监听,避免内存泄漏。
-
- 图片资源的懒加载:
图片过多的页面,为了加速页面加载速度,我们可以等滚动到可视区域再去加载。在项目中可以使用vue-lazyload。然后在vue文件中将img标签的src改为v-lazy,图片的显示方式更改为懒加载显示:
-
- 路由懒加载(实现方式在(3.路由Vuex中)):
Vue是单页面应用,会有很多路由引入,这样webpack打包之后的文件很大,当加载资源过多时,页面会出现白屏的现象,所以我们可以把不同路由对应的组件分割成不同的代码块,在路由被访问的时候才加载对应的组件。
-
- 第三方插件按需引入:
借助babel-plugin-component。按需引入需要的组件,达到减少项目体积的目的。
-
- 优化无限列表性能:
如果存在非常长或者无限滚动的列表,需要采用窗口化的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建dom节点的时间
-
- 服务端渲染SSR/预渲染:
更好的SEO
更快的内容到达时间(首屏加载更快)