Vue重构项目完结篇

前言

2021年3月底，我决定开始重构公司的后台管理项目。 2021年5月初，我完成了项目重构。 50+个页面，预期2个月，结果一个多月提早完成了。

• 为何重构？

1. 项目是18年开始的，过手人数较多且没有制定代码规范，看起来都费力。
2. 重复代码随处可见还不能随便删除，不然真的是“给我一个杠杆，我能够撬起整个地球。”
3. 这个项目是jq+bootstrapt写的，代码十分臃肿，随着版本的不断迭代，项目愈来愈大，维护成本也愈来愈高。

这是一个恶性循环，我以为无论怎么优化，只不过是在给他换深色衣服罢了（深色显瘦），要想根本上解决问题，仍是得全面重构。

• 从零到一的过程困难吗？

既然选择了远方，便只顾风雨兼程。

项目是我一我的全面负责的，有必定的压力同时也收获了不少。 不管是作什么，从零到一一定无疑是困难的。 我以为大体能够分为三个阶段： 准备阶段：项目需求必须都有大体了解而后决定项目选用框架、项目周期把控、项目细节优化、需求优化、哪些地方能够实现升华，达到质的飞跃。 实施阶段：会遇到不少突发情况，你须要迎难而上。好比某个需求没法按照原方案实施、以前采用的依赖版本更新后出现各类问题。 结尾阶段：你须要回顾并理清全部需求确保万无一失。

因为项目是我一手开发，因此也创建了一个组件库。

欢迎你们添砖加瓦，共建美好家园。

GitHub地址

成长

错综复杂的权限问题

以前作过的权限这一块，

页面权限是后端直接返回路由，前端直接拿过来用

功能权限的也是后端整理出来，前端直接拿过来用

此次啥都要本身动手着实让人有点头大。

因为公司的重构是纯前端重构，因此说不少东西都只能在前端改变。

权限这一块分为页面权限和功能权限，因为后端返回的是tree数据，我必需要对数据进行处理，

提取出有权限访问页面和功能权限点。这个过程无疑是使人难过的。

提取完成以后页面权限的实施方案就是动态路由

功能权限的实施方案就是自定义权限指令

点击图片无效传送门

gis全方位运用

19年的时候就接触过gis，当时是宇通客车的车辆监控以及大屏展现全球化。因此如今作起来还算轻车熟路。

这个需求是echarts结合高德地图实现当日用户活跃地域分布图。也就是用搞得地图打底，echars展现数据。

我决定采用echarts-extension-amap+echars+ 高德API进行实现

在实施过程当中遇到过不少问题，并且这类文档较少。必需要本身思考和反复扒拉官方文档。

源文件以及你在开发中可能遇到的坑在这里

极致文件压缩

因为公司业务偏社交，也就避免不了各类图片、大小文件、视频。

对于文件的极致压缩处理是必须的，以前也详细介绍过文件压缩这一块个人解决方案以及心得。

在这里我就不详细说了，下面是直通车。感兴趣的小伙伴能够去看看，相信对你会有帮助。

点击图片无效传送门

点击图片无效传送门

高效文件上传

以前用jq写过关于上传图片到阿里云，此次用Vue显然是要从新封装的。

图片上传分为单图片上传和多图片上传。

• 为何要区分单文件仍是多文件？

多文件确定要遍历，出于性能考虑，单文件没有必要走遍历。

说说思路吧

极致压缩 --> 判断是单文件仍是多文件 --> 开始上传（以及断点续传、上传失败删除文件等问题）

点击图片无效传送门

音视频文件上传

鉴定视频文件是否为h.264格式

因为APP目前只支持h.264格式的音视频文件播放，因此说这个必须得作

点击图片无效传送门

播放视频，截取视频封面

这个问题的解决方案很容易想到

• 页面隐藏一个video标签

• 用户选择视频后，借助 window.URL.createObjectURL(file)建立一个本地视频连接给页面隐藏的video标签

• 让它播放，借助video的onloadedmetadata、ontimeupdate方法建立cavas画布截屏

• 截取完整后，删除视频连接window.URL.revokeObjectURL(videoUrl)释放内存

上传视频

项目视频上传文件最大为2G,因此说颇有必要来一个上传进度条以及断点续传、上传失败特殊处理

