CN110427181A - 一种Web系统前后端分离方法 - Google Patents

一种Web系统前后端分离方法 Download PDF

Info

Publication number
CN110427181A
CN110427181A CN201910744400.6A CN201910744400A CN110427181A CN 110427181 A CN110427181 A CN 110427181A CN 201910744400 A CN201910744400 A CN 201910744400A CN 110427181 A CN110427181 A CN 110427181A
Authority
CN
China
Prior art keywords
back end
web system
nginx
node
api
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
CN201910744400.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.)
Shandong Inspur Business System Co Ltd
Original Assignee
Shandong Inspur Business System 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 Shandong Inspur Business System Co Ltd filed Critical Shandong Inspur Business System Co Ltd
Priority to CN201910744400.6A priority Critical patent/CN110427181A/zh
Publication of CN110427181A publication Critical patent/CN110427181A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种Web系统前后端分离方法,所述方法的实现过程包括:Web系统前端的HTML页面通过AJAX调用后端的RESTFUL API接口,进行数据交互。本发明方法可以节约软件开发时间成本,在开发过程中前后端工作人员职责划分清晰,并且对于出现的问题清晰定位。可以实现真正的前后端解耦,减少后端服务器的并发/负载压力。

Description

一种Web系统前后端分离方法
技术领域
本发明涉及计算机架构技术领域,具体涉及一种Web系统前后端分离方法。
背景技术
传统的互联网应用中存在大量前后端耦合的web系统。随着互联网技术的快速发展,目前出现了前后端分离的web系统,逐渐得到业界的广泛采用。这种前端与后端分离的目的之一是做到专业化分工,提高项目的质量和开发效率,还可以降低前端对后端的依耐性。
现阶段的WEB项目中,前端与后端(通常指客户端与服务器端)分离架构应用十分普遍,广泛应用于单页面模式、cordova等各类工程。后端只负责提供数据和计算,而不负责展现,而前端则负责接收到数据后,组织数据并展现。这样的前后端分离架构结构清晰,各自侧重点分离,前后端之间会变得相对独立并松耦合。
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。
其中,Web服务器:一般指像Nginx,Apache这类的服务器,他们一般只能解析静态资源;
应用服务器:一般指像Tomcat,Jetty,Resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好;一般都是只有web服务器才能被外网访问,应用服务器只能内网访问。
注:
节点是指一台电脑或其他设备与一个有独立地址和具有传送或接收数据功能的网络相连。Node节点,或结点,或网点节点,可以是工作站、客户、网络用户或个人计算机,还可以是服务器、打印机和其他网络连接的设备。
Nginx(engine x)是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
Tomcat服务器是一个免费的开放源代码的Web应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选。对于一个初学者来说,可以这样认为,当在一台机器上配置好Apache服务器,可利用它响应HTML(标准通用标记语言下的一个应用)页面的访问请求。实际上Tomcat是Apache服务器的扩展,但运行时它是独立运行的,所以当你运行tomcat时,它实际上作为一个与Apache独立的进程单独运行的。
以前的Java Web项目大多数都是Java程序员又搞前端,又搞后端。随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。
发明内容
本发明要解决的技术问题是:为了解决Web系统开发中前后端职责不清,开发效率问题,对前端发挥的局限,耦合问题,本发明提供了一种Web系统前后端分离方法。
本发明所采用的技术方案为:
一种Web系统前后端分离方法,所述方法的实现过程包括:Web系统前端的HTML页面通过AJAX调用后端的RESTFUL API接口,进行数据交互。
前后端分离的web系统,其后端提供基于RESTful架构的数据接口,前端基于此接口展示页面,以此做到前后端的完全分离,其中,RESTful是指符合REST(RepresentationalState Transfer,表现层状态转化)风格的一种流行的数据接口架构。由于这种前后端分离的web系统,其前端程序不依赖于后端程序,从而有利于程序的扩展维护,也可以便于前后端的开发人员互不依赖地进行并行开发,并且后端可以跨终端提供通用的服务。
所述方法实现过程包括内容如下:
web系统的前端为系统架构的View层和Controller层,负责实现前端页面及前端交互逻辑,并利用ajax与中间层node.js服务器进行交互;
web系统的后端为系统架构的Model层,负责业务处理和数据处理,并提供API接口,利用redis来管理session,与数据库交互。
注:
Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML),源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样。Ajax的核心是JavaScript对象XmlHttpRequest。通过Ajax,可以编写javascript代码来改进HTML,创建出丰富的交互性用户体验。
Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。
Session:在计算机中,尤其是在网络应用中,称为"会话"。它具体是指一个终端用户与交互系统进行通信的时间间隔,通常指从注册进入系统到注销退出系统之间所经过的时间。
model层:数据库实体层,也被称为entity层,pojo层,包含的是一些实体对象,如Student对象。
view层:结合control层,显示前台页面、视图。就是用户用户可以看到的东西。后台怎么处理不关心,只关心怎么样想用户展示信息。
control层:业务模块流程控制,调用service层接口。也可以成为action层,集合了各种action、业务模块流程。
service层:业务操作实现类,调用dao层接口。它向上层的control ler层提供接口。
dao层:数据业务处理,持久化操作。
所述方法实现过程包括:在项目设计阶段,前后端架构负责人将项目整体进行分析,确定API风格、职责分配、开发协助模式,设计确定后,前后端人员共同制定开发接口。
所述方法实现过程还包括:在项目开发阶段,前后端人员各自分工,协同敏捷开发,后端提供Restful API,并给出详细文档说明,前端人员进行页面渲染前台的任务:发送API请求(GET,PUT,POST,DELETE等)获取数据(json,xml)后渲染页面。
API就是操作系统留给应用程序的一个调用接口,应用程序通过调用操作系统的API而使操作系统去执行应用程序的命令。
Restful API:URL定位资源,用HTTP动词(GET,POST,PUT,DELETE)描述操作,就是REST风格的API,通过一套协议来规范多种形式的前端和同一个后台的交互方式。RESTfulAPI由后台也就是SERVER来提供前端来调用。RESTful是典型的基于HTTP的协议,前端调用API向后台发起HTTP请求,后台响应请求将处理结果反馈给前端。
所述方法实现过程还包括:在项目测试阶段API完成之前,前端人员会使用mockserver(搭建一个临时的server,模拟那些服务,提供数据进行联调和测试。)进行模拟测试,后端人员采用junit(JUnit是一个Java语言的单元测试框架)进行API单元测试,不用互相等待;API完成之后,前后端再对接测试。当然并不是所有的接口都可以提前定义,有一些是在开发过程中进行调整的。
所述方法实现过程还包括:在项目部署阶段,利用nginx做反向代理,通过Java+node.js+nginx方式进行,由Nginx判断请求的页面类型,决定这个请求究竟是要转发给Node.js还是Java。
Nginx就是反向代理服务器,代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器,代理服务器一般作用于客户端。
所述Java、node.js、nginx采用同集群部署方式,Java、node.js、nginx的进程都跑在同一台机器上。
所述Java、node.js、nginx采用分集群部署方式,nginx+Java一个集群,node.js单独一个集群。
本发明的有益效果为:
本发明方法可以节约软件开发时间成本,在开发过程中前后端工作人员职责划分清晰,并且对于出现的问题清晰定位。可以实现真正的前后端解耦,减少后端服务器的并发/负载压力。
附图说明
图1为本发明方法实现技术流程示意图。
具体实施方式
下面结合说明书附图,根据具体实施方式对本发明进一步说明:
实施例1:
如图1所示,一种Web系统前后端分离方法,其中:
Web系统前端的HTML页面通过AJAX调用后端的RESTFUL API接口,进行数据交互;
web系统的前端为系统架构的View层和Controller层,负责实现前端页面及前端交互逻辑,并利用ajax与中间层node.js服务器进行交互;
web系统的后端为系统架构的Model层,负责业务处理和数据处理,并提供API接口,利用redis来管理session,与数据库交互。
所述方法实现过程包括:
1、在项目设计阶段,前后端架构负责人将项目整体进行分析,确定API风格、职责分配、开发协助模式,设计确定后,前后端人员共同制定开发接口。
2、在项目开发阶段,前后端人员各自分工,协同敏捷开发,后端提供Restful API,并给出详细文档说明,前端人员进行页面渲染前台的任务:发送API请求,获取数据后渲染页面。
3、在项目测试阶段API完成之前,前端人员会使用mock server进行模拟测试,后端人员采用junit进行API单元测试;API完成之后,前后端再对接测试。
4、在项目部署阶段,利用nginx做反向代理,通过Java+node.js+nginx方式进行,由Nginx判断请求的页面类型,决定这个请求究竟是要转发给Node.js还是Java。
实施例2:
在实施例1的基础上,本实施例所述Java、node.js、nginx采用同集群部署方式,Java、node.js、nginx的进程都跑在同一台机器上。
实施例3:
在实施例1的基础上,本实施例所述Java、node.js、nginx采用分集群部署方式,nginx+Java一个集群,node.js单独一个集群。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置、电子设备、计算机可读存储介质及包含指令的计算机程序产品实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。

