Vue + SpringBoot实现个人工具(二、前端部分)

Hello， 今天是2020年正月初四， 估计不少人和我一样，这几天在家里快憋坏了， 本应该是一个开开心心走街串巷的日子。 如今我连续3天没有出门， 今天甚至都没有叠被子 😂😂😂。 不管怎么说身体健康就好， 困难都是暂时的， 『武汉加油！！』

介绍

言归正传, 本篇是继上一篇 Vue + SpringBoot实现个人工具(一、概述) 之后的第二篇内容.
在上一篇内容中, 我们概要的介绍了整个项目的技术选型, 实现方式, 包含功能等等几个方面的内容, 所以在阅读本篇内容之前, 笔者强烈建议大家先去阅读一上一篇内容.

本篇内容的重点在与整个项目的前端搭建实现, 首先从大方面来说一下, 前端采用的基准框架为Vue(并不是说Vue有多么多么好, 只是我以前没有用Vue写过项目, 再加上Vue的社区最近比较火, 多半是为了练手才选用这个)

在本篇内容中, 并不会涉及到vue 双向绑定, 或者条件渲染等等 vue的知识, 关于vue的一些基本知识, 大家可以自行访问vue官网 点击访问

UI界面

当我们的基准框架确定了之后, 我们还需要选择一套UI, 使用UI的好处大家都也都知道, 主要就是能够节省不少我们手写样式的工作量, 我在以前用React写项目的时候, 比较熟悉的两个UI是Material-UI和Ant Design, 但是这个两个UI对于Vue的支持并不是很友好, 所以我当时花费了将近一个上午的时间找到了一个Vue下的UI:

• iView UI组件库
• Element UI组件库
• AT-UI UI组件库
• Ant Design Vue UI组件库

我分别从交互方式, UI样式, 组件封装程度, 自定义样式等几个方面对上述的UI进行了一个简单的对比, 最终选用了第一个iView, 这个东西见仁见智, 每个UI都有自己的长处短处,大家以后在选择的时候, 可以根据自己喜好来选择.

组件

我们的模块也是按照我们的功能来划分的, 从上图侧边的菜单栏也能看出来一些, 那我们的前端组件和左边是一一对应的, 下边便是目录结构:

• src 源码目录
  • main.js 入口js文件
  • app.vue 根组件
  • components 组件目录
    • testutils 测试工具
      • encryptutil.vue
      • fileutil.vue
      • datasource.vue
      • dataquery.vue
      • postchild.vue
    • intergrations 数据集成
      • httpserver.vue
      • socket.vue
      • websocket.vue
      • webservice.vue
      • javascript.vue
    • utils 工具集合
      • redis.vue
      • memecache.vue
    • outs 数据输出
      • oututil.vue
      • monitor.vue
  • assets 资源目录，这里的资源会被wabpack构建
  • routes
    • index.js 全局路由配置
  • store
    • index.js 应用级数据（state）

数据请求

在我们的各个组件中, 都会涉及到获取后台数据的的请求, 综合多个方面考虑, 笔者最后采用了 Axios 官方文档地址, 如果之前没有使用过的童靴, 可以按照官网的文档进行入门. 使用axios请求后台数据的虽然已经足够简单了, 但是本着封装的思想, 我们还是一开始费点劲封装一个请求数据的模块, 然后在需要使用的模块引入即可家里这网不好用, 打不开github, 后续会把这个模块的代码挂出来.

图表插件

在我们的项目中, 还涉及到一个数据监控的组件也就是monitor组件, 然后我们需要引入一款图表, 笔者这里选择的依据就是轻量化

• v-charts
• echarts
• vue-echarts
• antV

以上几款是笔者在试用对比的时候, 选择的几款图表, 各有特长, 其中echarts是vue-echarts和v-charts的底层, 也就是说他的功能图表稍微会全面一些, vue-echarts 和v-charts 是基于vue对于echarts的封装, 但是两者也有稍微不同, 总的来说v-charts更轻量化一些.

antV 是蚂蚁金服自行研发的一个图表组件, 这个组件从美观度, 图表丰富度以及渲染效率上来说都要比echarts要好一丢丢.

我的项目中的图表, 其实不需要太多的功能需求, 主要追求的就是简洁, 性能 所以我选择了第一个v-charts. 不过如果你的项目需要功能比较多, 笔者推荐你选用antV.

图表样式如下:

懒加载和按需加载

当我把所有的组件模块编写好, 后台数据获取好之后, 在本地调试的时候没有任何问题, 然后笔者尝试开始将前后端整合(这部分内容在后端专项文章中会涉及到), 整合完成之后打包部署到服务器上之后, 有一个问题立马出来了加载慢, 不是一般的慢, 非常的慢, 因为笔者在阿里云的服务器带宽只有1M, 再加上网络波动的原因, 整整消耗了48s才打开页面.

其实对于一个下行网络带宽够用的服务器来说, 加载速度其实也还好, 但是问题就是笔者的服务器资源不够, 所以就开始想着如何优化第一次访问的加载速度?

首先排查从哪一步优化?

于是我打开F12控制台, 开始观察network部分, 看到第一次加载的时候有一个vendorxxxxxxxxx.js的文件将近有7MB左右的大小, 那初步就找到了一个方向, 因为我们的项目中引入了iView-UI以及v-charts组件, 并且我是main.js一次性引入的, 开始修改UI组件以及v-charts为按需加载, 也就是在需要的模块中, 只引入需要的模块比如只引入一个Button模块,
具体如何按需引入, 各个模块官方都有文档介绍, 直接查看官网文档就可以

修改为组件按需加载之后测试

修改之后我发现, 页面在加载的时候, vendor.js现在变为了3.4MB, 效果还不够理想, 继续开始优化.

在路由的时候, 一开始笔者为了代码的整齐, 所以路由都写在了, index.js中, 并且在路由的时候各个模块在一开始就import引入了, 于是开始修改为懒加载

关于懒加载这一部分内容, 笔者有个专项文章(文章地址), 在这留个小尾巴.

修改为懒加载之后, 再次测试

这一次测试的时候, 加载的时候vendor.js的大小压缩到了1.1MB, 加载的时候明显快了许多.

总结

以上便是针对整个项目前端的一个介绍, 其实有些地方说的并不是那么细, 比如在某个组件中我们引入了Monaco Editor这个十分优秀的编辑器插件等等, 以及在路由的时候, 为了解决地址栏去掉#号的问题, 我们修改为了history模式, 又如何解决history路由模式 在路径改变之后刷新页面, 404的问题, 这些问题没有多说, 是因为笔者觉得, 只要大家看一下代码就能明白了, 主要原因还是我在家打不开github😂, 等到网络变好的时候我第一时间把代码挂上来.

---

最后还是真心期盼这个病毒赶快消失!!
『武汉加油!! 中国加油!!』