公司的老项目一般是前后端混合开发的,管理后台类型的项目一般左侧菜单与右侧内容是分离的,通过iframe进行渲染,内容上方会有多标签页进行页面切换。

  1. 菜单:该部分其实也是动态生成,前端进行重构的话也应保持一致,由接口返回菜单数据进行渲染。
  2. 右侧内容:该部分其实分为两种情况,用帆软等工具快速生成的页面其实还是应该保持iframe渲染的方式,其他类型的页面如果进行重构则应有路由->组件的渲染方式。该部分要做的工作涉及到菜单的改造,下面说一下思路:
  • 后端返回的菜单数据应可以区分两种菜单类别,前端可利用标识符进行不同的渲染或者赋予不同的点击触发方法达到以iframe渲染页面或路由渲染组件的目的。
  • 老项目由于都是iframe渲染,一般不会将页面的路由反应到地址栏部分,若是新项目也想要保持风格一致,则路由部分需要进行变动。可考虑webStorage或者redux(vuex)进行路由存储。数据格式形如:[{key: ’02a65b’, path: ‘/page/module/name’, isUrl: false, name: ‘pageName’}]。
  • 菜单项的点击事件需要根据后端返回的菜单项字段区分到底是路由还是完整的页面URL,并修改对应的redux中的标签页数据。
  • 点击相应的标签页激活可利用菜单的key进行区分,若已存在于数组中则只修改activeKey,相应标签页进行内容的渲染,若不存在则push到数组最后一项并修改activeKey。
  • 多标签页的内容渲染也与菜单的标识符有关,根据isUrl字段来决定到底以何种方式渲染内容(组件?iframe页面?)。针对用户的交互优化可给多标签页增加一些操作:关闭当前标签页(利用filter对数组进行筛选,筛选出当前key的项并剔除,若数组还存在元素,修改activeKey为前一项),关闭其他标签页(上一步筛选的反操作),关闭所有标签页(数组置为空,activeKey置为null)
  • 路由信息可维护与前端项目中,改造页面的路由与组件映射关系是必须的,结合redux存储多标签页信息可完美的仿照旧项目。(虽然不清楚为什么要这么搞,但是既然领导想这样)