基于可视化展示的前后端同步管理方法及系统技术方案

本发明专利技术公开了基于可视化展示的前后端同步管理方法，其基于可视化展示的前后端同步管理系统，具体地，基于可视化展示的前后端同步管理方法包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。其通过设于前端的后端接口，实现将前端的配置信息保存至数据库和在前端调取数据库中的配置信息直接进行渲染，无需在修改时频繁切换前后端，操作简单方便。

【技术实现步骤摘要】
基于可视化展示的前后端同步管理方法及系统
本申请涉及计算机
，尤其涉及基于可视化展示的前后端同步管理方法及系统。
技术介绍
现有系统的后端用于数据配置，前端用于数据读取，当前端需要添加或更改内容时，需先切换至后端进行操作，再切换至前端进行效果预览，操作繁琐。
技术实现思路
本专利技术针对现有系统前后端操作分离，当前端需要修改时，需在前后端之间频繁切换，操作繁琐的问题作出改进，提供基于可视化展示的前后端同步管理方法，包括如下步骤：S1：建有前端、后端和数据库；S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。作为上述基于可视化展示的前后端同步管理方法的一种改进，后端接口基于序列化表单实现配置信息的封装与传输。作为上述基于可视化展示的前后端同步管理方法的一种改进，前端通过jquery.serialize()创建URL编码文本字，并经由ajaxpost方式对配置信息进行封装。作为上述基于可视化展示的前后端同步管理方法的一种改进，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。作为上述基于可视化展示的前后端同步管理方法的一种改进，数据加密采用aes对称加密码。作为上述基于可视化展示的前后端同步管理方法的一种改进，身份认证采用apereoCAS框架实现单点登录、采用ST进行业务系统登录认证校验、采用TGT校验用户状态、采用ApacheShiro安全框架实现后端和前端的登录账户信息互通。作为上述基于可视化展示的前后端同步管理方法的一种改进，数据库接收前端的配置信息时对配置信息进行数据过滤处理。作为上述基于可视化展示的前后端同步管理方法的一种改进，数据过滤采用XssFilter过滤器。本专利技术针对现有系统前后端操作分离，当前端需要修改时，需在前后端之间频繁切换，操作繁琐的问题作出改进，提供基于可视化展示的前后端同步管理系统，包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。与现有技术相比，本专利技术具有如下优点：本专利技术提供了基于可视化展示的前后端同步管理系统及方法，其通过设于前端的后端接口，实现将前端的配置信息保存至数据库和在前端调取数据库中的配置信息直接进行渲染，无需在修改时频繁切换前后端，操作简单方便。【附图说明】为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。图1为本申请基于可视化展示的前后端同步管理方法的流程图；图2为本申请基于可视化展示的前后端同步管理系统中前端页面的操作示意图。【具体实施方式】为了使本申请所解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。如图1所示的基于可视化展示的前后端同步管理方法，包括如下步骤：S1：建有前端、后端和数据库；S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。上述方法基于可视化展示的前后端同步管理系统，其中，基于可视化展示的前后端同步管理系统包括前端页面、后台管理系统和数据库，前端页面设有对接后台管理系统的后端接口，该后端接口用于向后台管理系统发送配置信息及通过后台管理系统调取数据库中的配置信息，前端页面用于信息配置并将生成的配置信息通过后端接口传输至后台管理系统并保存至数据库，前端页面还可通过后端接口调取数据库最新的配置信息并刷新渲染展示。图2为基于可视化展示的前后端同步管理系统中的前端页面，其以轮播方式展示多个转跳页面的首页截图，当用户需要更改转跳页面时，只需点击前端页面右上角的配置图标调出配置框，用户根据配置框的提示填入相应数据进行信息配置，鼠标点击确认后，配置信息将由后端接口传输至后端并保存至数据库，随即，前端通过后端接口调取最新配置信息，刷新渲染展示，最终完成前端页面信息的修改。综上可知，此操作简单，无需对前后端进行频繁切换。进一步地，作为本专利技术的优选实施方式而非限定，后端接口基于序列化表单实现配置信息的封装与传输。具体地，前端通过jquery.serialize()创建URL编码文本字，并经由ajaxpost方式对配置信息进行封装。采用此方式进行配置信息的封装与传输，简单方便。进一步地，作为本专利技术的优选实施方式而非限定，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。具体地，数据加密采用aes对称加密码。具体地，身份认证采用apereoCAS框架实现单点登录、采用ST进行业务系统登录认证校验、采用TGT校验用户状态、采用ApacheShiro安全框架实现后端和前端的登录账户信息互通。采用数据加密和身份认证有利于提高操作的安全性。进一步地，作为本专利技术的优选实施方式而非限定，数据库接收前端的配置信息时对配置信息进行数据过滤处理。具体地，数据过滤采用XssFilter过滤器。采用数据过滤可进一步提高数据的安全性，避免前端开放修改权限后，后端接口遭受到恶意数据的攻击。应当理解的是，本申请中采用术语“第一”、“第二”等来描述各种信息，但这些信息不应限于这些术语，这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，“第一”信息也可以被称为“第二”信息，类似的，“第二”信息也可以被称为“第一”信息。此外，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本申请的限制。如上所述是结合具体内容提供的一种或多种实施方式，并不认定本申请的具体实施只局限于这些说明。凡与本申请的方法、结构等近似、雷同，或是对于本申请构思前提下做出若干技术推演，或替换都应当视为本申请的保护范围。本文档来自技高网...

【技术保护点】
1.基于可视化展示的前后端同步管理方法，其特征在于，包括如下步骤：/nS1：建有前端、后端和数据库；/nS2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；/nS3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；/nS4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。/n

【技术特征摘要】
1.基于可视化展示的前后端同步管理方法，其特征在于，包括如下步骤：
S1：建有前端、后端和数据库；
S2：在前端设有对接后端的后端接口，该后端接口用于向后端发送配置信息及通过后端调取数据库中的配置信息；
S3：在前端进行配置，生成配置信息并通过后端接口传输至后端，保存至数据库；
S4：随即，前端通过后端接口调取最新配置信息，刷新渲染展示。


2.根据权利要求1所述的基于可视化展示的前后端同步管理方法，其特征在于，后端接口基于序列化表单实现配置信息的封装与传输。


3.根据权利要求2所述的基于可视化展示的前后端同步管理方法，其特征在于，前端通过jquery.serialize()创建URL编码文本字，并经由ajaxpost方式对配置信息进行封装。


4.根据权利要求1所述的基于可视化展示的前后端同步管理方法，其特征在于，在步骤S1中，前端将配置信息封装保存至数据库时对配置信息进行数据加密处理和对操作者进行身份认证。


5.根据权利要求4所述的基于可视化展示的前后端同步管...

【专利技术属性】
技术研发人员：李刚，司磊，何国亮，
申请(专利权)人：中电长城网际系统应用广东有限公司，
类型：发明
国别省市：广东;44