项目中的核心问题(组件封装,网络请求,业务功能,性能优化)

news/2024/11/1 10:34:45/

表格组件的封装逻辑:  

将Table组件的通用js逻辑封装在组件内部, 实现逻辑复用

对外暴露一些接口(属性), 通过接口向组件内传入数据或方法动态控制表格组件的渲染及功能, 确保组件的灵活性可配置性

表格列的配置封装在一个独立模块中并导出, 供表格组件使用, 提升代码的可读性, 可维护性.

网络请求:

  1. 项目中如何管理网络请求?

请求的二次封装: 全局设置请求超时时间,baseURL, 设置请求拦截器, 设置响应拦截器.

按模块管理请求: 一个js文件管理一个功能模块的多个请求, 每个请求都封装成独立的函数并导出供组件调用

  1. 项目中如何解决跨域请求?  

开发环境下: 使用proxy代理.

生产环境下: 后端配置允许跨域访问 或者 后端nginx配置代理.

业务功能:

  1. 登录怎么做的? 登陆的逻辑是什么?
    1. 第一次登录的时候,前端(客户端)调后端(服务器)的登陆接口,并发送用户名和密码
    2. 后端(服务器)收到(客户端)请求,验证用户名和密码,验证成功,就给前端(客户端)返回一个token
    3. 前端(客户端)拿到token,将token存储到localStorage或vuex中,并跳转路由页面
    4. 前端(客户端)每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
    5. 前端(客户端)在组件中每次调后端(服务器)接口,都要在请求头中加token
    6. 后端(服务器)判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
    7. 如果前端(客户端)拿到状态码为401,就清除token信息并跳转到登录页面

  1. 权限管理的实现思路是什么? 路由级权限? 按钮级权限?

前端权限管理的意义:

  1. 降低非法操作的可能性
  2. 尽可能排除不必要的请求,减轻服务器的压力
  3. 提高用户体验

前端权限控制的思路:

  1. 菜单控制:在登录请求当中,会得到权限数据,权限需要在多个组件之间共享,所以可以通过vuex保存数据并且展示相应的菜单,页面刷新的情况下会丢失数据,所以把权限数据持久化存储。
  2. 界面控制:如果用户没有登录,手动输入url地址,应该阻止并跳转到登录页面,可以通过路由导航守卫来实现。动态路由可以让不具备权限的界面在路由规则中不存在.
  3. 按钮控制:路由规则中可以添加元数据meta,通过路由对象可以得到当前的路由规则以及存储在路由规则中的元数据,自定义指令可以实现对按钮的控制
  4. 请求和响应控制:请求拦截和响应拦截的使用, 对于401类型的请求统一跳转登陆页面,请求方式约定restful

  1. 单点登录(sso)的实现思路?    

单点登录, SSO 英文全称 Single Sign On.

  在多个应用系统中,只需要登录一次,就可以访问其他相互信任的应用子系统。

   Web服务器对于已登录的用户进行认证有两种方法:

 基于Session cookie

HTTP是无状态的协议。在某些应用场景,需要知道登录的用户的状态,于是就使用了会话(Session)的机制。用户的会话信息存储在应用服务器端,同时会将部分会话信息(如session ID,会话标识)存储在客户端浏览器的cookie中。在后续与服务器的通讯中,浏览器会携带相关信息,服务器通过查询存储的会话信息就能够取得用户的登录状态。

 基于令牌(Token)

令牌,通常指JWT(JSON Web Tokens),以JSON格式存储的用户身份及相关信息,在服务器端通过密钥签名后使用base64编码成字符串。因为JWT是经过服务器签名的,客户端只能验证,不能更改。服务器在对用户进行认证后,会将令牌发送给客户端。客户端与服务器进行通信时,会在报文头中以Bearer authentication携带令牌,服务器收到后进行校验。不同于基于cookie的会话管理,令牌是无状态的,服务器本身不存储用户状态。令牌的自包含身份信息属性使得其应用更有弹性,易于扩展。

  1. 访问页面时突然登录过期跳转到了登录页, 登录成功之后如何跳转到之前的页面?
  1. 地址重定向到登录页时,用一个参数保存重定向之前的页面地址,比如: redirect
  2. 在登录页面,先获取保存的重定向路径;
  3. 登录成功之后,判断是否存在重定向地址,存在则跳转到重定向的地址

性能优化:

  1. 项目中有哪些地方做了优化?  代码复用,  性能,  访问速度.
    1. v-if和v-show区分使用场景:

(v-if是真正的条件渲染,切换过程中是销毁和重建的,v-show就相当于CSS中的display属性切换)

    1. computed和watch区分使用场景:

