前后端分離模式概述

2021-01-29    分類： 網(wǎng)站建設

1、背景

前后端分離已成為互聯(lián)網(wǎng)項目開發(fā)的業(yè)界標準使用方式，通過nginx+tomcat的方式（也可以中間加一個nodejs）有效的進行解耦，并且前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等等）打下堅實的基礎。這個步驟是系統(tǒng)架構從猿進化成人的必經(jīng)之路。

核心思想是前端HTML頁面通過AJAX調(diào)用后端的RESTFUL API接口并使用JSON數(shù)據(jù)進行交互。

  • Web服務器：一般指像Nginx，Apache這類的服務器，他們一般只能解析靜態(tài)資源；
  • 應用服務器：一般指像Tomcat，Jetty，Resin這類的服務器可以解析動態(tài)資源也可以解析靜態(tài)資源，但解析靜態(tài)資源的能力沒有web服務器好；

一般都是只有web服務器才能被外網(wǎng)訪問，應用服務器只能內(nèi)網(wǎng)訪問。

以前的Java Web項目大多數(shù)都是Java程序員又當?shù)之攱?，又搞前端，又搞后端。隨著時代的發(fā)展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情。正所謂術業(yè)有專攻，一個人如果什么都會，那么他畢竟什么都不精。大中型公司需要專業(yè)人才，小公司需要全才，但是對于個人職業(yè)發(fā)展來說，前后端需要分離。

2、未分離時代（各種耦合）

早期主要使用MVC框架，Jsp+Servlet的結構圖如下：



大致就是所有的請求都被發(fā)送給作為控制器的Servlet，它接受請求，并根據(jù)請求信息將它們分發(fā)給適當?shù)腏SP來響應。同時，Servlet還根據(jù)JSP的需求生成JavaBeans的實例并輸出給JSP環(huán)境。JSP可以通過直接調(diào)用方法或使用UseBean的自定義標簽得到JavaBeans中的數(shù)據(jù)。

需要說明的是，這個View還可以采用 Velocity、Freemaker 等模板引擎。使用了這些模板引擎，可以使得開發(fā)過程中的人員分工更加明確，還能提高開發(fā)效率。

那么，在這個時期，開發(fā)方式有如下兩種：

方式一



方式二



方式二已經(jīng)逐漸淘汰。主要原因有兩點：

  • 前端在開發(fā)過程中嚴重依賴后端，在后端沒有完成的情況下，前端根本無法干活；
  • 由于趨勢問題，會JSP，懂velocity，freemarker等模板引擎的前端越來越少；

因此，方式二逐漸不被采用。然而，不得不說一點，方式一，其實很多小型傳統(tǒng)軟件公司至今還在使用。那么，方式一和方式二具有哪些共同的缺點呢?

1、前端無法單獨調(diào)試，開發(fā)效率低；

2、前端不可避免會遇到后臺代碼，例如：

<body>
 <%
 request.setCharacterEncoding("utf-8")
 String name=request.getParameter("username");
 out.print(name);
 %>
</body>

這種方式耦合性太強。那么，就算你用了freemarker等模板引擎，不能寫Java代碼。那前端也不可避免的要去重新學習該模板引擎的模板語法，無謂增加了前端的學習成本。正如我們后端開發(fā)不想寫前端一樣，你想想如果你的后臺代碼里嵌入前端代碼，你是什么感受？因此，這種方式十分不妥。

3、JSP本身所導致的一些其他問題 比如，JSP第一次運行的時候比較緩慢，因為里頭包含一個將JSP翻譯為Servlet的步驟。再比如因為同步加載的原因，在JSP中有很多內(nèi)容的情況下，頁面響應會很慢。

3、半分離時代

前后端半分離，前端負責開發(fā)頁面，通過接口（Ajax）獲取數(shù)據(jù)，采用Dom操作對頁面進行數(shù)據(jù)綁定，最終是由前端把頁面渲染出來。這也就是Ajax與SPA應用（單頁應用）結合的方式，其結構圖如下：



步驟如下：

  • 瀏覽器請求，CDN返回HTML頁面；
  • HTML中的JS代碼以Ajax方式請求后臺的Restful接口；
  • 接口返回Json數(shù)據(jù)，頁面解析Json數(shù)據(jù)，通過Dom操作渲染頁面；

