一种SAAS平台定制化UI解决方法技术

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

【技术实现步骤摘要】
一种SAAS平台定制化UI解决方法


[0001]本专利技术涉及互联网
，特别涉及一种SAAS平台定制化UI解决方法。

技术介绍

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

技术实现思路

[0003](1)一种SAAS平台定制化UI解决方法，包括管理后台、服务端和客户端，以下为实施步骤：设置前端页面，前端页面为页面组件和路由的结合，页面组件由若干子组件组合而成；定制主题样式，将主题样式值定义成变量，管理后台编辑页面组件属性，用来根据租户的需求编辑UI；
[0004](2)编辑页面组件属性后关联租户域名存储，在用户访问客户端时调用服务端接口获取，通过域名区分、加载和覆盖主题样式；
[0005](3)获取前端页面中的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成。
[0006]优选的，所述主题样式通过css预处理语言结合编译工具编译成css文本，关联租户标识存储。
[0007]优选的，所述用户访问平台时调用服务端接口区分用户所属租户，并在客户端上加载对应的主题样式。
[0008]优选的，所述编辑页面组件属性以props的形式传递给组件，组件根据props 渲染UI。
[0009]优选的，所述编辑页面组件属性包括以下步骤：
[0010](1)在管理后台提供可视化UI编辑器结合组件库，由租户自定义UI；
[0011](2)允许租户在管理后台配置页面路由地址和页面组件，通过VUE Single Page Application框架中的vue
‑
router挂载前动态设置路由，页面加载时通过 VUE Single Page Application框架中的VUE动态组件结合。
[0012]优选的，所述VUE Single Page Application框架中还包括VUE Router和 VUE异步组件，租户在管理后台编辑的组件以VUE异步组件的形式引入项目内，项目编译打包过程中将组件代码分离打包成js文件，网页加载的时候按需加载对应的js文件和其它资源。
[0013]本专利技术的有益效果是：
[0014]该方案包括定制主题、局部UI内容、整体页面内容，满足平台租户不同程度的UI定制化要求，以及页面资源按需加载；定制页面配置化有助于平台运营配置收敛，同时一定程
度上减少了前端开发工作量减少迭代频率，有助于平台代码逻辑的抽象组装，提高前端组件复用性，平台产品功能沉淀，从而提升业务数据。
附图说明
[0015]图1为本方案的方法流程图。
具体实施方式
[0016]如图1所示，基于以上条件具体的实施步骤如下：
[0017]1.允许用户定制主题
[0018]web应用都有自己的主题样式，一般包括主题色、默认文字排版等，定制UI 的风格需与主题相符，允许租户在管理后台配置主题模板，在用户访问平台时通过租户标识加载主题样式
[0019]具体的，将主题样式值定义成变量，通过css预处理语言(less、sass等) 结合编译工具(glub、grunt、webpack等)，编译成css文本/文件，关联租户标识(id或其它标识)存储，用户访问平台时调用服务端接口区分用户所属租户，加载其对应的主题样式。
[0020]2.定制UI内容
[0021]对于VUE SPA应用，组件(网站代码块)是前端页面的最小组成单元，页面为页面组件和路由的结合，页面组件是由若干个子组件组合而成。
[0022]具体的，结合以下几个方面提供给租户定制UI的能力
[0023]A.允许租户在管理后台编辑组件属性，这些属性以props的形式传递给组件，组件根据props渲染UI；
[0024]B.在管理后台提供可视化UI编辑器结合组件库(如：Element UI)，由租户自定义UI(参考Vue JSON Schema Form)
[0025]C.允许租户在管理后台配置页面路由地址和页面组件，vue
‑
router挂载前动态设置前端路由，页面加载时通过VUE动态组件。
[0026]以上配置均关联租户标识(id或其它标识)存储，用户访问平台时调用服务端接口获取。
[0027]3.加载资源隔离
[0028]非服务端渲染且非独立部署，各租户本质上是共用同一套服务，基于VUESingle Page Application，用户在访问平台时，会加载所有网站资源，这会导致不同租户之间信息泄漏且过多的资源加载会影响网页整体加载速度影响用户体验。
[0029]具体的，综上结合VUE Router和VUE异步组件，将租户在管理后台编辑的组件已VUE异步组件的形式引入项目。项目编译打包过程中会将这部分组件代码分离打包成js文件，网页加载的时候会按需加载对应的js文件和其它资源。
[0030]本专利技术提出了一种SAAS平台定制化UI解决方法，通过设置前端页面，定制主题样式，将主题样式值定义成变量，租户自行管理后台编辑页面组件属性，编辑页面组件属性后关联租户域名存储，在用户访问平台时调用服务端接口获取，通过域名区分、加载和覆盖主题样式，获取的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成，该方案包括定制主题、局部UI内容、整体页面内容，满足
平台租户不同程度的 UI定制化要求，以及页面资源按需加载；定制页面配置化有助于平台运营配置收敛，同时一定程度上减少了前端开发工作量减少迭代频率，有助于平台代码逻辑的抽象组装，提高前端组件复用性，平台产品功能沉淀，从而提升业务数据。
[0031]本专利技术不仅仅限于上述示范性实施例的形式，在实际施工作业时，可根据实际情况加以调整，通过其他形式实现本专利技术。因此，无论从哪一点来看，实施例起到的是示范作用，而非限制性，本专利技术的范围由所附权利要求而非上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本专利技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种SAAS平台定制化UI解决方法，其特征在于，包括管理后台、服务端和客户端，以下为实施步骤：(1)设置前端页面，前端页面为页面组件和路由的结合，页面组件由若干子组件组合而成；定制主题样式，将主题样式值定义成变量，管理后台编辑页面组件属性，用来根据租户的需求编辑UI；(2)编辑页面组件属性后关联租户域名存储，在用户访问客户端时调用服务端接口获取，通过域名区分、加载和覆盖主题样式；(3)获取前端页面中的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成。2.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述主题样式通过css预处理语言结合编译工具编译成css文本并关联租户标识存储。3.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述用户访问平台时调用服务端接口区分用户所属租户，并在客户端上加载对应的主题样式。4.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在...

【专利技术属性】
技术研发人员：李传仁，
申请(专利权)人：汇承金融科技服务南京有限公司，
类型：发明
国别省市：