2021-01-29 分類: 網站建設
1、背景
前后端分離已成為互聯(lián)網項目開發(fā)的業(yè)界標準使用方式,通過nginx+tomcat的方式(也可以中間加一個nodejs)有效的進行解耦,并且前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務(多種客戶端,例如:瀏覽器,車載終端,安卓,IOS等等)打下堅實的基礎。這個步驟是系統(tǒng)架構從猿進化成人的必經之路。
核心思想是前端HTML頁面通過AJAX調用后端的RESTFUL API接口并使用JSON數據進行交互。
一般都是只有web服務器才能被外網訪問,應用服務器只能內網訪問。
以前的Java Web項目大多數都是Java程序員又當爹又當媽,又搞前端,又搞后端。隨著時代的發(fā)展,漸漸的許多大中小公司開始把前后端的界限分的越來越明確,前端工程師只管前端的事情,后端工程師只管后端的事情。正所謂術業(yè)有專攻,一個人如果什么都會,那么他畢竟什么都不精。大中型公司需要專業(yè)人才,小公司需要全才,但是對于個人職業(yè)發(fā)展來說,前后端需要分離。
2、未分離時代(各種耦合)
早期主要使用MVC框架,Jsp+Servlet的結構圖如下:
大致就是所有的請求都被發(fā)送給作為控制器的Servlet,它接受請求,并根據請求信息將它們分發(fā)給適當的JSP來響應。同時,Servlet還根據JSP的需求生成JavaBeans的實例并輸出給JSP環(huán)境。JSP可以通過直接調用方法或使用UseBean的自定義標簽得到JavaBeans中的數據。
需要說明的是,這個View還可以采用 Velocity、Freemaker 等模板引擎。使用了這些模板引擎,可以使得開發(fā)過程中的人員分工更加明確,還能提高開發(fā)效率。
那么,在這個時期,開發(fā)方式有如下兩種:
方式一
方式二
方式二已經逐漸淘汰。主要原因有兩點:
因此,方式二逐漸不被采用。然而,不得不說一點,方式一,其實很多小型傳統(tǒng)軟件公司至今還在使用。那么,方式一和方式二具有哪些共同的缺點呢?
1、前端無法單獨調試,開發(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中有很多內容的情況下,頁面響應會很慢。
3、半分離時代
前后端半分離,前端負責開發(fā)頁面,通過接口(Ajax)獲取數據,采用Dom操作對頁面進行數據綁定,最終是由前端把頁面渲染出來。這也就是Ajax與SPA應用(單頁應用)結合的方式,其結構圖如下:
步驟如下:
后端提供的都是以JSON為數據格式的API接口供Native端使用,同樣提供給WEB的也是JSON格式的API接口。
那么意味著WEB工作流程是:
這些步驟都由用戶所使用的設備中逐步執(zhí)行,也就是說用戶的設備性能與APP的運行速度聯(lián)系的更緊換句話說就是如果用戶的設備很低端,那么APP打開頁面的速度會越慢。
為什么說是半分離的?因為不是所有頁面都是單頁面應用,在多頁面應用的情況下,前端因為沒有掌握controller層,前端需要跟后端討論,我們這個頁面是要同步輸出呢,還是異步Json渲染呢?而且,即使在這一時期,通常也是一個工程師搞定前后端所有工作。因此,在這一階段,只能算半分離。
首先,這種方式的優(yōu)點是很明顯的。前端不會嵌入任何后臺代碼,前端專注于HTML、CSS、JS的開發(fā),不依賴于后端。自己還能夠模擬Json數據來渲染頁面。發(fā)現(xiàn)Bug,也能迅速定位出是誰的問題。
然而,在這種架構下,還是存在明顯的弊端的。最明顯的有如下幾點:
正是因為如上缺點,我們才亟需真正的前后端分離架構。
4、分離時代
在前后端徹底分離這一時期,前端的范圍被擴展,controller層也被認為屬于前端的一部分。在這一時期:
可是服務端人員對前端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接口,只不過返回的數據是頁面代碼的字符串而已。
用NodeJs來作為橋梁架接服務器端API輸出的JSON。后端出于性能和別的原因,提供的接口所返回的數據格式也許不太適合前端直接使用,前端所需的排序功能、篩選功能,以及到了視圖層的頁面展現(xiàn),也許都需要對接口所提供的數據進行二次處理。這些處理雖可以放在前端來進行,但也許數據量一大便會浪費瀏覽器性能。因而現(xiàn)今,增加Node中間層便是一種良好的解決方案。
瀏覽器(webview)不再直接請求JSP的API,而是:
這樣,瀏覽器得到的就是普通的HTML頁面,而不用再發(fā)Ajax去請求服務器了。
淘寶的前端團隊提出的中途島(Midway Framework)的架構如下圖所示:
增加node.js作為中間層,具體有哪些好處呢?
1、適配性提升;我們其實在開發(fā)過程中,經常會給PC端、mobile、app端各自研發(fā)一套前端。其實對于這三端來說,大部分端業(yè)務邏輯是一樣的。唯一區(qū)別就是交互展現(xiàn)邏輯不同。
如果controller層在后端手里,后端為了這些不同端頁面展示邏輯,自己維護這些controller,模版無法重用,徒增和前端溝通端成本。 如果增加了node.js層,此時架構圖如下:
在該結構下,每種前端的界面展示邏輯由node層自己維護。如果產品經理中途想要改動界面什么的,可以由前端自己專職維護,后端無需操心。前后端各司其職,后端專注自己的業(yè)務邏輯開發(fā),前端專注產品效果開發(fā)。
2、響應速度提升;我們有時候,會遇到后端返回給前端的數據太簡單了,前端需要對這些數據進行邏輯運算。那么在數據量比較小的時候,對其做運算分組等操作,并無影響。但是當數據量大的時候,會有明顯的卡頓效果。這時候,node中間層其實可以將很多這樣的代碼放入node層處理、也可以替后端分擔一些簡單的邏輯、又可以用模板引擎自己掌握前臺的輸出。這樣做靈活度、響應度都大大提升。
3、性能得到提升;大家應該都知道單一職責原則。從該角度來看,我們,請求一個頁面,可能要響應很多個后端接口,請求變多了,自然速度就變慢了,這種現(xiàn)象在mobile端更加嚴重。采用node作為中間層,將頁面所需要的多個后端數據,直接在內網階段就拼裝好,再統(tǒng)一返回給前端,會得到更好的性能。
4、異步與模板統(tǒng)一;淘寶首頁就是被幾十個HTML片段(每個片段一個文件)拼裝成,之前PHP同步include這幾十個片段,一定是串行的,Node可以異步,讀文件可以并行,一旦這些片段中也包含業(yè)務邏輯,異步的優(yōu)勢就很明顯了,真正做到哪個文件先渲染完就先輸出顯示。
前端機的文件系統(tǒng)越復雜,頁面的組成片段越多,這種異步的提速效果就越明顯。前后端模板統(tǒng)一在無線領域很有用,PC頁面和WIFI場景下的頁面適合前端渲染(后端數據Ajax到前端),2G、3G弱網絡環(huán)境適合后端渲染(數據隨頁面吐給前端),所以同樣的模板,在不同的條件下走不同的渲染渠道,模板只需一次開發(fā)。
增加NodeJS中間層后的前后端職責劃分:
5、總結
從經典的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)數據的解析及渲染,而后端專注于具體業(yè)務邏輯。
分享文章:前后端分離模式概述
當前地址:http://m.rwnh.cn/news19/98019.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供企業(yè)網站制作、自適應網站、搜索引擎優(yōu)化、網站策劃、電子商務、企業(yè)建站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容