后端提供的都是以JSON為數(shù)據(jù)格式的API接口供Native端使用，同樣提供給WEB的也是JSON格式的API接口。

那么意味著WEB工作流程是：

  • 打開web，加載基本資源，如CSS，JS等；
  • 發(fā)起一個Ajax請求再到服務端請求數(shù)據(jù)，同時展示loading；
  • 得到json格式的數(shù)據(jù)后再根據(jù)邏輯選擇模板渲染出DOM字符串；
  • 將DOM字符串插入頁面中web view渲染出DOM結構；

這些步驟都由用戶所使用的設備中逐步執(zhí)行，也就是說用戶的設備性能與APP的運行速度聯(lián)系的更緊換句話說就是如果用戶的設備很低端，那么APP打開頁面的速度會越慢。

為什么說是半分離的？因為不是所有頁面都是單頁面應用，在多頁面應用的情況下，前端因為沒有掌握controller層，前端需要跟后端討論，我們這個頁面是要同步輸出呢，還是異步Json渲染呢？而且，即使在這一時期，通常也是一個工程師搞定前后端所有工作。因此，在這一階段，只能算半分離。

首先，這種方式的優(yōu)點是很明顯的。前端不會嵌入任何后臺代碼，前端專注于HTML、CSS、JS的開發(fā)，不依賴于后端。自己還能夠模擬Json數(shù)據(jù)來渲染頁面。發(fā)現(xiàn)Bug，也能迅速定位出是誰的問題。

然而，在這種架構下，還是存在明顯的弊端的。最明顯的有如下幾點：

  • JS存在大量冗余，在業(yè)務復雜的情況下，頁面的渲染部分的代碼，非常復雜；
  • 在Json返回的數(shù)據(jù)量比較大的情況下，渲染的十分緩慢，會出現(xiàn)頁面卡頓的情況；
  • SEO（ Search Engine Optimization，即搜索引擎優(yōu)化）非常不方便，由于搜索引擎的爬蟲無法爬下JS異步渲染的數(shù)據(jù)，導致這樣的頁面，SEO會存在一定的問題；
  • 資源消耗嚴重，在業(yè)務復雜的情況下，一個頁面可能要發(fā)起多次HTTP請求才能將頁面渲染完畢?？赡苡腥瞬环X得PC端建立多次HTTP請求也沒啥。那你考慮過移動端么，知道移動端建立一次HTTP請求需要消耗多少資源么？

正是因為如上缺點，我們才亟需真正的前后端分離架構。

4、分離時代

在前后端徹底分離這一時期，前端的范圍被擴展，controller層也被認為屬于前端的一部分。在這一時期：

  • 前端：負責View和Controller層。
  • 后端：只負責Model層，業(yè)務/數(shù)據(jù)處理等。

可是服務端人員對前端HTML結構不熟悉，前端也不懂后臺代碼呀，controller層如何實現(xiàn)呢？這就是node.js的妙用了，node.js適合運用在高并發(fā)、I/O密集、少量業(yè)務邏輯的場景。最重要的一點是，前端不用再學一門其他的語言了，對前端來說，上手度大大提高。



可以就把Nodejs當成跟前端交互的api?？偟脕碚f，Nodejs的作用在mvc中相當于C（控制器）。Nodejs路由的實現(xiàn)邏輯是把前端靜態(tài)頁面代碼當成字符串發(fā)送到客戶端（例如瀏覽器），簡單理解可以理解為路由是提供給客戶端的一組api接口，只不過返回的數(shù)據(jù)是頁面代碼的字符串而已。

用NodeJs來作為橋梁架接服務器端API輸出的JSON。后端出于性能和別的原因，提供的接口所返回的數(shù)據(jù)格式也許不太適合前端直接使用，前端所需的排序功能、篩選功能，以及到了視圖層的頁面展現(xiàn)，也許都需要對接口所提供的數(shù)據(jù)進行二次處理。這些處理雖可以放在前端來進行，但也許數(shù)據(jù)量一大便會浪費瀏覽器性能。因而現(xiàn)今，增加Node中間層便是一種良好的解決方案。


