什麼是前後端分離

coldplay.xixi
發布: 2020-08-24 11:03:35
原創
32555 人瀏覽過

前後端分離的意思是:前後端分離並非僅僅只是一種開發模式,而是一種架構模式,前後端分離已成為互聯網專案開發的業界標準使用方式,透過【nginx tomcat】的方式,也可以中間加一個nodejs,有效的進行解耦。

什麼是前後端分離

【相關學習推薦:前端影片教學

前後端分離的意思是:

一.前後端混合的開發模式(SSR)

什麼是前後端分離

1.SSR的優勢

1、更好的SEO,由於搜尋引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

2、更快的內容到達時間 (time-to-content),特別是對於緩慢的網路情況或運行緩慢的裝置。無需等待所有的 JavaScript 都完成下載並執行,才顯示伺服​​器渲染的標記,所以你的用戶將會更快速地看到完整渲染的頁面。通常可以產生更好的使用者體驗,對於那些「內容到達時間(time-to-content) 與轉換率直接相關」的應用程式而言,伺服器端渲染 (SSR) 至關重要。

3. 流程:

1)客戶端給伺服器發送請求,伺服器傳回頁面的html和資料(模板引擎)。

2.SSR的限制

1.服務端壓力較大

本來是透過客戶端完成渲染,現在統一到服務端node服務去做。尤其是高並發存取的情況,會大量佔用服務端CPU資源;

2.開發條件受限

在服務端渲染中,只會執行到componentDidMount之前的生命週期鉤子,因此項目引用的第三方的庫也不可用其它生命週期鉤子,這對引用庫的選擇產生了很大的限制;

##3.學習成本相對較高

#除了對webpack、React要熟悉,還需要掌握node、Koa2等相關技術。相對於客戶端渲染,專案建置、部署過程更加複雜。

二.衰弱前端後端分離(利用ajax)

什麼是前後端分離

1.優勢

前端不會嵌入任何後台程式碼,前端專注於HTML、CSS、JS的開發,不依賴後端。自己也能夠模擬Json資料來渲染頁面。發現Bug,也能迅速定位出是誰的問題

2.局限

1)JS存在大量冗餘,在業務複雜的情況下,頁面的渲染部分的程式碼,非常複雜;

      2)在Json返回的資料量比較大的情況下,渲染的十分緩慢,會出現頁面卡頓的情況;

      3)SEO(Search Engine Optimization,即搜尋引擎優化)非常不方便,由於搜尋引擎的爬蟲無法爬下JS異步渲染的數據,導致這樣的頁面,SEO會存在一定的問題;

      4)資源消耗嚴重,在業務複雜的情況下,一個頁面可能要發起多次HTTP請求才能將頁面渲染完畢。可能有人不服,覺得PC端建立多次HTTP請求也沒啥。那你考慮過行動端麼,知道行動端建立一次HTTP請求需要消耗多少資源麼?

3.流程

1、開啟web,載入基本資源,如CSS,JS等;

      2、發起一個Ajax請求再到服務端請求數據,同時展示loading;

      3、取得json格式的資料後根據邏輯選擇範本渲染出DOM字串;

      4、將DOM字串插入頁面中web view渲染出DOM結構;

三.元件化開發前端後端分離(SPA)

什麼是前後端分離

1.優點

1.提升頁面切換體驗

2.降低切換時間

3.易於部署&前後端分離

4.但是也帶來一系列效能問題:

2.限制

1.初始載入腳本較大

2.首屏空白時間較長

# 3.頁面返回時,資料被動重新拉取

3.流程

1)瀏覽器請求伺服器端的NodeJS;

      2)NodeJS再發起HTTP去請求JSP;

      3)JSP依然原樣API輸出JSON給NodeJS;

      4)NodeJS收到JSON後再渲染HTML頁面;

#     S 5    )NodeJS直接將HTML頁面flush到瀏覽器;

#總結:#

從經典的JSP Servlet JavaBean的MVC時代,到SSM(Spring SpringMVC Mybatis)和SSH(Spring Struts Hibernate)的Java 框架時代,再到前端框架(KnockoutJS、AngularJS、vueJS、ReactJS)為主的MV*時代,然後是Nodejs引領的全端時代,技術和架構一直都在進步。雖然「基於NodeJS的全端式開發」模式很讓人興奮,但把基於Node的全端開發變成一個穩定,讓大家都能接受的東西還有很多路要走。創新之路不會止步,無論是前後端分離模式還是其他模式,都是為了更方便得解決需求,但它們都只是一個「中轉站」。前端專案與後端專案是兩個項目,放在兩個不同的伺服器,需要獨立部署,兩個不同的工程,兩個不同的程式碼庫,不同的開發人員。前端只需要專注於頁面的樣式與動態資料的解析及渲染,而後端則專注於具體業務邏輯。

以上是什麼是前後端分離的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!