Claims (8)

1.一种Web系统前后端分离方法,其特征在于,所述方法的实现过程包括:Web系统前端的HTML页面通过AJAX调用后端的RESTFUL API接口,进行数据交互。
2.根据权利要求1所述的一种Web系统前后端分离方法,其特征在于,所述方法实现过程包括内容如下:
web系统的前端为系统架构的View层和Controller层,负责实现前端页面及前端交互逻辑,并利用ajax与中间层node.js服务器进行交互;
web系统的后端为系统架构的Model层,负责业务处理和数据处理,并提供API接口,利用redis来管理session,与数据库交互。
3.根据权利要求2所述的一种Web系统前后端分离方法,其特征在于,所述方法实现过程包括:在项目设计阶段,前后端架构负责人将项目整体进行分析,确定API风格、职责分配、开发协助模式,设计确定后,前后端人员共同制定开发接口。
4.根据权利要求2所述的一种Web系统前后端分离方法,其特征在于,所述方法实现过程还包括:在项目开发阶段,前后端人员各自分工,协同敏捷开发,后端提供Restful API,并给出详细文档说明,前端人员进行页面渲染前台的任务:发送API请求,获取数据后渲染页面。
5.根据权利要求2所述的一种Web系统前后端分离方法,其特征在于,所述方法实现过程还包括:在项目测试阶段API完成之前,前端人员会使用mock server进行模拟测试,后端人员采用junit进行API单元测试;API完成之后,前后端再对接测试。
6.根据权利要求2所述的一种Web系统前后端分离方法,其特征在于,所述方法实现过程还包括:在项目部署阶段,利用nginx做反向代理,通过Java+node.js+nginx方式进行,由Nginx判断请求的页面类型,决定这个请求究竟是要转发给Node.js还是Java。
7.根据权利要求6所述的一种Web系统前后端分离方法,其特征在于,所述Java、node.js、nginx采用同集群部署方式,Java、node.js、nginx的进程都跑在同一台机器上。
8.根据权利要求6所述的一种Web系统前后端分离方法,其特征在于,所述Java、node.js、nginx采用分集群部署方式,nginx+Java一个集群,node.js单独一个集群。
CN201910744400.6A 2019-08-13 2019-08-13 一种Web系统前后端分离方法 Pending CN110427181A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910744400.6A CN110427181A (zh) 2019-08-13 2019-08-13 一种Web系统前后端分离方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910744400.6A CN110427181A (zh) 2019-08-13 2019-08-13 一种Web系统前后端分离方法