瀏覽器(webview)不再直接請求JSP的API，而是：

  • 瀏覽器請求服務器端的NodeJS；
  • NodeJS再發(fā)起HTTP去請求JSP；
  • JSP依然原樣API輸出JSON給NodeJS；
  • NodeJS收到JSON后再渲染出HTML頁面；
  • NodeJS直接將HTML頁面flush到瀏覽器；

這樣，瀏覽器得到的就是普通的HTML頁面，而不用再發(fā)Ajax去請求服務器了。

淘寶的前端團隊提出的中途島(Midway Framework)的架構如下圖所示：


增加node.js作為中間層，具體有哪些好處呢？

1、適配性提升；我們其實在開發(fā)過程中，經(jīng)常會給PC端、mobile、app端各自研發(fā)一套前端。其實對于這三端來說，大部分端業(yè)務邏輯是一樣的。唯一區(qū)別就是交互展現(xiàn)邏輯不同。

如果controller層在后端手里，后端為了這些不同端頁面展示邏輯，自己維護這些controller，模版無法重用，徒增和前端溝通端成本。 如果增加了node.js層，此時架構圖如下：



在該結構下，每種前端的界面展示邏輯由node層自己維護。如果產(chǎn)品經(jīng)理中途想要改動界面什么的，可以由前端自己專職維護，后端無需操心。前后端各司其職，后端專注自己的業(yè)務邏輯開發(fā)，前端專注產(chǎn)品效果開發(fā)。

2、響應速度提升；我們有時候，會遇到后端返回給前端的數(shù)據(jù)太簡單了，前端需要對這些數(shù)據(jù)進行邏輯運算。那么在數(shù)據(jù)量比較小的時候，對其做運算分組等操作，并無影響。但是當數(shù)據(jù)量大的時候，會有明顯的卡頓效果。這時候，node中間層其實可以將很多這樣的代碼放入node層處理、也可以替后端分擔一些簡單的邏輯、又可以用模板引擎自己掌握前臺的輸出。這樣做靈活度、響應度都大大提升。

3、性能得到提升；大家應該都知道單一職責原則。從該角度來看，我們，請求一個頁面，可能要響應很多個后端接口，請求變多了，自然速度就變慢了，這種現(xiàn)象在mobile端更加嚴重。采用node作為中間層，將頁面所需要的多個后端數(shù)據(jù)，直接在內(nèi)網(wǎng)階段就拼裝好，再統(tǒng)一返回給前端，會得到更好的性能。

4、異步與模板統(tǒng)一；淘寶首頁就是被幾十個HTML片段（每個片段一個文件）拼裝成，之前PHP同步include這幾十個片段，一定是串行的，Node可以異步，讀文件可以并行，一旦這些片段中也包含業(yè)務邏輯，異步的優(yōu)勢就很明顯了，真正做到哪個文件先渲染完就先輸出顯示。

前端機的文件系統(tǒng)越復雜，頁面的組成片段越多，這種異步的提速效果就越明顯。前后端模板統(tǒng)一在無線領域很有用，PC頁面和WIFI場景下的頁面適合前端渲染（后端數(shù)據(jù)Ajax到前端），2G、3G弱網(wǎng)絡環(huán)境適合后端渲染（數(shù)據(jù)隨頁面吐給前端），所以同樣的模板，在不同的條件下走不同的渲染渠道，模板只需一次開發(fā)。

增加NodeJS中間層后的前后端職責劃分：


5、總結

從經(jīng)典的JSP+Servlet+JavaBean的MVC時代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java 框架時代，再到前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）為主的MV*時代，然后是Nodejs引領的全棧時代，技術和架構一直都在進步。雖然“基于NodeJS的全棧式開發(fā)”模式很讓人興奮，但是把基于Node的全棧開發(fā)變成一個穩(wěn)定，讓大家都能接受的東西還有很多路要走。

創(chuàng)新之路不會止步，無論是前后端分離模式還是其他模式，都是為了更方便得解決需求，但它們都只是一個“中轉站”。前端項目與后端項目是兩個項目，放在兩個不同的服務器，需要獨立部署，兩個不同的工程，兩個不同的代碼庫，不同的開發(fā)人員。前端只需要關注頁面的樣式與動態(tài)數(shù)據(jù)的解析及渲染，而后端專注于具體業(yè)務邏輯。

分享文章：前后端分離模式概述
當前地址：http://www.bm7419.com/news19/98019.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站策劃、電子商務、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設