点击上方关注 前端技术江湖，一起学习，天天进步

作者：凉城a

https://juejin.cn/post/6959808183988650014

前言

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

• 为什么重构？

1. 项目是18年开始的，过手人数较多且没有制定代码规范，看起来都费力。

2. 重复代码随处可见还不能随便删除，否则真的是“给我一个杠杆，我可以撬起整个地球。”

3. 这个项目是jq+bootstrapt写的，代码十分臃肿，随着版本的不断迭代，项目越来越大，维护成本也越来越高。

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

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

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

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

由于项目是我一手开发，所以也建立了一个组件库。

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

GitHub地址

成长

错综复杂的权限问题

之前做过的权限这一块，

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

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

这次啥都要自己动手着实让人有点头大。

由于公司的重构是纯前端重构，所以说很多东西都只能在前端改变。

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

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

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

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

https://juejin.cn/post/6944885228368298020

gis全方位运用

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

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

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

在实施过程中遇到过很多问题，而且这类文档较少。必须要自己思考和反复扒拉官方文档。

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

极致文件压缩

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

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

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

https://juejin.cn/post/6940430496128040967

https://juejin.cn/post/6935627673989283848

高效文件上传

之前用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.nameresolve(result)
}).catch(function(err) {console.log(err)
})
复制代码

上传完成后的鉴权回显

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

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

详细过程见下文

表格组件

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

由于项目中表格的复杂程度不一，所以说有些页面还是必须特殊情况特殊处理。

毕竟我一个人的力量是有限的，所以也希望大家可以添砖加瓦，进一步完善它。

GitHub地址

友情提示：大家使用时多少会和你的业务逻辑有偏差，略作修改在所难免

即时通讯的实现

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

采用的是第三方融云实现的,总体来说还是不错的，建立连接只需要0.1s,基本秒进秒同步。

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

实战技巧合集

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

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

总结

这次项目重构，从零到一，我的的确确成长了不少。

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

刚开始准备全面重构的时候，我是犹豫的，害怕未知的挑战。反正老项目也可以正常运作，我完全可以轻轻松松的维护。

但是我回想自己的coding经历，

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

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

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

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

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

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

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

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

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

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

第一个是外包银行14K

第二个外包公安13K

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

我当时纠结了好久，我一直问自己到底是为了什么来上海，我觉得自己需要技术沉淀一年，所以最终我选择了第三个。

所以就有了现在，我还有什么可犹豫的呢？我不禁想骂自己。

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

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

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

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

说不出为什么，但是很开心、很自豪、很有成就感。

可能这就是热爱吧。

• 对于遇到的问题，我觉得我们需要有自己的思考。

尽信书不如无书

• 对于工作，我觉得无论热爱与否都需要责任在身

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

• 对于生活，我觉得无论开心与否都需要乐在其中

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

关于本文

作者：凉城a

https://juejin.cn/post/6959808183988650014

The End

欢迎自荐投稿到《前端技术江湖》，如果你觉得这篇内容对你挺有启发，记得点个 「在看」哦

点个『在看』支持下