CN114489614A - 一种saas平台定制化ui解决方法 - Google Patents

一种saas平台定制化ui解决方法 Download PDF

Info

Publication number
CN114489614A
CN114489614A CN202111606571.6A CN202111606571A CN114489614A CN 114489614 A CN114489614 A CN 114489614A CN 202111606571 A CN202111606571 A CN 202111606571A CN 114489614 A CN114489614 A CN 114489614A
Authority
CN
China
Prior art keywords
page
component
tenant
vue
theme
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111606571.6A
Other languages
English (en)
Inventor
李传仁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huicheng Financial Technology Services Nanjing Co ltd
Original Assignee
Huicheng Financial Technology Services Nanjing Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huicheng Financial Technology Services Nanjing Co ltd filed Critical Huicheng Financial Technology Services Nanjing Co ltd
Priority to CN202111606571.6A priority Critical patent/CN114489614A/zh
Publication of CN114489614A publication Critical patent/CN114489614A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0621—Item configuration or customization

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Business, Economics & Management (AREA)
  • Accounting & Taxation (AREA)
  • Finance (AREA)
  • Databases & Information Systems (AREA)
  • Economics (AREA)
  • General Business, Economics & Management (AREA)
  • Strategic Management (AREA)
  • Marketing (AREA)
  • Development Economics (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

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

Claims (6)

1.一种SAAS平台定制化UI解决方法，其特征在于，包括管理后台、服务端和客户端，以下为实施步骤：
(1)设置前端页面，前端页面为页面组件和路由的结合，页面组件由若干子组件组合而成；定制主题样式，将主题样式值定义成变量，管理后台编辑页面组件属性，用来根据租户的需求编辑UI；
(2)编辑页面组件属性后关联租户域名存储，在用户访问客户端时调用服务端接口获取，通过域名区分、加载和覆盖主题样式；
(3)获取前端页面中的路由设置注册路由，通过注册路由开始渲染页面，通过渲染页面获取主题和需要定制的UI内容，最终渲染完成。
2.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述主题样式通过css预处理语言结合编译工具编译成css文本并关联租户标识存储。
3.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述用户访问平台时调用服务端接口区分用户所属租户，并在客户端上加载对应的主题样式。
4.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述编辑页面组件属性以props的形式传递给组件，组件根据props渲染UI。
5.根据权利要求1所述的一种SAAS平台定制化UI解决方法，其特征在于，所述编辑页面组件属性包括以下步骤：
(1)在管理后台提供可视化UI编辑器结合组件库，由租户自定义UI；
(2)允许租户在管理后台配置页面路由地址和页面组件，通过VUE Single PageApplication框架中的vue-router挂载前动态设置路由，页面加载时通过VUE Single PageApplication框架中的VUE动态组件结合。
6.根据权利要求5所述的一种SAAS平台定制化UI解决方法，其特征在于，所述VUESingle Page Application框架中还包括VUE Router和VUE异步组件，租户在管理后台编辑的组件以VUE异步组件的形式引入项目内，项目编译打包过程中将组件代码分离打包成js文件，网页加载的时候按需加载对应的js文件和其它资源。
CN202111606571.6A 2021-12-26 2021-12-26 一种saas平台定制化ui解决方法 Pending CN114489614A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111606571.6A CN114489614A (zh) 2021-12-26 2021-12-26 一种saas平台定制化ui解决方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111606571.6A CN114489614A (zh) 2021-12-26 2021-12-26 一种saas平台定制化ui解决方法

Publications (1)

Publication Number Publication Date
CN114489614A true CN114489614A (zh) 2022-05-13

Family

ID=81496665

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111606571.6A Pending CN114489614A (zh) 2021-12-26 2021-12-26 一种saas平台定制化ui解决方法

Country Status (1)

Country Link
CN (1) CN114489614A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115145561A (zh) * 2022-05-17 2022-10-04 三峡高科信息技术有限责任公司 一种可复用的工程管理业务组件库
CN116974527A (zh) * 2023-09-18 2023-10-31 浩鲸云计算科技股份有限公司 一种基于低代码前端组件的可插拔的页面扩展方法及系统

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115145561A (zh) * 2022-05-17 2022-10-04 三峡高科信息技术有限责任公司 一种可复用的工程管理业务组件库
CN116974527A (zh) * 2023-09-18 2023-10-31 浩鲸云计算科技股份有限公司 一种基于低代码前端组件的可插拔的页面扩展方法及系统
CN116974527B (zh) * 2023-09-18 2023-12-15 浩鲸云计算科技股份有限公司 一种基于低代码前端组件的可插拔的页面扩展方法及系统

Similar Documents

Publication Publication Date Title
CN114489614A (zh) 一种saas平台定制化ui解决方法
US9158510B2 (en) System and computer program product for creating a telecommunications application
US20090132220A1 (en) Method For Creating A Telecommunications Application
CN111045655A (zh) 一种页面渲染的方法、装置、渲染服务器和存储介质
CN107015804B (zh) 一种通过配置api快速开发项目的方法及系统
CN103237083B (zh) 一种移动信息服务资源聚合系统及方法
CN105872019A (zh) 一种Web端登录Docker容器的方法和装置
KR20050076719A (ko) 소프트웨어 애플리케이션들에 특성들을 동적으로 추가하는시스템 및 방법
CN106406951A (zh) 一种操作系统的安装方法和装置
US11847509B2 (en) Infrastructure base model API
CN108959496A (zh) 基于动态代理的跨数据库访问方法及抽象数据访问方法
CN113076502A (zh) 一种基于请求标识的参数控制方法与系统
WO2023035563A1 (zh) 小程序跨应用迁移方法、设备、终端、系统及存储介质
CN113703734A (zh) 一种小程序生成方法、装置、电子设备及存储介质
CN108153745B (zh) 一种应用数据调用方法及应用开发系统
CN110825373B (zh) 一种移动端动态化方法及装置
CN112068879A (zh) 基于配置化的客户端应用程序开发框架构建方法及装置
JP2007018122A (ja) Ｗｅｂサービスカスタマイズシステム
CN113076095A (zh) 一种基于基础与逻辑功能分离的业务实现方法与系统
CN111240679B (zh) 页面开发方法及系统
WO2022099913A1 (zh) 界面配置方法、装置、设备及介质
CN112783791B (zh) 接口测试案例的生成方法及装置
US20140215430A1 (en) Method and apparatus for enabling layered property definition in traditional and cloud computing environments
CN112364140B (zh) 一种通过配置单实现语音识别意图定制的方法
CN117234512B (zh) 业务快速开发方法、系统、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination