搜尋
首頁web前端前端問答前後端分離是什麼?

前後端分離是什麼?

Aug 25, 2020 am 11:05 AM
前後端分離

前後端分離就是把資料操作和顯示分開出來。前端專注做數據顯示,透過文字,圖片或圖示等方式讓數據形象直觀的顯示出來;後端專注做數據的操作。前端把資料發給後端,有後端對資料進行修改。

前後端分離是什麼?

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

在網站開發過程中,對於前後端的分界線似乎一直是眾說紛紜。在網路上搜尋什麼是前後端分離,更是說什麼的都有,天花亂墜,描述不清楚。從一開始完全沒有前後端的概念,到後來的糾纏不清。

傳統的分離方法

在我的腦海中一提到前端和後端,基本上第一個出現的區別點就是:後端是跟資料庫跟伺服器打交道的,前端是跟瀏覽器打交道的。 似乎沒有什麼問題,大家都這麼認為的。當然這沒有什麼錯,我們一直以來都認為只是以瀏覽器作分界,把這兩部分的程式碼分開。但是前後端分離的初衷是為了分離前後端開發人員的職責,同時解決開發模式的問題。但似乎他們的職責在以前甚至於現在都並不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁面是伺服器透過模板產生的一個臨時靜態頁面而已。所以,實際上後端也摻和進來了,因為他要處理模板。當然,一般傳統上的開發協作模式有兩種:

一種是前端先寫一個靜態頁面,寫好後,讓後端去套模板。靜態頁面可以本地開發,也不需要考慮業務邏輯只需要實作View即可。不足是還需要後端套模板,這些前端程式碼後端需要瀏覽一遍,以免出錯。

另一種協作模式是,前端直接去寫模板,這樣做的問題在於,前端編寫過程中很依賴與後端環境,如果當後端沒寫完的情況下,前端幾乎沒辦法工作。

顯然這兩種方式似乎都有很多問題,但至少這還是目前為止大部分公司所採用的模式。他們從物理層來區分前後端的開發,同時淡化了前端在邏輯上的色彩。由於前端所做的事情就是來實現一個頁面的靜態版本,所以,大多數公司又給前端工程師們找了點活幹。你去看現在公司在招募的時候前端工程師的要求,除了對頁面的基本製作技能外還有額外的設計職責。例如至少會一門後端程式語言NodeJs或者php或者Java。

到這裡原本我們以為已經將前後端分離開來了,但是在模版這個尷尬的問題上,前後端的工程師們絕對吃過不少苦頭。目前直接在jsp或php裡面寫html應該不多了。前後端分離正在是正火。 那麼怎麼分離,誰佔的多點,誰佔的少點,根據各個公司的技術水平來。 前端開發工程師牛了,就想著前端的mvc,mvvm,直出。後端牛了,就想著,你把這個原型給後端,其他不用管了。

傳統的開發方法

之前的php程式碼寫在html程式碼裡,不存在純粹的php檔案和html檔案,這裡就是前後端不分離,大概意思就是php和html,你中我有,我中有你.

但是呢,後來開發的時候遇到很多問題,前端(html,css,js)工程師對php程式碼可能讀不懂,php工程師也不對css那些內容非常熟悉,所以後來人們想出一個辦法,把程式碼分離!這樣就能讓每個人在各自的領域更好的發揮,這樣雖然消耗了一定的效率,但是對於開發人員從某一角度來說是友好的.

前後端分離並沒有網上說的那麼複雜。

1.首先要知道所有的程式都是一資料為基礎的,沒有資料的程式沒有實際意義,程式的本質就是對程式的增刪改查。

2.前後端分離就是把資料運算和顯示分開。前端專注做數據顯示,透過文字,圖片或圖示等方式讓數據形象直觀的顯示出來。後端專注做數據的操作。前端把資料發給後端,有後端對資料進行修改。

3.後端一般用java,c#等語言,現在的node屬於JavaScript也能進行後端操作,此處不意義裂解語言。後端來進行資料庫的鏈接,並對資料進行操作。

4.後端提供介面給前端調用,來觸發後端對資料的操作。

基本原理就是這樣,可能語言上不準確,思想是沒有問題的。

所以開發網站的核心現在基本上就是:

html css :頁面展示

javascript ajax(這個算是瀏覽器的一部分,可以透過javascript 呼叫) : 頁面互動、邏輯處理

通常的開發框架選擇:

簡單網站: jquery bootstrap

後台管理系統:angularjs jquery bootstrap webpack

##複雜的產品: react redux webpack

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
React和前端堆棧:工具和技術React和前端堆棧:工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫,其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染,優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件,高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當,可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting,保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用:增強用戶體驗React在HTML中的作用:增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件:在HTML中創建可重複使用的元素REACT組件:在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義,封裝UI邏輯並通過props接受輸入數據。 1)定義組件:使用函數或類,返回React元素。 2)渲染組件:React調用render方法或執行函數組件。 3)復用組件:通過props傳遞數據,構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯,提升開發效率和代碼可維護性。

反應嚴格模式目的反應嚴格模式目的Apr 02, 2025 pm 05:51 PM

React嚴格模式是一種開發工具,可通過激活其他檢查和警告來突出反應應用中的潛在問題。它有助於識別遺產代碼,不安全的生命週期和副作用,鼓勵現代反應實踐。

反應碎片使用反應碎片使用Apr 02, 2025 pm 05:50 PM

React片段允許將兒童分組而沒有額外的DOM節點,增強結構,性能和可訪問性。他們支持鑰匙以進行有效的列表渲染。

反應和解過程反應和解過程Apr 02, 2025 pm 05:49 PM

本文討論了React的對帳過程,詳細介紹了它如何有效地更新DOM。關鍵步驟包括觸發對帳,創建虛擬DOM,使用擴散算法以及應用最小的DOM更新。它還覆蓋了經家

虛擬DOM解釋了虛擬DOM解釋了Apr 02, 2025 pm 05:49 PM

本文討論了虛擬DOM,這是Web開發中的關鍵概念,該概念通過最大程度地減少直接DOM操縱和優化更新來增強性能。

元素與組件區別元素與組件區別Apr 02, 2025 pm 05:46 PM

本文討論了軟件開發中元素與組件之間的區別,並突出了它們的角色,差異和對項目管理的影響。關鍵問題包括用戶InterFAC中的複雜性,可重複性和功能

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器