把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. 重构的难点在哪?

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

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

相关推荐
bysking20 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
58沈剑20 分钟前
80后聊架构:架构设计中两个重要指标,延时与吞吐量(Latency vs Throughput) | 架构师之路...
架构
王哲晓36 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41139 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v40 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js