javascript - toB项目页面定制化问题？

Question

一个产品给多个甲方用，同一个功能给多个甲方定制不同的页面，代码共用一套
方案1: 菜单里面每个甲方配不同的菜单，比如甲方1环境，路径配置甲方1页面的路径，甲方2环境，配置甲方2页面路径
方案2: 页面外面包一层,用v-if判断加载不同的页面
<template>

<div v-if="甲方1">  <甲方1页面></div><div v-if="甲方2">  <甲方2页面></div>

</template>
请问哪种方式好，或者还有什么其他方法？

Answer 1

你可以配置化一下会比较好,你定义一个全局变量

var menuUserList = [    'a':['菜单1','菜单2','菜单3'], // 甲方1    'b':['菜单3','菜单4','菜单5']  // 甲方2] 

a,b 可以看成一个角色,多个用户可以为同一个角色
当甲方登录的时候,经过某些判断获取到他是a角色
菜单也就可以这样写

// js 某些判断后获取到用户角色为a// var navList  = this.getUserInfo().role // 值: menuUserList[a]var navList = menuUserList[a]

<div v-if="navList.indexOf('菜单1')">  <菜单1></div><div v-if="navList.indexOf('菜单2')">  <菜单2></div><div v-if="navList.indexOf('菜单3')">  <菜单3></div>

这样扩展性,可复用性,管理性都能有所提高

Answer 2

这个问题涉及到前端开发的代码组织和复用策略。下面列出的每种方案都有其优点和缺点。

方案1：

• 优点：每个甲方都有其独立的菜单和路径配置，可以完全独立开发和测试。当只需要修改一个甲方的页面时，不会影响到其他甲方。
• 缺点：对于相同的页面功能，需要维护多套菜单和路径配置，增加了维护成本。同时，如果每个甲方都有大量的页面，会导致网站结构变得非常复杂并且难以管理。

方案2：

• 优点：只需要一套菜单和路径配置，简化了网站的维护和管理。通过 v-if 判断，可以动态加载不同的页面，灵活性强。
• 缺点：当需要修改一个甲方的页面时，需要重新编译和部署整个项目。这会显著增加开发和测试的时间。同时，由于页面是动态加载的，对于搜索引擎优化（SEO）可能有一些负面影响。

除了上述两种方案，还可以考虑使用更高级的前端开发框架，如 Vue 或 React 的路由和组件化机制来实现页面的动态加载和复用。例如，Vue 的动态组件和 React 的路由系统都可以实现不同页面和组件的动态加载。

综合考虑，选择哪种方案取决于具体的需求和情况。如果甲方数量不多，且每个甲方都有大量独立的页面，那么方案1可能是更好的选择。如果甲方数量多，且修改页面的频率不高，那么方案2可能更合适。如果需要同时考虑开发效率、可维护性、可扩展性和 SEO ，那么可能需要寻找一个更复杂的前端框架来满足需求。