把jsp重构成vue

记录一次重构的经历与感想！望自己将来开发之路越走越顺利。

话说，我在入职之前，公司一直使用的jsp技术，并结合jQuery来处理前端页面逻辑。

但在我入职之后不久，我们领导就要求把它重构成vue。

这时，我对jsp根本不熟，业务也没摸清楚。且在这个关键时刻，另一个前端因为离家较远直接离职了！

这个担子竟然压到我一个人身上，心里一万匹草泥马奔过。。。

但也没办法，只能赶鸭子上架，怀着极其忐忑的心情进入了开发阶段，当然也有点兴奋，于我而言这也是一个难得的实践机会！

我把这次重构的经历大致分成四个阶段：（1）摸清楚jsp项目的代码（2）用Vue CLI把项目工程搭建起来（3）整理业务逻辑（4）写vue代码

1.摸清楚jsp项目的代码

老项目中的jsp文件是长这样子：

JSP（JavaServer Pages）技术是一种基于Java的Web应用程序开发技术，它允许开发人员将Java代码嵌入到HTML中，以动态生成Web页面。

虽然这是一个比较古老的技术，我也是一脸懵圈，但秉承着前端框架无非是对html、css、js的结合的原则，我硬着头皮读代码。

经过一段时间的浸泡，并且在分析后，我发现，只需要稍微懂一点jsp技术，其实就完全可以读懂jsp了，jsp页面最大的特点就是可以通过java注入参数，除此，它和所有前端框架一样是由三部分组成：

• html部分，就把jsp文件看成html文件，虽然里面注入了一些参数，但这些参数可以让后端通过接口返回，再拿去渲染就行了
• css部分，老项目和vue基本可以共用
• js部分，新老项目的功能是一样的，老项目中用jquery实现的，再拿vue去实现一遍即可

基于这些，此时我对把jsp重构成vue已经有了一些把握，总体原则大概是：对html、css、js这三部分，可以重用的部分就重用，不能重用的部分就重写。

2.用Vue CLI把项目工程搭建起来

使用脚手架，很快就搭建好了项目，都是傻瓜式的操作，这个没什么好说的，给大家看一下目录结构：

3.整理业务逻辑

我后知后觉才发现，重构最难的不是编码，而是业务逻辑。

我对业务逻辑的信息来源有两个：一是看老项目的源代码，二是问其他老员工。

但是前者效率极低，后者又困难重重。

为何这么说，参考以下两点：

1. 程序员最痛苦的莫过于阅读别人写的代码
2. 作为新人，得遵守一些职场潜规则

但又没办法，只得蛮力通关 了，忍受着巨大的痛苦，一方面得加班阅读代码 ，一方面要虚心求教老员工 (我司的环境大概是，对业务越熟的人，脾气就越大，问题问多了，他们会很不耐烦，对此，我做了很多心理建设)。

后来，我也是整理出了一份前端业务逻辑资料，然后被放到了公司公共文件夹里，被后来的员工永久查看学习🐶！

4.写vue代码

最后阶段就是编码了，我把它分为前期和后期。

前期攻坚难点，重点关照那些难实现的功能，后期画页面，要保持效率，基本要能够一天画2个页面。

后来翻看了一下代码库的提交记录，从第一行代码的提交，到进入测试，历时3个月。

编码阶段是枯燥乏味的，前面靠"蛮劲"可以挺过去，但是现在每天得靠"有恒"二字给自己打气🐪！

然后，终于把项目重构完成了，我也长吁了一口气！

但是事情并没有我想象的那么简单，更恶心的事情来了，bug颇多！

短短几天，测试就提了几百个问题单！

泪奔啊！蛮劲用完了，恒心也消磨的差不多了！但是问题还是不依不饶的出现。。。

可能我这人就属于那种打不死的小强，想着好不容易坚持到这一步，无论如何我都要拿下它！

于是又向bug们发起了"猛攻"！

又渡过了一段漫长且艰难的解bug时期。。。

终于把bug也解完了，我和测试都长吁一口气！

什么？代码要想顺利上线，还要处理CI？

最后，我精疲力竭的处理完了一千多个CI问题，也终于体会到了，有时候，不逼自己一把，你永远不知道自己可以做到什么程度！

至此，项目终于上线了！

这次重构经历,我思考了这么几个问题：

1. 公司为什么要重构这个项目？

   答：这个项目本来用户量大，将来还有大量的新需求要接，但是技术架构上已经落后了，如果不重构，将来搞不定新需求，老代码也不好维护，毕竟新来的员工会jsp的没多少。

2. 重构的重点在哪？

   答：在于业务。业务是大于技术的，特别是新员工，别急着钻研项目中用到了哪些技术，还是多花点时间了解业务吧！

3. 重构的难点在哪？

   答：技术上的困难总有办法，但是沟通上的困难却似不可逾越的鸿沟，因为工作的日常除了编码，更多的是：和产品互怼、与测试撕逼、向领导交差，所以，程序员们，提升情商吧！

我觉得，最重要的，是进行心态建设，遇到难关不要怕，永远相信自己可以挺过去，毕竟知识是死的，人是活的，只要我们"有恒"，就算再难的东西，用"蛮劲"去"猛攻"，终将拿下！