前言

公司是一家做无人驾驶的独角兽公司。试车过程采集的各项传感器数据经过几个部门处理后，我们组负责将各项指标数据的展示给B端客户，我任务是对接后端展示告警数据。其中包含多种告警形式、多种看板数据的筛选方式，多种展示形式。技术栈为Quasar+Vue+Axios+Echarts。

单点登录

第一个任务是在现有的前端加入单点登录，提高系统的安全性。因为是第一次接触Quasar和单点登录，压力还是蛮大的，经过两天的恶补，把官方文档反复看翻了几遍，再围绕下面的几个问题去思考如何实现。

  1. 什么是Keycloak？
  2. 学习前端如何对接Keycloak
    有JS原生的实现方式，还有Vue的方式，因为Quasar框架是Vue的二封装，我果断选择了Vue的方式
  3. 在github找到了vue-keycloak，研究明白demo，主要关注如何实现登录退出
  4. 前端集成vue-keycloak服务

用户的登录流程为：
前端先判断当前用户是否拥有keycloak登录授权=>没有则会跳转到keycloak的登录页完成验证=>验证通过后则跳转回当前页

在集成的过程中出现的几个问题：

  • vue-keycloak是基于Vue的，需要在Vue实例化之前挂载，Quasar没有main.js文件。

    官方解释是main.js文件非常容易混乱，难以维护，这与Quasars鼓励开发人员编写可维护且优雅的跨平台应用程序的理念相违背。
    解决办法：
    Quasar提供了一种boot挂载的方式，初始化Vue实例前能帮我们自动挂载boot下面的启动内容到Vue上。

  • 官方的vue-keycloak的作者是在Vue实例化之前做登录权限判断，Quasar没有main.js文件。Vue实例化都是框架自动帮我们完成，所以需要想其他的解决办法。

    解决办法：
    我阅读文档发现this.$keycloak，能直接访问这个Keycloak挂载后的全局对象，进而判断当前的状态是否已授权，因此可以使用条件渲染的方式完成。

  • Keycloak验证成功后，重定向的URL后面带上了Token导致无法重定向到404页

    解决办法：
    使用路由正则解决

后续工作：

  • 验证成功后，还需要将Keycloak返回的用户信息和Token放在Axios的请求拦截中，让每次的请求都带上。
  • 右上角添加退出按钮，点击后调用keycloak的logoutFn回调即可实现退出。
  • 前端添加loading动画，因为keycloak验证也需要几秒时间，添加动画能提升用户体验。

开发看板

后面的任务都是在开发新的数据看板。先看同事的程序，学习看板的实现方式。主要的看板都是一千多行的vue文件，里面很多条件判断。应该是没做组件拆分，而且各种bug修复后也没有重构，导致程序越来越大。我边看边Debug，捣鼓半天终于摸清了实现原理。
看板基本都是一致的，上面是筛选条件，中间可能有一个表格、下面可能是多个图表。
接下来内容是对一组数据看板的开发，主要就是Quasar组件库的使用、Echars使用、API封装、Mock数据、组件封装复用、条件样式、添加样式和动画。

表单组件自定义

这种自定义表单组件开发是我在实习中经常遇见的。这里举个例子。
一般都是使用Input和Select类型组件作为条件筛选的输入，因为车载传感器数据有上百种，我们对数据进行根据精准的分类需要，如下达到了三个层级。比如车上嵌入式设备很多，就会区分cpu1和cpu2,泊车时会有超声波雷达、毫米波雷达的数据，就会区分为sensor1和sensor2。

- dev_lab_a
  - cpu
    - cpu1
    - cpu2 
  - park_distance
    - sensor1 
    - sensor2
  ......

比如有一个需求：

用户想看cpu1、cpu2、sensor1数据的数据差异(这里的数据是连续的，根据筛选的时间，多则会有上万条)

此时就必须 造轮子实现 表单组件的自定义

上面是一张演示动态图，如果没动可以右键 在新标签页中打开链接

