Vue重构项目完结篇

ゝ一纸荒年。 2023-01-22 12:54 19阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![edd65c519ce737d2a4d435bc6f079d02.png][]

# 来源：凉城a #

https://juejin.cn/post/6959808183988650014

# 前言 #

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

*  **为什么重构？**

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

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

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

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

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

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

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

GitHub地址：https://github.com/kinoaa/kinoaa-components

# 成长 #

## 错综复杂的权限问题 ##

之前做过的权限这一块，

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

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

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

![a132db6992ee8299edb04a6c4126bb68.png][] image.png

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

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

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

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

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

![82e76d9d111e356ba8fef16022f4beca.png][] 点击底部【阅读原文】传送

## gis全方位运用 ##

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

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

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

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

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

## 极致文件压缩 ##

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

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

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

![2377e9bc69dc42305a99c085441506ab.png][] 点击底部【阅读原文】传送

![a4d900e6757845758d2ace26755b6a56.png][] 点击底部【阅读原文】传送

## 高效文件上传 ##

之前用`jq`写过关于上传图片到阿里云，这次用`Vue`显然是要重新封装的。

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

*  **为什么要区分单文件还是多文件？**

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

说说思路吧

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

![40e0675657afdc22549f5d579090f972.png][] 点击底部【阅读原文】传送

## 音视频文件上传 ##

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

由于APP目前只支持`h.264`格式的音视频文件播放，所以说这个必须得做

![1f10d5464e53179edf2d1d271271fa54.png][] 点击底部【阅读原文】传送

### 播放视频，截取视频封面 ###

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

*  页面隐藏一个`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)
    })
    复制代码

### 上传完成后的鉴权回显 ###

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

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

详细过程见下文

![0f705e8d5f924160f3bae067b6fa12fd.png][] 点击底部【阅读原文】传送

## 表格组件 ##

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

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

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

GitHub地址

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

![f2217eb0e896e6e3a640e9f5dcec5fce.png][] 点击底部【阅读原文】传送

## 即时通讯的实现 ##

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

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

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

![a1e6d566f7a245bf955f94eafe0b7b25.png][] 点击底部【阅读原文】传送

## 实战技巧合集 ##

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

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

![31178bbb6908afb8e44f2615ceb32c1a.png][] 点击底部【阅读原文】传送

# 总结 #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第一个是外包银行14K

第二个外包公安13K

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

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

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

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

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

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

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

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

可能这就是热爱吧。

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

> 尽信书不如无书

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

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

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

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

# 写在最后 #

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

与你相逢，我很开心。

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

*  **文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注????**
 *  **本文首发于掘金，未经许可禁止转载????**

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[edd65c519ce737d2a4d435bc6f079d02.png]: /images/20221020/437633f560a84cf69e179d4df8ad7117.png
[a132db6992ee8299edb04a6c4126bb68.png]: /images/20221020/2eb6245609f94d18b686d17180d14af2.png
[82e76d9d111e356ba8fef16022f4beca.png]: /images/20221020/c66402d9d6bc4dd6815b989b9b791c38.png
[2377e9bc69dc42305a99c085441506ab.png]: /images/20221020/ffd3581a8f0a49398222355e1b035c0f.png
[a4d900e6757845758d2ace26755b6a56.png]: /images/20221020/a720ad803a5140b8a005b7bd93e9e126.png
[40e0675657afdc22549f5d579090f972.png]: /images/20221020/90e0985b59cf4cd8801c2bb936a8b2fa.png
[1f10d5464e53179edf2d1d271271fa54.png]: /images/20221020/953bcaf05f8847148f67fed27e634b71.png
[0f705e8d5f924160f3bae067b6fa12fd.png]: /images/20221020/df6d28a5c4b44bff99b9896d0c547421.png
[f2217eb0e896e6e3a640e9f5dcec5fce.png]: /images/20221020/55a113e9aeb94486818c8ebb1c1f9b84.png
[a1e6d566f7a245bf955f94eafe0b7b25.png]: /images/20221020/d7462f4daa614740b1e82d8aa2884459.png
[31178bbb6908afb8e44f2615ceb32c1a.png]: /images/20221020/255cefb160744669a2c280757247b64c.png