CN109274724A - 一种前后端分离架构的实现系统及方法 - Google Patents

一种前后端分离架构的实现系统及方法 Download PDF

Info

Publication number
CN109274724A
CN109274724A CN201811006264.2A CN201811006264A CN109274724A CN 109274724 A CN109274724 A CN 109274724A CN 201811006264 A CN201811006264 A CN 201811006264A CN 109274724 A CN109274724 A CN 109274724A
Authority
CN
China
Prior art keywords
data
rear end
services
request
page
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
CN201811006264.2A
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.)
Shanghai Financial Software Ltd By Share Ltd
Original Assignee
Shanghai Financial Software Ltd By Share 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 Shanghai Financial Software Ltd By Share Ltd filed Critical Shanghai Financial Software Ltd By Share Ltd
Priority to CN201811006264.2A priority Critical patent/CN109274724A/zh
Publication of CN109274724A publication Critical patent/CN109274724A/zh
Pending legal-status Critical Current

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters 
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/56—Provisioning of proxy services
    • H04L67/568—Storing data temporarily at an intermediate stage, e.g. caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种前后端分离架构的实现系统和实现方法，前端使用SAP单页面移动端混合模式架构，后端使用基于微服务平台的架构，前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理，前端单独开发，局部渲染，避免了不必要的跳转和重复渲染，并且前后端可以单独测试。本发明有助于提高系统的可用性，提高开发效率，缩短开发周期，降低开发成本，提高系统的性能和稳定性，使系统尽可能快并且低成本、高质量地响应变化。

Description

一种前后端分离架构的实现系统及方法
技术领域
本发明涉及互联网移动端开发中的架构设计与开发模式的技术领域，具体涉及面向移动互联网的、且存在高并发和业务复杂度高、对可扩展性和开发效率要都有要求的互联网移动应用的系统架构的开发模式。
背景技术
随着金融电商平台的业务的不断发展、技术的不断改进、业务的推广，金融电商平台的业务越来越复杂。由于在传统开发中，会在后台服务器端将所有与前端相关数据进行渲染包装后响应到前端，从而存在传输数据量大、后台服务器处理程序压力大、后台错误可能会直接反应到前端的问题，很不友好。而后台又很难去探知前端页面的分布情况，所以导致开发效率较低，开发难度变大。而且随着项目的复杂情况，开发变得越来越复杂，对开发人员的要求也越来高。
发明内容
针对现有技术的不足，本发明旨在提供一种前后端分离架构的实现系统及方法，前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理，前端单独开发，局部渲染，避免了不必要的跳转和重复渲染，并且前后端可以单独测试。
为了实现上述目的，本发明采用如下技术方案：
一种前后端分离架构的实现系统，包括：
前端：打包在移动端的本地存储中，仅与后端进行数据交互；
后端：用于进行数据处理以及与前端进行数据交互；
插件管理器：用于在前端启动的时候初始化并注册插件；
页面组件：用于渲染和显示前端从后端中获取的页面数据；
Services：用于作为前端的数据缓存和操作层。
利用上述前后端分离架构的实现系统进行前后端分离架构的实现方法，包括如下步骤：
S1、前端打包在移动端本地存储中，插件管理器在前端启动的时候初始化并注册插件；
S2、前端向后端请求第一个页面，后端返回HTML、CSS和JS；
S3、前端加载各个页面组件，页面组件从移动端操作系统的Services获取数据，Services通过前端数据总线发送Ajax请求向后端获取数据；
S4、后端的服务网关接收到前端数据总线发送过来的Ajax请求，处理请求并返回响应结果；
S5、前端接收到后端返回的响应结果，将响应结果中包含的所请求获取的数据缓存到Services，页面组件从Services中获取数据进行渲染、显示。
需要说明的是，步骤S3中，Ajax请求以json的格式发送。
需要说明的是，步骤S4中，响应结果的数据格式为json格式，与步骤S2中前端向后端发送的请求格式统一。
本发明的有益效果在于：
利用本发明可以实现前后端分离开发，使前后端开发分别专注于各自擅长的事情，能够解决数据传输压力大的问题，并且能够分别提升前后端的开发效率，前台端能够各自进行优化，同时也存在一份数据用于多种前端风格的优势。
在本发明的实现系统和实现方法中，前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理，前端单独开发，局部渲染，避免了不必要的跳转和重复渲染，并且前后端可以单独测试。
本发明中，前端主要作用在于解决开发过程中，出现的各种插件兼容、数据缓存、数据解析等问题，有助于提高系统的可用性，提高开发效率，缩短开发周期，降低开发成本，提高系统的性能和稳定性，使系统尽可能快并且低成本、高质量地响应变化。后端使用基于微服务平台的架构，包括注册中心、断路器、负载均衡、API网关、配置中心、安全管理等核心组件，并且配套分布式跟踪、消息总线等一线插件用于支持后端服务。各个组件都有其特定的作用，通过后端框架将其整合到一起，以提高开发效率。
附图说明
图1为本发明实施例中实现系统的框架示意图。
具体实施方式
以下将结合附图对本发明作进一步的描述，需要说明的是，本实施例以本技术方案为前提，给出了详细的实施方式和具体的操作过程，但本发明的保护范围并不限于本实施例。
以下对本实施例所涉及到的一些技术名称作简单解释：
分离：前后端资源分离。
分拆：将应用模块按照业务规则分拆为可调用的服务程序。
分割：对数据按照业务规则或者是技术规则进行分割存储。
SPA：单页Web应用(single page web application，SPA)，一般指的是只有一个Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
Spring Boot：简化基于Spring框架开发的应用的开发过程。
Spring Cloud：一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发，如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等，都可以用Spring Boot的开发风格做到一键启动和部署。Spring并没有重复制造轮子，它只是将目前各家公司开发的比较成熟、经得起实际考验的服务框架组合起来，通过Spring Boot风格进行再封装屏蔽掉了复杂的配置和实现原理，最终给开发者留出了一套简单易懂、易部署和易维护的分布式系统开发工具包。
AugularJS：是一款优秀的前端JS框架，AngularJS有着诸多特性，最为核心的是：MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等。
Cordova：Apache Cordova是一个开源的移动开发框架。允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能。
Ionic：Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。
Services：前端数据缓存和操作层。
分布式：分布式是一种模型结构，区别于核心式，可以从字面理解为“分布在各处”，分布式的目标是降低单个对象的重要度，从而提升整个系统的性能。
本实施例提供一种前后端分离架构的实现系统，如图1所示，包括：
前端：打包在移动端的本地存储中，仅与后端进行数据交互；
后端：用于进行数据处理以及与前端进行数据交互；
插件管理器：用于在前端启动的时候初始化并注册插件；
页面组件：用于渲染和显示前端从后端中获取的页面数据；
Services：用于作为前端的数据缓存和操作层。
本实施例还提供一种前后端分离架构的实现方法(以电商移动端应用中的商品详情页的具体实现方式为例)，包括：
S1、Web App前端打包在移动端本地存储中，插件管理器在前端启动的时候初始化并注册插件Native Plugins；
S2、Web App前端向后端(服务端)请求第一个页面，后端返回HTML、CSS和JS；
S3、Web App前端加载各个页面组件，页面组件从移动端操作系统的Services获取数据，Services通过前端数据总线发送Ajax请求向后端获取数据；
S4、后端的服务网关接收到前端数据总线发送过来的Ajax请求，处理请求并返回响应结果；
S5、前端接收到后端返回的响应结果，将响应结果中包含的所请求获取的数据缓存到Services，页面组件从Services中获取数据进行渲染、显示。
需要说明的是，步骤S3中，Ajax请求以json的格式发送。
需要说明的是，步骤S4中，响应结果的数据格式为json格式，与步骤S2中前端向后端发送的请求格式统一。
上述实现方法中，前端可能也会用到缓存在Services中的数据，所以前端和Services可以是多对多的关系。
Services除了用于缓存数据以外，还提供一系列对数据的一些操作接口。可以提供给前端进行操作。这样的好处在于保持了数据的一致性，当Services中的数据变化了，多个前端的视图也会相应地得到更新。
对于本领域的技术人员来说，可以根据以上的技术方案和构思，作出各种相应的改变和变形，而所有的这些改变和变形都应该包括在本发明权利要求的保护范围之内。