Publications (1)

Publication Number Publication Date
CN110427181A true CN110427181A (zh) 2019-11-08

Family

ID=68414355

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910744400.6A Pending CN110427181A (zh) 2019-08-13 2019-08-13 一种Web系统前后端分离方法

Country Status (1)

Country Link
CN (1) CN110427181A (zh)

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111427547A (zh) * 2020-03-18 2020-07-17 成都中科合迅科技有限公司 一种基于c++的微服务开发方法和系统
CN111475764A (zh) * 2020-06-29 2020-07-31 平安国际智慧城市科技股份有限公司 搜索引擎优化方法、装置、终端及存储介质
CN112667204A (zh) * 2020-12-15 2021-04-16 南方电网数字电网研究院有限公司 微服务应用的数据处理方法、装置和计算机设备
CN112685014A (zh) * 2020-12-25 2021-04-20 中孚安全技术有限公司 一种快速模拟接口的方法、系统及设备
CN112817589A (zh) * 2021-01-07 2021-05-18 湖北智泽云创科技有限公司 mala前端快速开发框架系统及方法
CN113268720A (zh) * 2021-06-01 2021-08-17 广州欢网科技有限责任公司 一种前后端分离系统操作方法及装置
CN113839974A (zh) * 2020-06-23 2021-12-24 海尔数字科技(上海)有限公司 容器平台计费方法及系统
CN114168246A (zh) * 2021-12-01 2022-03-11 北京联创新天科技有限公司 前后端分离架构下的多语言切换方法、组件、介质及设备
CN114422169A (zh) * 2021-12-07 2022-04-29 中国科学院国家授时中心 一种基于wcf技术的内外网数据展示系统及展示方法
CN116319950A (zh) * 2022-09-07 2023-06-23 中国人民财产保险股份有限公司 架构前后端分离的实现方法、架构系统以及请求处理方法
CN117519837A (zh) * 2024-01-02 2024-02-06 暗物智能科技(广州)有限公司 一种接口管理方法及接口管理系统

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102622219A (zh) * 2011-01-31 2012-08-01 富士通株式会社 对动态调用服务的执行结果进行渲染的方法、装置及系统
CN104426983A (zh) * 2013-09-05 2015-03-18 携程计算机技术(上海)有限公司 网站建设系统及方法

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102622219A (zh) * 2011-01-31 2012-08-01 富士通株式会社 对动态调用服务的执行结果进行渲染的方法、装置及系统
CN104426983A (zh) * 2013-09-05 2015-03-18 携程计算机技术(上海)有限公司 网站建设系统及方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
小知: "《前后端分离架构概述》", 《前后端分离架构概述 - 知乎 (ZHIHU.COM)HTTPS://ZHUANLAN.ZHIHU.COM/P/67511447》 *

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111427547A (zh) * 2020-03-18 2020-07-17 成都中科合迅科技有限公司 一种基于c++的微服务开发方法和系统
CN113839974A (zh) * 2020-06-23 2021-12-24 海尔数字科技(上海)有限公司 容器平台计费方法及系统
CN111475764A (zh) * 2020-06-29 2020-07-31 平安国际智慧城市科技股份有限公司 搜索引擎优化方法、装置、终端及存储介质
CN111475764B (zh) * 2020-06-29 2020-10-02 平安国际智慧城市科技股份有限公司 搜索引擎优化方法、装置、终端及存储介质
CN112667204B (zh) * 2020-12-15 2024-01-23 南方电网数字平台科技(广东)有限公司 微服务应用的数据处理方法、装置和计算机设备
CN112667204A (zh) * 2020-12-15 2021-04-16 南方电网数字电网研究院有限公司 微服务应用的数据处理方法、装置和计算机设备
CN112685014A (zh) * 2020-12-25 2021-04-20 中孚安全技术有限公司 一种快速模拟接口的方法、系统及设备
CN112817589A (zh) * 2021-01-07 2021-05-18 湖北智泽云创科技有限公司 mala前端快速开发框架系统及方法
CN113268720A (zh) * 2021-06-01 2021-08-17 广州欢网科技有限责任公司 一种前后端分离系统操作方法及装置
CN113268720B (zh) * 2021-06-01 2023-05-26 广州欢网科技有限责任公司 一种前后端分离系统操作方法及装置
CN114168246B (zh) * 2021-12-01 2023-07-21 北京联创新天科技有限公司 前后端分离架构下的多语言切换方法、组件、介质及设备
CN114168246A (zh) * 2021-12-01 2022-03-11 北京联创新天科技有限公司 前后端分离架构下的多语言切换方法、组件、介质及设备
CN114422169A (zh) * 2021-12-07 2022-04-29 中国科学院国家授时中心 一种基于wcf技术的内外网数据展示系统及展示方法
CN116319950A (zh) * 2022-09-07 2023-06-23 中国人民财产保险股份有限公司 架构前后端分离的实现方法、架构系统以及请求处理方法
CN117519837A (zh) * 2024-01-02 2024-02-06 暗物智能科技(广州)有限公司 一种接口管理方法及接口管理系统

