管理公司内部业务数据的网站。包括用户管理、商品管理、订单管理、权限控制、数据统计分析等功能。
在这个重构项目中，我担任了项目负责人的角色，负责启动和推进整个系统的重构工作。 重构的原因主要有两点： 首先，老系统使用的基于jQuery的h-ui框架样式库适配度低，控件丰富度低，缺少友好的交互提示，如请求处理中，操作完成，搜索条件保留，列表翻页重新加载等。尤其在需要批量操作数据时，缺点明显。 其次，随着运营策略的精准定制，配置项要求原来越多，数据可视化要求越来越高。 因此，我们选择使用开发效率较高的Vue框架进行重构。
在分析前后端分离的可行性时，我们遇到了三个主要问题： 接口方面，需要服务器仅返回数据，而不是整个HTML； 工作量及开发周期的问题，旧系统管理页面有300多页，不可能停止使用，等新系统全部实现要非常久； 新老项目的过渡问题。同时使用两套系统，两个地址，沟通成本高。
为了解决这些问题，我们考虑整合新旧系统。制定了以下方案： php接口返回的数据格式有一定的规范，如果请求参数带上api=1，服务端拦截器将返回内容改为json字符串格式。这种方式，服务端修改接口的成本较低。 通过配置菜单属性的方式，控制右侧是展示新页面，还是继续使用之前的页面，通过frame加载smarty模板引擎文件； 确定新旧系统的通信方式，登录状态的同步，部署在同一服务器下，因此没有cookie跨域问题； 通过菜单管理的方式，实现增量发布，用户能够更快地获得新功能。
之后开始拆分开发任务，明确的任务优先级，以及建立合理的测试提交节奏。 在功能上，努力保留用户已经习惯的布局及操作方式，例如支持一次性打开多个标签页。 功能模块被细分为：用户的登录状态、设计菜单权限、实现多标签页的管理、优化子页面的管理机制、搜索页面布局的统一（使用继承父组件的模式extend，重写父组件的方法）
在技术选型上，我们使用了Element-UI组件库、Axios处理数据交互、Vuex状态管理库维护应用状态和ECharts数据可视化库等。Webpack用于模块化打包和优化。 我们构建了基础组件库，封装了axios，使其能够根据不同的请求前缀，将请求转发到不同的系统获取数据资源。 创建一系列可复用的UI组件，开发了图片上传组件，该组件能够在用户上传图片时提示尺寸和比例要求，对超出大小限制的图片进行压缩处理。 以及svg图标组件，并对kindeditor编辑器进行了封装、列表扩展了超长文本的折叠功能。 还开发了一系列工具类，获取最近一周、最近一个月的数据，设置查询日期的默认值，进行日期格式化，数字格式化。自定义指令用于点击外侧关闭菜单或弹层。
在开发过程中，发现用户在查找菜单时存在不便，因此提出了新增菜单搜索功能的需求。 在部署到测试环境时，我将静态资源迁移到了php服务器下，并编写了基于node的部署脚本。
历时2个月，完成了30多个页面的重构，并新增了数据看板、消息推送、客服聊天等三个重要模块。 通过这次重构，我们创建了一系列可复用的UI组件，减少了后续开发时间，提高了整个平台的一致性和开发团队的工作效率。