Claims (4)

1.一种前后端分离架构的实现系统，其特征在于，包括：
前端：打包在移动端的本地存储中，仅与后端进行数据交互；
后端：用于进行数据处理以及与前端进行数据交互；
插件管理器：用于在前端启动的时候初始化并注册插件；
页面组件：用于渲染和显示前端从后端中获取的页面数据；
Services：用于作为前端的数据缓存和操作层。
2.利用权利要求1所述的前后端分离架构的实现系统的实现方法，其特征在于，包括如下步骤：
S1、前端打包在移动端本地存储中，插件管理器在前端启动的时候初始化并注册插件；
S2、前端向后端请求第一个页面，后端返回HTML、CSS和JS；
S3、前端加载各个页面组件，页面组件从移动端操作系统的Services获取数据，Services通过前端数据总线发送Ajax请求向后端获取数据；
S4、后端的服务网关接收到前端数据总线发送过来的Ajax请求，处理请求并返回响应结果；
S5、前端接收到后端返回的响应结果，将响应结果中包含的所请求获取的数据缓存到Services，页面组件从Services中获取数据进行渲染、显示。
3.根据权利要求2所述的实现方法，其特征在于，步骤S3中，Ajax请求以json的格式发送。
4.根据权利要求2所述的实现方法，其特征在于，步骤S4中，响应结果的数据格式为json格式，与步骤S2中前端向后端发送的请求格式统一。
CN201811006264.2A 2018-08-30 2018-08-30 一种前后端分离架构的实现系统及方法 Pending CN109274724A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811006264.2A CN109274724A (zh) 2018-08-30 2018-08-30 一种前后端分离架构的实现系统及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811006264.2A CN109274724A (zh) 2018-08-30 2018-08-30 一种前后端分离架构的实现系统及方法

Publications (1)

Publication Number Publication Date
CN109274724A true CN109274724A (zh) 2019-01-25

