点击空白处退出提示
作品详情
2、该项目使用React Hooks技术开发,我是项目的前端负责人,负责实现项目整体的搭建、落地、核心逻辑的实现。项目快速落地、稳步迭代、通过合理的Nginx配置与旧平台共用同一个域名,实现平稳过渡无痛迁移。
3、项目开发过程中主要遇到几个问题有
第一个主体交互逻辑框架的实现:项目整体偏向后台管理系统,常见的后台管理系统的界面一般是左侧菜单,右侧单一界面的展示区,该项目在此基础上需要实现多个菜单同时打开在右侧展示为多个Tab页签的方式。解决方案:通过合理的组件拆分结合发布订阅模式利用Antd中Tabs组件来承载业务页面,并使用组件的路由作为Tab的key来确保唯一性实现左侧菜单、右侧展示区、顶部Tab栏以及浏览器url前端路由的联动;
第二个问题Tab的按需刷新问题:Tab组件的设计使用场景为页签的切换展示,本质是一个显示/隐藏的逻辑,通常情况下不会每次切换Tab都要重新渲染(性能考虑)但是项目中有个别的页面确实需要灵活的在页签重新激活的时候自动的执行一些刷新操作。解决方案:合理利用Dva中的数据流,制定发布订阅模式,指定需要刷新的模块名,有特殊需求的模块按需订阅实现;
第三个问题动态菜单的实现:在项目开发的初期,前端各模块的菜单是通过前端路由配置实现的,后续的需求开发中遇到需要通过后端接口数据返回来动态的加载的菜单需求。解决方案:菜单与路由分离,将前端模块菜单的路由配置与人员角色进行关联并传入后端保存,从接口数据中读取权限菜单数据,利用React动态路由来实现动态的菜单插入需求。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论