(computed是计算属性,依赖的属性值发生改变,下一次获取computed的值才会重新计算它的值,watch更多地是观察)

    1. 长列表性能优化:

有时候我们的组件是纯粹的数据展示,不会有改变,就不需要Vue劫持我们的数据。可以通过Object.freeze方法冻结一个对象,一旦被冻结的对象就不再被修改了

    1. 事件的销毁:

Vue组件销毁时,自动清理它与其他实例的连接,但仅限于组件本身事件,如果在JS内使用addEventListense等方法不会自动销毁,我们需要在组件中手动移除这些事件的监听,避免内存泄漏。

    1. 图片资源的懒加载:

图片过多的页面,为了加速页面加载速度,我们可以等滚动到可视区域再去加载。在项目中可以使用vue-lazyload。然后在vue文件中将img标签的src改为v-lazy,图片的显示方式更改为懒加载显示:

    1. 路由懒加载(实现方式在(3.路由Vuex中)):

Vue是单页面应用,会有很多路由引入,这样webpack打包之后的文件很大,当加载资源过多时,页面会出现白屏的现象,所以我们可以把不同路由对应的组件分割成不同的代码块,在路由被访问的时候才加载对应的组件。

    1. 第三方插件按需引入:

借助babel-plugin-component。按需引入需要的组件,达到减少项目体积的目的。

    1. 优化无限列表性能:

如果存在非常长或者无限滚动的列表,需要采用窗口化的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建dom节点的时间

    1. 服务端渲染SSR/预渲染:

更好的SEO

更快的内容到达时间(首屏加载更快)


http://www.ppmy.cn/news/60553.html

相关文章

2023年留学基金委(CSC)青年骨干教师出国研修项目解读及建议

5月4日,国家留学基金委(CSC)公布了2023年青年骨干教师出国研修项目通知,知识人网小编现将其选派工作流程、选派办法、申请材料及说明原文转载并加以解读、提出建议。 知识人网解读及建议 一、2023年的通知精神与往年相比&#xf…

React 第三方插件 —— Cron 表达式生成器(qnn-react-cron)

qnn-react-cron 可以看做 react-cron-antd 的升级版(具体“渊源”可见文档),现有功能如下: 🎉 全面支持 cron:秒、分、时、日、月、周、年 🎉 日及周条件互斥,自动改变响应值 &…

微服务学习——微服务

认识微服务 单体架构 将业务的所有功能集中在一个项目中开发,打成一个包部署。 优点: 架构简单部署成本低 缺点: 耦合度高 分布式架构 根据业务功能对系统进行拆分,每个业务模块作为独立项目开发,称为一个服务。 优点: 降低服务耦合有利…

Spring的第十二阶段(01):Spring实现AOP的简单使用

1、使用Spring实现AOP简单切面编程 需要导入工程的jar包 Spring的核心包 spring-beans-4.0.0.RELEASE.jar spring-context-4.0.0.RELEASE.jar spring-core-4.0.0.RELEASE.jar spring-expression-4.0.0.RELEASE.jarSpring的测试包 spring-test-4.0.0.RELEASE.jarSpring日记相…

《通过十几轮数据进行模型训练,实现精确的无创血糖测量的演绎学习》阅读笔记

目录 0 演绎学习 1 论文摘要 2 论文十问 3 论文亮点与不足之处 4 与其他研究的比较 5 实际应用与影响 6 个人思考与启示 参考文献 0 演绎学习 在本文中,DL指的是Deduction Learning,即演绎学习方法。该方法是一种机器学习方法,通过使…

Threejs进阶之十二:Threejs与Tween.js结合创建动画

tween.js介绍 Tween.js是一个可以产生平滑动画效果的js库,其官方地址为:https://github.com/tweenjs/tween.js/,可以将源码下载后,可以在tween.js/dist/文件夹下找到相应的js代码,在HTML中进行引用;也可以…

Docker Compose-模板文件说明

Compose 模板文件 模板文件是使用 Compose 的核心,涉及到的指令关键字比较多,这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml,格式为 YAML 格式。 version: "3"services:w…

创新案例|香氛新品牌观夏如何以DTC模式仅4年实现年收过亿

国产香氛品牌观夏的DTC战略,正是从产品创新、全渠道布局、社交电商营销等方面创新,实现更高效地直接触达和转化消费者。观夏作为香氛DTC品牌的创新模式值得更多国内新品牌的关注与借鉴,同时也能为传统品牌的DTC转型提供全球化视野的启示。 1.…