Family

ID=65155038

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811006264.2A Pending CN109274724A (zh) 2018-08-30 2018-08-30 一种前后端分离架构的实现系统及方法

Country Status (1)

Country Link
CN (1) CN109274724A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913757A (zh) * 2020-07-13 2020-11-10 西安即刻易用网络科技有限公司 一种单页面应用程序加载方法及系统
CN112363704A (zh) * 2021-01-12 2021-02-12 太极计算机股份有限公司 一种基于微服务架构的服务系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN113094028A (zh) * 2021-04-29 2021-07-09 成都星云智联科技有限公司 一种Windows桌面程序开发框架、方法及相关组件
CN113990398A (zh) * 2021-12-27 2022-01-28 北京诺禾致源科技股份有限公司 基因组整合数据库平台的处理方法与装置
WO2023142578A1 (zh) * 2022-01-25 2023-08-03 腾讯科技（深圳）有限公司 网页页面的渲染方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104252389A (zh) * 2013-06-27 2014-12-31 腾讯科技（深圳）有限公司 应用程序运行方法、系统及应用程序
CN104572099A (zh) * 2014-12-31 2015-04-29 深圳市酷开网络科技有限公司 基于组件和中间件的低耦合框架数据处理方法及系统
CN105099773A (zh) * 2015-07-06 2015-11-25 深圳市华讯方舟科技有限公司 接入控制器的Web网管系统的实现方法及Web网管系统
CN106775751A (zh) * 2016-12-30 2017-05-31 深圳中顺易金融服务有限公司 一种web前端框架系统及架构方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104252389A (zh) * 2013-06-27 2014-12-31 腾讯科技（深圳）有限公司 应用程序运行方法、系统及应用程序
CN104572099A (zh) * 2014-12-31 2015-04-29 深圳市酷开网络科技有限公司 基于组件和中间件的低耦合框架数据处理方法及系统
CN105099773A (zh) * 2015-07-06 2015-11-25 深圳市华讯方舟科技有限公司 接入控制器的Web网管系统的实现方法及Web网管系统
CN106775751A (zh) * 2016-12-30 2017-05-31 深圳中顺易金融服务有限公司 一种web前端框架系统及架构方法

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913757A (zh) * 2020-07-13 2020-11-10 西安即刻易用网络科技有限公司 一种单页面应用程序加载方法及系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN112363704A (zh) * 2021-01-12 2021-02-12 太极计算机股份有限公司 一种基于微服务架构的服务系统
CN112363704B (zh) * 2021-01-12 2021-04-06 太极计算机股份有限公司 一种基于微服务架构的服务系统
CN113094028A (zh) * 2021-04-29 2021-07-09 成都星云智联科技有限公司 一种Windows桌面程序开发框架、方法及相关组件
CN113094028B (zh) * 2021-04-29 2023-11-28 成都星云智联科技有限公司 一种Windows桌面程序开发系统、方法及相关组件
CN113990398A (zh) * 2021-12-27 2022-01-28 北京诺禾致源科技股份有限公司 基因组整合数据库平台的处理方法与装置
WO2023142578A1 (zh) * 2022-01-25 2023-08-03 腾讯科技（深圳）有限公司 网页页面的渲染方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN109274724A (zh) 一种前后端分离架构的实现系统及方法
CN107301048B (zh) 应用响应式共享应用架构的内控管理系统
CN110191164A (zh) 分布式服务接入系统及方法
CN112929230B (zh) 测试处理方法、装置、电子设备及计算机可读存储介质
CN103580937B (zh) 一种Web 服务模拟的方法及其系统和服务代理系统
CN109032797A (zh) 用于提供网页访问的方法及设备
CN110413418B (zh) 缓存同步装置及方法，缓存同步系统、电子设备
CN112988223B (zh) 框架集成方法、装置、电子设备及存储介质
CN103699635B (zh) 信息处理方法和装置
CN106909361A (zh) 基于模版引擎的web开发方法和装置
CN111934940B (zh) 配置化的服务请求方法及装置、电子设备和存储介质
CN113902866A (zh) 一种双引擎驱动的数字孪生系统
CN113010827A (zh) 页面渲染方法、装置、电子设备以及存储介质
CN109739624A (zh) 分布式事务处理方法、装置、电子设备及计算机可读介质
CN115185631A (zh) 一种天地一体化孪生模拟系统及方法
CN102664952A (zh) 一种对嵌入式设备集群管理及监控的方法
CN114500481A (zh) 业务请求处理方法、系统和装置
CN109347936A (zh) Redis代理客户端的实现方法、系统、存储介质及电子设备
CN109344351A (zh) 网页加载方法、中间服务器和网页加载系统
CN112714146B (zh) 一种资源调度方法、装置、设备及计算机可读存储介质
CN112152879A (zh) 网络质量确定方法、装置、电子设备和可读存储介质
CN114285859B (zh) 中间层区块链服务的数据处理方法、装置、设备及存储介质
CN116503498A (zh) 一种画面渲染方法和相关装置
CN112929453A (zh) 一种共享session数据的方法和装置
CN112182083A (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20190125