从事件驱动转向数据驱动,记录一次旧系统改造UI过程

笔者亲身经历，参与公司对外服务项目旧系统UI改造[并非完全重构]，整个改造过程的点滴记录在这里…
目前是临时版，项目还在启动阶段，随笔记录…

项目背景

Java Maven项目：
Nignx…
前端UI：jsp+jquery+bootstrap+第三方UI组件库
后端：Spring Mvc,Hibernate…
阿里云CDN +WAF

1.明确本次改造范围&重点：整体架构重构 or 只针对UI调整,后端配合有限度的调整 ？
=>期望是后者
2.是否采用前后端分离架构？
=>个人倾向No

改造目标

移除现有UI，采用自定义封装[React+Ant Design]模式

项目起步

WBS[Work Breakdown Structure]
1.盘点系统现有UI功能，引用哪些第三方组件库
jQuery
BootStrap
Datatable…
图表…
2.技术选型
a.自定义封装UI类库
封装react + Ant Design
b.整合后端Spring MVC
c.编译打包方式
d.开发模式变化：
前端：开发环境采用代理请求后端API[跨域问题]
后端：前端webpack编译好的js丢到旧项目中?
3.工期紧张-采用渐进式开发模式按照功能模块拆分，通过Nginx导流逐步替换原有功能模式
4.评估开发周期

Task	Desc	status
搭建React脚手架项目
搭建Maven Spring MVC Demo项目	仿照旧系统搭建一个纯净版项目方便后续整合
Jetty启动Spring MVC
React项目集成到Spring MVC项目	把build好的react项目文件手动粘贴到Spring MVC项目，可以看到页面效果
优化：build react 工程文件哈希问题处理	编译后的js文件会自带哈希码，导致spring MVC项目jsp每次都要手动更改引用链接
解决本地react如何Debug问题	本地react项目如果希望调用旧Spring Mvc后台Controller层请求逻辑
react整合到旧系统	react如何请求旧系统，本地Nginx解决跨域问题
搭建前端项目	旧系统后台controller数据能够成功回传并展现在react模式下的js里
自定义封装：react基础功能	父子传参优化，请求模式优化:前后端请求与后端请求mapping一致	Doclib_UI
自定义封装：打包工具		Doclib_Tool
集成自定义封装的工具包	打包工具+react antd 封装工具	基本框架搭建完毕

接下来就是逐步完善Doclib_UI:
高质量组件：提供一系列高质量的 React 组件，用于构建丰富、交互式的用户界面。
状态管理：集成或提供与流行的状态管理库（如 Redux、MobX 或 Context API）的兼容性
路由管理：集成路由管理工具（如 React Router），以支持单页应用程序的导航和视图管理
响应式设计：确保 UI 组件在不同设备和屏幕尺寸上都能良好工作，支持响应式设计
性能优化：提供性能优化工具或指导，帮助开发者优化应用性能，如代码分割、懒加载等

技术评估

先搭建前后端项目玩玩：
搭建 React 开发环境
搭建Maven Spring MVC Demo项目
使用Jetty启动Spring MVC
React与前端项目整合
自定义封装react+antd基础功能
自定义打包编译热部署配置工具

集成到 Maven 项目

复制构建文件: 将React应用构建生成的静态文件（通常位于React项目的build目录下）复制到Maven项目的src/main/webapp目录下。你可以手动复制，或者编写一个脚本来自动化这个过程。

例如，如果你的React项目目录是my-react-app，你可以将构建的静态文件复制到Maven项目的webapp目录下的static文件夹中：

cp -R my-react-app/build/* /path/to/maven-project/src/main/webapp/static/
确保静态资源被正确引用: 修改你的React应用中的静态资源路径，确保它们在Maven项目中被正确引用。你可能需要在React项目的package.json中添加homepage字段：
“homepage”: “/static”,
这样会告诉React应用在构建时，所有的资源路径都应该以/static为基础路径。

修改 Maven 项目配置
假设你的 React 应用目录结构如下：

my-react-app/
├── node_modules/
├── public/
├── src/
└── build/  <-- 构建后的生产文件在这里
    ├── static/
    │   ├── css/