[发明专利]一种SAAS平台定制化UI解决方法

说明书

本发明提出了一种SAAS平台定制化UI解决方法，包括管理后台、服务端和客户端，以下为实施步骤：(1)设置前端页面，前端页面为页面组件和路由的结合，页面组件由若干子组件组合而成；定制主题样式，将主题样式值定义成变量，租户自行管理后台编辑页面组件属性，用来根据租户的需求编辑UI；(2)编辑页面组件属性后关联租户域名存储，在用户访问平台时调用服务端接口获取，通过域名区分、加载和覆盖主题样式；(3)获取的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成。

技术领域

本发明涉及互联网技术领域，特别涉及一种SAAS平台定制化UI解决方法。

背景技术

随着社会的发展和科学技术的不断更新，互联网的普及成为一种必然的趋势，当下越来越多的传统企业面临着数字化转型，SAAS平台是提供商为企业搭建信息化软件服务平台，因SAAS平台租户(企业)的业务方向、特色的不同，为满足其用户的体验需求，不同租户对平台的UI有着各种定制化的要求，平台前端基于VUE SPA，由于平台本身不会针对不同租户独立部署服务，需提供租户一套定制化UI的解决方案。

发明内容

(1)一种SAAS平台定制化UI解决方法，包括管理后台、服务端和客户端，以下为实施步骤：设置前端页面，前端页面为页面组件和路由的结合，页面组件由若干子组件组合而成；定制主题样式，将主题样式值定义成变量，管理后台编辑页面组件属性，用来根据租户的需求编辑UI；

(2)编辑页面组件属性后关联租户域名存储，在用户访问客户端时调用服务端接口获取，通过域名区分、加载和覆盖主题样式；

(3)获取前端页面中的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成。

优选的，所述主题样式通过css预处理语言结合编译工具编译成css文本，关联租户标识存储。

优选的，所述用户访问平台时调用服务端接口区分用户所属租户，并在客户端上加载对应的主题样式。

优选的，所述编辑页面组件属性以props的形式传递给组件，组件根据props 渲染UI。

优选的，所述编辑页面组件属性包括以下步骤：

(1)在管理后台提供可视化UI编辑器结合组件库，由租户自定义UI；

(2)允许租户在管理后台配置页面路由地址和页面组件，通过VUE Single PageApplication框架中的vue-router挂载前动态设置路由，页面加载时通过 VUE SinglePage Application框架中的VUE动态组件结合。

优选的，所述VUE Single Page Application框架中还包括VUE Router和 VUE异步组件，租户在管理后台编辑的组件以VUE异步组件的形式引入项目内，项目编译打包过程中将组件代码分离打包成js文件，网页加载的时候按需加载对应的js文件和其它资源。

本发明的有益效果是：

该方案包括定制主题、局部UI内容、整体页面内容，满足平台租户不同程度的UI定制化要求，以及页面资源按需加载；定制页面配置化有助于平台运营配置收敛，同时一定程度上减少了前端开发工作量减少迭代频率，有助于平台代码逻辑的抽象组装，提高前端组件复用性，平台产品功能沉淀，从而提升业务数据。

附图说明

图1为本方案的方法流程图。

具体实施方式

如图1所示，基于以上条件具体的实施步骤如下：

1.允许用户定制主题