CN113254914A - 基于可视化展示的前后端同步管理方法及系统 - Google Patents
基于可视化展示的前后端同步管理方法及系统 Download PDFInfo
- Publication number
- CN113254914A CN113254914A CN202110444778.1A CN202110444778A CN113254914A CN 113254914 A CN113254914 A CN 113254914A CN 202110444778 A CN202110444778 A CN 202110444778A CN 113254914 A CN113254914 A CN 113254914A
- Authority
- CN
- China
- Prior art keywords
- configuration information
- database
- visual display
- interface
- management system
- 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
Links
- 238000007726 management method Methods 0.000 title claims abstract description 51
- 230000000007 visual effect Effects 0.000 title claims abstract description 29
- 230000001360 synchronised effect Effects 0.000 title claims abstract description 26
- 238000009877 rendering Methods 0.000 claims abstract description 6
- 238000001914 filtration Methods 0.000 claims description 7
- 238000012545 processing Methods 0.000 claims description 6
- 230000005540 biological transmission Effects 0.000 claims description 3
- 238000005538 encapsulation Methods 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 210000001503 joint Anatomy 0.000 claims 1
- 238000000034 method Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/30—Authentication, i.e. establishing the identity or authorisation of security principals
- G06F21/31—User authentication
- G06F21/41—User authentication where a single sign-on provides access to a plurality of computers
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/60—Protecting data
- G06F21/602—Providing cryptographic facilities or services
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/60—Protecting data
- G06F21/62—Protecting access to data via a platform, e.g. using keys or access control rules
- G06F21/6218—Protecting access to data via a platform, e.g. using keys or access control rules to a system of files or objects, e.g. local or distributed file system or database
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Computer Security & Cryptography (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Health & Medical Sciences (AREA)
- Bioethics (AREA)
- General Health & Medical Sciences (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了基于可视化展示的前后端同步管理方法，其基于可视化展示的前后端同步管理系统，具体地，基于可视化展示的前后端同步管理方法包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。其通过设于前端的后端接口，实现将前端的配置信息保存至数据库和在前端调取数据库中的配置信息直接进行渲染，无需在修改时频繁切换前后端，操作简单方便。
Description
【技术领域】
本申请涉及计算机技术领域，尤其涉及基于可视化展示的前后端同步管理方法及系统。
【背景技术】
现有系统的后端用于数据配置，前端用于数据读取，当前端需要添加或更改内容时，需先切换至后端进行操作，再切换至前端进行效果预览，操作繁琐。
【发明内容】
本发明针对现有系统前后端操作分离，当前端需要修改时，需在前后端之间频繁切换，操作繁琐的问题作出改进，提供基于可视化展示的前后端同步管理方法，包括如下步骤：S1：建有前端、后端和数据库；S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。
作为上述基于可视化展示的前后端同步管理方法的一种改进，后端接口基于序列化表单实现配置信息的封装与传输。
作为上述基于可视化展示的前后端同步管理方法的一种改进，前端通过jquery.serialize()创建URL编码文本字，并经由ajax post方式对配置信息进行封装。
作为上述基于可视化展示的前后端同步管理方法的一种改进，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。
作为上述基于可视化展示的前后端同步管理方法的一种改进，数据加密采用aes对称加密码。
作为上述基于可视化展示的前后端同步管理方法的一种改进，身份认证采用apereoCAS框架实现单点登录、采用ST进行业务系统登录认证校验、采用TGT校验用户状态、采用Apache Shiro安全框架实现后端和前端的登录账户信息互通。
作为上述基于可视化展示的前后端同步管理方法的一种改进，数据库接收前端的配置信息时对配置信息进行数据过滤处理。
作为上述基于可视化展示的前后端同步管理方法的一种改进，数据过滤采用XssFilter过滤器。
本发明针对现有系统前后端操作分离，当前端需要修改时，需在前后端之间频繁切换，操作繁琐的问题作出改进，提供基于可视化展示的前后端同步管理系统，包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。
与现有技术相比，本发明具有如下优点：
本发明提供了基于可视化展示的前后端同步管理系统及方法，其通过设于前端的后端接口，实现将前端的配置信息保存至数据库和在前端调取数据库中的配置信息直接进行渲染，无需在修改时频繁切换前后端，操作简单方便。
【附图说明】
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。
图1为本申请基于可视化展示的前后端同步管理方法的流程图；
图2为本申请基于可视化展示的前后端同步管理系统中前端页面的操作示意图。
【具体实施方式】
为了使本申请所解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。
如图1所示的基于可视化展示的前后端同步管理方法，包括如下步骤：S1：建有前端、后端和数据库；S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。
上述方法基于可视化展示的前后端同步管理系统，其中，基于可视化展示的前后端同步管理系统包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。
图2为基于可视化展示的前后端同步管理系统中的前端页面，其以轮播方式展示多个转跳页面的首页截图，当用户需要更改转跳页面时，只需点击前端页面右上角的配置图标调出配置框，用户根据配置框的提示填入相应数据进行信息配置，鼠标点击确认后，配置信息将由后端接口传输至后端并保存至数据库，随即，前端通过后端接口调取最新配置信息，刷新渲染展示，最终完成前端页面信息的修改。综上可知，此操作简单，无需对前后端进行频繁切换。
进一步地，作为本发明的优选实施方式而非限定，后端接口基于序列化表单实现配置信息的封装与传输。具体地，前端通过jquery.serialize()创建URL编码文本字，并经由ajax post方式对配置信息进行封装。采用此方式进行配置信息的封装与传输，简单方便。
进一步地，作为本发明的优选实施方式而非限定，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。具体地，数据加密采用aes对称加密码。具体地，身份认证采用apereoCAS框架实现单点登录、采用ST进行业务系统登录认证校验、采用TGT校验用户状态、采用Apache Shiro安全框架实现后端和前端的登录账户信息互通。采用数据加密和身份认证有利于提高操作的安全性。
进一步地，作为本发明的优选实施方式而非限定，数据库接收前端的配置信息时对配置信息进行数据过滤处理。具体地，数据过滤采用XssFilter过滤器。采用数据过滤可进一步提高数据的安全性，避免前端开放修改权限后，后端接口遭受到恶意数据的攻击。
应当理解的是，本申请中采用术语“第一”、“第二”等来描述各种信息，但这些信息不应限于这些术语，这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，“第一”信息也可以被称为“第二”信息，类似的，“第二”信息也可以被称为“第一”信息。此外，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本申请的限制。
如上所述是结合具体内容提供的一种或多种实施方式，并不认定本申请的具体实施只局限于这些说明。凡与本申请的方法、结构等近似、雷同，或是对于本申请构思前提下做出若干技术推演，或替换都应当视为本申请的保护范围。
Claims (9)
1.基于可视化展示的前后端同步管理方法，其特征在于，包括如下步骤：
S1：建有前端、后端和数据库；
S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；
S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；
S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。
2.根据权利要求1所述的基于可视化展示的前后端同步管理方法，其特征在于，后端接口基于序列化表单实现配置信息的封装与传输。
3.根据权利要求2所述的基于可视化展示的前后端同步管理方法，其特征在于，前端通过jquery.serialize()创建URL编码文本字，并经由ajax post方式对配置信息进行封装。
4.根据权利要求1所述的基于可视化展示的前后端同步管理方法，其特征在于，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。
5.根据权利要求4所述的基于可视化展示的前后端同步管理方法，其特征在于，数据加密采用aes对称加密码。
6.根据权利要求4所述的基于可视化展示的前后端同步管理方法，其特征在于，身份认证采用apereoCAS框架实现单点登录、采用ST进行业务系统登录认证校验、采用TGT校验用户状态、采用Apache Shiro安全框架实现后端和前端的登录账户信息互通。
7.根据权利要求1所述的基于可视化展示的前后端同步管理方法，其特征在于，数据库接收前端的配置信息时对配置信息进行数据过滤处理。
8.根据权利要求7所述的基于可视化展示的前后端同步管理方法，其特征在于，数据过滤采用XssFilter过滤器。
9.基于可视化展示的前后端同步管理系统，其特征在于，包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110444778.1A CN113254914A (zh) | 2021-04-24 | 2021-04-24 | 基于可视化展示的前后端同步管理方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110444778.1A CN113254914A (zh) | 2021-04-24 | 2021-04-24 | 基于可视化展示的前后端同步管理方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113254914A true CN113254914A (zh) | 2021-08-13 |
Family
ID=77221957
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110444778.1A Pending CN113254914A (zh) | 2021-04-24 | 2021-04-24 | 基于可视化展示的前后端同步管理方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113254914A (zh) |
Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150339486A1 (en) * | 2014-05-21 | 2015-11-26 | Siddharth Shetye | Systems and methods for front-end and back-end data security protocols |
| CN105760181A (zh) * | 2016-04-07 | 2016-07-13 | 深圳市百米生活股份有限公司 | 一种跨代码语言的开发框架 |
| CN106708918A (zh) * | 2016-06-29 | 2017-05-24 | 国家计算机网络与信息安全管理中心 | 一种网络大数据可视化信息系统 |
| CN107483622A (zh) * | 2017-09-06 | 2017-12-15 | 广州供电局有限公司 | 基于组件的浏览器操作行为数据采集方法 |
| CN107862044A (zh) * | 2017-11-07 | 2018-03-30 | 北京京东尚科信息技术有限公司 | 展示页面的方法和装置 |
| CN108572823A (zh) * | 2018-04-23 | 2018-09-25 | 武汉斗鱼网络科技有限公司 | 基于接口引擎的前后端开发管理方法及系统 |
| CN109471629A (zh) * | 2018-10-31 | 2019-03-15 | 国网河南省电力公司焦作供电公司 | 一种基于物联网云平台的前端系统及设计方法 |
| WO2019192128A1 (zh) * | 2018-04-04 | 2019-10-10 | 平安科技（深圳）有限公司 | 网页访问方法及装置 |
| CN110708720A (zh) * | 2018-07-10 | 2020-01-17 | 中国移动通信有限公司研究院 | 切换方法、分布单元、终端、集中单元及计算机存储介质 |
| CN111367804A (zh) * | 2020-03-04 | 2020-07-03 | 广州锦行网络科技有限公司 | 基于云计算及网络编程实现前端协作调试的方法 |
| CN111506298A (zh) * | 2020-03-10 | 2020-08-07 | 南京行者易智能交通科技有限公司 | 一种基于json对象进行接口可视化配置的方法 |
| CN111917762A (zh) * | 2020-07-28 | 2020-11-10 | 银盛支付服务股份有限公司 | 前后端分离管理系统权限认证解决方法及系统 |
| CN112035104A (zh) * | 2020-08-28 | 2020-12-04 | 重庆长安汽车股份有限公司 | 一种移动应用动态更改功能配置的建模方法 |
| CN112214714A (zh) * | 2020-11-06 | 2021-01-12 | 中国平安财产保险股份有限公司 | 基于配置文件的请求处理方法、装置、设备及存储介质 |
| CN112363912A (zh) * | 2020-10-15 | 2021-02-12 | 浪潮软件集团有限公司 | 一种全面自动化接口测试的方法 |
| CN112363854A (zh) * | 2020-11-11 | 2021-02-12 | 南京莱斯信息技术股份有限公司 | 一种基于新型接口标准前端服务框架优化设计方法 |
| CN113051510A (zh) * | 2021-03-05 | 2021-06-29 | 北京百度网讯科技有限公司 | 交互处理方法、装置、前端设备、后端设备及存储介质 |
-
2021
- 2021-04-24 CN CN202110444778.1A patent/CN113254914A/zh active Pending
Patent Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150339486A1 (en) * | 2014-05-21 | 2015-11-26 | Siddharth Shetye | Systems and methods for front-end and back-end data security protocols |
| CN105760181A (zh) * | 2016-04-07 | 2016-07-13 | 深圳市百米生活股份有限公司 | 一种跨代码语言的开发框架 |
| CN106708918A (zh) * | 2016-06-29 | 2017-05-24 | 国家计算机网络与信息安全管理中心 | 一种网络大数据可视化信息系统 |
| CN107483622A (zh) * | 2017-09-06 | 2017-12-15 | 广州供电局有限公司 | 基于组件的浏览器操作行为数据采集方法 |
| CN107862044A (zh) * | 2017-11-07 | 2018-03-30 | 北京京东尚科信息技术有限公司 | 展示页面的方法和装置 |
| WO2019192128A1 (zh) * | 2018-04-04 | 2019-10-10 | 平安科技（深圳）有限公司 | 网页访问方法及装置 |
| CN108572823A (zh) * | 2018-04-23 | 2018-09-25 | 武汉斗鱼网络科技有限公司 | 基于接口引擎的前后端开发管理方法及系统 |
| CN110708720A (zh) * | 2018-07-10 | 2020-01-17 | 中国移动通信有限公司研究院 | 切换方法、分布单元、终端、集中单元及计算机存储介质 |
| CN109471629A (zh) * | 2018-10-31 | 2019-03-15 | 国网河南省电力公司焦作供电公司 | 一种基于物联网云平台的前端系统及设计方法 |
| CN111367804A (zh) * | 2020-03-04 | 2020-07-03 | 广州锦行网络科技有限公司 | 基于云计算及网络编程实现前端协作调试的方法 |
| CN111506298A (zh) * | 2020-03-10 | 2020-08-07 | 南京行者易智能交通科技有限公司 | 一种基于json对象进行接口可视化配置的方法 |
| CN111917762A (zh) * | 2020-07-28 | 2020-11-10 | 银盛支付服务股份有限公司 | 前后端分离管理系统权限认证解决方法及系统 |
| CN112035104A (zh) * | 2020-08-28 | 2020-12-04 | 重庆长安汽车股份有限公司 | 一种移动应用动态更改功能配置的建模方法 |
| CN112363912A (zh) * | 2020-10-15 | 2021-02-12 | 浪潮软件集团有限公司 | 一种全面自动化接口测试的方法 |
| CN112214714A (zh) * | 2020-11-06 | 2021-01-12 | 中国平安财产保险股份有限公司 | 基于配置文件的请求处理方法、装置、设备及存储介质 |
| CN112363854A (zh) * | 2020-11-11 | 2021-02-12 | 南京莱斯信息技术股份有限公司 | 一种基于新型接口标准前端服务框架优化设计方法 |
| CN113051510A (zh) * | 2021-03-05 | 2021-06-29 | 北京百度网讯科技有限公司 | 交互处理方法、装置、前端设备、后端设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| CHUN XU MAO；STEVEN GAO；YI WANG: "AN Integrated Filtering Antenna Array With High Selectivity and Harmonics Suppression", IEEE TRANSACTION ON MICROWAVE THEORY AND TECHNIQUES, vol. 64, no. 6, 16 May 2016 (2016-05-16), pages 1798 - 1805, XP011612918, DOI: 10.1109/TMTT.2016.2561925 * |
| 彭颖颖: "基于NodeJS的供应商采购协同管理系统的设计与实现", 信息科技, no. 12, 15 December 2018 (2018-12-15), pages 30 - 45 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10387873B2 (en) | Systems, methods, and computer program products for integrating third party services with a mobile wallet | |
| US10795629B2 (en) | Text and custom format information processing method, client, server, and computer-readable storage medium | |
| US20220156391A1 (en) | File access right authentication method and electronic device | |
| US8595809B2 (en) | Reusable authentication experience tool | |
| US9799029B2 (en) | Securely receiving data input at a computing device without storing the data locally | |
| US20160092176A1 (en) | Efficient and intuitive databinding for mobile applications | |
| EP3230917B1 (en) | System and method for enabling secure authentication | |
| US10164970B1 (en) | Secure cross-domain page generation | |
| CN111898152B (zh) | 一种页面展示方法、电子设备及存储介质 | |
| CN102946384A (zh) | 用户验证方法和设备 | |
| CN114266033A (zh) | 验证码生成方法、装置、验证码登录系统及电子设备 | |
| CN109613990A (zh) | 软键盘安全输入方法、服务器、客户端、电子设备和介质 | |
| CN106599632B (zh) | 密码输入方法和装置 | |
| CN109618313A (zh) | 一种车载蓝牙设备及其连接方法、系统 | |
| US20130282859A1 (en) | System and method for enabling the styling and adornment of multiple, disparate web pages through remote method calls | |
| WO2024055824A1 (zh) | 短信验证方法、装置、存储介质及电子设备 | |
| CN113254914A (zh) | 基于可视化展示的前后端同步管理方法及系统 | |
| CN101277183A (zh) | 登录信息的输入方法、系统及系统的实现方法 | |
| CN109857379B (zh) | 一种数据服务封装的方法及装置 | |
| CN110673970A (zh) | 一种基于web应用的跨进程调用系统及方法 | |
| CN112995322B (zh) | 信息传输通道建立方法、装置、存储介质以及终端 | |
| CN107315970B (zh) | 一种敏感数据的交互方法及装置 | |
| CN103942484A (zh) | 一种以手机为载体的安全辅助设备及身份认证方法 | |
| CN107153791B (zh) | 一种数据呈现方法及电子设备 | |
| CN103442002A (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 |