Similar Documents

Publication Publication Date Title
CN110427181A (zh) 一种Web系统前后端分离方法
CN101697139B (zh) 一种远程过程调用方法、装置和注册库
DE60121987T2 (de) Zugreifen auf Daten, die bei einer Zwischenstation gespeichert sind, von einem Dienst aus
DE60108158T2 (de) Onlineentwicklung von applikationen
CN105354014B (zh) 应用界面渲染展示方法及装置
US7599956B2 (en) Reusable online survey engine
US8516451B2 (en) System and method for creating virtual callback objects
CN101154157A (zh) 为JavaScript应用提供全球化功能的系统和方法
CN106686023A (zh) 一种流程设计方法、客户机、服务器侧装置及系统
CN106357719A (zh) 用于网络应用的基于页面的事件相关
CN104102578B (zh) 测试方法及系统、操作端
CN107707644A (zh) 请求消息的处理方法、装置、存储介质、处理器及终端
US11853729B2 (en) Development system and method for a conversational application
Gong et al. The Architecture of Micro-services and the Separation of Frond-end and Back-end Applied in a Campus Information System
CN109828921A (zh) Html5网页自动化功能测试方法、系统和电子设备
CN104008042B (zh) 一种ui自动化测试方法、系统和设备
CN109582317A (zh) 用于调试寄宿应用的方法和装置
CN104166551B (zh) 一种应用接口开发方法和开发装置
CN104270443B (zh) 一种能够动态解析Web应用的云计算系统及方法
CN109460227A (zh) 一种网站前端的开发方法、装置、设备及介质
CN107506597A (zh) 医学文档获取方法、终端及服务器
US20080109738A1 (en) Method for displaying and formatting messages in web applications using javaserver faces
IL158127A (en) Web-based speech recognition with scripting and semantic objects
CN113495498B (zh) 用于硬件设备的模拟方法、模拟器、设备和介质
CN104216694A (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: 20191108