multipartUpload方法里有个progress回调会实时返回上传进度，同时支持断点续传。仍是比较省心的。

client.multipartUpload(storeName, file, {
// eslint-disable-next-line require-yield
progress: function * (percentage, checkpoint, r) {
  that.progress = Math.ceil(percentage * 100)
}
}).then(function(result) {
    console.log(result)
    result.name = '/' + result.name
    resolve(result)
}).catch(function(err) {
    console.log(err)
})
复制代码

上传完成后的鉴权回显

对于鉴权我以前有介绍过，想了解的小伙伴能够看看,

简单来讲就一句话“防盗、节流、快速播放”

详细过程见下文

点击图片无效传送门

表格组件

项目中涉及到最多的也就是表格了，因此说我单独封装了一套适合大多数表格页面的组件。

因为项目中表格的复杂程度不一，因此说有些页面仍是必须特殊状况特殊处理。

毕竟我一我的的力量是有限的，因此也但愿你们能够添砖加瓦，进一步完善它。

GitHub地址

友情提示：你们使用时多少会和你的业务逻辑有误差，略做修改在所不免

点击图片无效传送门

即时通信的实现

后台管理项目中有个模块是连接APP聊天室的，实现即时通信+及时发现搞事用户禁言，封禁等功能

采用的是第三方融云实现的,整体来讲仍是不错的，创建链接只须要0.1s,基本秒进秒同步。

想详细了解的小伙伴，请移步

点击图片无效传送门

实战技巧合集

这里面是在项目中遇到的各类比较杂的问题，部分重点问题记录在里面了。

例如：实战中的突发问题、一些好的插件等......

点击图片无效传送门

总结

此次项目重构，从零到一，个人的确确成长了很多。

之前都是中途加入某个项目，或者负责某个模块。

刚开始准备全面重构的时候，我是犹豫的，惧怕未知的挑战。反正老项目也能够正常运做，我彻底能够轻轻松松的维护。

可是我回想本身的coding经历，

19年刚工做在郑州为了工资高点，我以三年工做经验进了外包，为了弥补本身在实战上的经验不足，那段时间我通宵达

旦的学习，天天虽然压力很大，几个月下来我居然彻底适应了这种生活，对于需求轻车熟路。妥妥的“三年经验”，

随后手中负责的项目愈来愈多，最多的时候有8个。

虽然你们都夸我年纪轻轻，coding技术都这么好。可是我也不敢说我才刚毕业。

一年左右时也就是20年6月份，手上还有两个“小弟”，乙方公司想让我“转正”去他们公司。

我以为年轻的我应该去一线拼搏，这样的“养老生活不是我想要的”，因而我拒绝了。

直接裸辞去大理和丽江旅游了，为期10天的旅游很快就结束了。

我就直接飞来了魔都上海，在网上找的房子，也顺利的住进去了。

次日开始准备简历，开始面试了。面试大概一周我发现外面的世界对于“专科毕业”好像不是那么友好。

面试了7家公司，还好拿下了三个offer。

第一个是外包银行14K

第二个外包公安13K

第三个是本身公司业务12K，前端负责人

我当时纠结了很久，我一直问本身究竟是为了什么来上海，我以为本身须要技术沉淀一年，因此最终我选择了第三个。

因此就有了如今，我还有什么可犹豫的呢？我不由想骂本身。

会当凌绝顶,一览众山小。

本身负责一个项目从无到有的过程，虽然有过许多挑战也好、困难也好

可是当你写完最后一行代码，进行打包交付的那一刻，

仿佛全世界都在为你骄傲，为你鼓掌。

说不出为何，可是很开心、很自豪、颇有成就感。

可能这就是热爱吧。

• 对于遇到的问题，我以为咱们须要有本身的思考。

尽信书不如无书

• 对于工做，我以为不管热爱与否都须要责任在身

人生须知负责任的苦处，才能知道尽责任的乐趣。

• 对于生活，我以为不管开心与否都须要乐在其中

明月几时有，把酒问青天。

写在最后

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

若是你想了解更多，请点这里，期待你的小⭐⭐

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注😊

• 本文首发于掘金，未经许可禁止转载💌