特征：

  • 鼠标点击右侧标签选择栏区域外的地方，会自动关闭右侧标签选择栏
  • 下侧的+点击后会变成输入框，并完成聚焦。输入后其他地方点击或输入回车，则会提交
  • 输入组名的时，如预先判断当前组名是否存在。
  • 当选择我组件超过input的长度时使用…
  • 每个label 都会区分 name 和 code，name作为展示名，code区别。因为这样有利于显示中文
  • 在不同层级会出现code同名的情况，底层使用不同层级的code拼接来识别。

优化

组件拆分

组件拆分在前端开发中至关重要，能够极大的提高代码的可维护性和可读性。我将那个同事写的一千多行的vue文件进行拆分，因为报表主要使用的就三个功能，我将组件拆分为三部分，分别是filter、table、chart，作为通用组件。

  • filter是条件筛选组件，包含Input、Select、表单组件自定义等等，将多种筛选条件传入到这里，每张报表传入筛选参数即可。
  • table表格组件，将需要在表格的通用功能封装成一个组件，提供自定义插槽，作为对组件扩展。
  • chart作为图表绘制组件，实现各种Echarts数据的请求、处理到渲染。

在filter组件中要表单组件自定义，则加载对应的组件。这里的组件通信只涉及简单的父子组件通信，则使用参数传递和ref的方式就行。

echarts多图表的大数据渲染优化

有时候后端需要渲染的数据超过了两万条，导致每次渲染的时候都会有轻微卡顿，页面需要渲染多张大数据图表时，这时候的卡顿会更加严重2-3s。经过我的分析后发现是Echarts绘制数据太多导致的卡顿，我尝试关闭Echart的动画效果，只是稍微好了点。
最终采用采用异步渲染的方式，在发起axios请求的时候，设置图表为loading状态，再请求，处理、渲染。渲染完成后关闭loading状态。这样虽然不能完全解决Echarts渲染大数据卡顿问题，但能告知用户正在加载数据。

其他工作

埋点

前端埋点，后端统计用户的访问情况。这个功能比较简单，使用前置路由守卫，在每次URL跳转时，都发一个POST请求，带上用户访问信息。

Echart

绘制警戒线、loading、暂无数据、两个Y轴、markArea、dataZoom等功能，查看Echarts的API文档都很轻松的实现。
在绘制警戒线后，想要将图例中显示出来，想完全自定义lenged，legend必须与数据相关联，没找到相关API，最后建立了几条单点隐藏的线条，设置图例不可点击，再使用图例自定义显示的样式和内容，达到这样的效果

关于警戒线问题，详细内容请阅读
但是后来发现Echarts可以设置附标题，位置任意调整。可以解决我的自定义图例问题，这也是一种实现方式吧。

样式冲突

Vue文件的style作用域默认是全局下的，同事修改全局下的样式会影响到我写的组件样式，注意添加将scoped改为局部样式生效。

浏览器缓存

当跳转页面后，回到原来的页面后，原来选定的查询参数就会丢失。每次输入筛选参数又太麻烦，我就想使用浏览器缓存解决这个问题。

缓存每个页面的查询参数，开始使用的localStorage，将Filter组件的参数存起来，因为localStorage一直存在浏览器中，导致开发中容易出现问题。后来改用sessionStorage，这样在只在当前页有效，窗口关闭也会随之清除。

编程式导航

在表格中，需要对某些数数据实现点击跳转，则需要编程式导航实现，点击跳转并传递参数，新页面拿到参数并填充到对应表单中，从而实现Filter组件参数的更新。

总结

这段实习中，主要实现了多种形式告警的看板开发、单点登录、将通用组件进行拆分、已经一些性能优化。
这次实习让我有机会深入了解大厂项目开发流程，在项目开发中，随着新需求提出，会经常重构一些功能，就像螺旋式上升的过程，项目会在这个过程得到不断的完善。我们在不断前进的过程中会回顾和巩固我们已经学到的知识，并且在每个循环中都会向上迈进一步。