淺談前端和后端的區(qū)別與交互

時(shí)間：2023-05-25 04:45:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-25 04:45:01 來源：網(wǎng)站運(yùn)營(yíng)

淺談前端和后端的區(qū)別與交互：

從用戶的角度

前端

從普通用戶的角度來看，我們所能在電腦、手機(jī)上看到的業(yè)面就是前端，我們用戶永遠(yuǎn)只和前端打交道（交互）。

舉個(gè)例子，我們?cè)L問網(wǎng)頁(yè)版的百度網(wǎng)站，我們會(huì)看到如下的頁(yè)面，包括背景、文字、鏈接、按鈕、輸入框、圖片等信息。

用戶能夠通過前端頁(yè)面訪問百度網(wǎng)站，能夠通過點(diǎn)擊、輸入文字等方式進(jìn)行網(wǎng)頁(yè)跳轉(zhuǎn)、搜索、登錄等一系列操作。

后端

其實(shí)對(duì)于普通的用戶來說，是看不見后端的一系列操作的。但是后端會(huì)根據(jù)用戶在前端的一系列操作，進(jìn)行一些對(duì)應(yīng)的操作，然后將操作結(jié)果傳回給前端，再由前端將結(jié)果展示給用戶。比如用戶在百度的前端頁(yè)面點(diǎn)擊了某條新聞鏈接，后端會(huì)找到對(duì)應(yīng)的內(nèi)容并將內(nèi)容發(fā)送給前端，前端再展示用戶點(diǎn)擊的新聞內(nèi)容。

總結(jié)

前端對(duì)于用戶作用：

• 對(duì)用戶展示信息，提供可視化的界面給用戶。
• 對(duì)用戶收集操作，如點(diǎn)擊、文字輸入、滑動(dòng)等操作，然后將操作發(fā)送給后端。

后端對(duì)于用戶的作用：

• 接收用戶在前端的操作
• 根據(jù)用戶在前端的操作進(jìn)行對(duì)應(yīng)的處理
• 傳回處理后的結(jié)果給前端展示給用戶看

從程序員的角度

前端

對(duì)于程序員來說，前端頁(yè)面最基本的有三項(xiàng)構(gòu)成，如果將一個(gè)前端頁(yè)面看作一棟房子：

• html: html相當(dāng)于給網(wǎng)頁(yè)這棟房子建了毛坯房，毛坯房提供這棟房子最基本但是粗糙的原材料，如同門、窗、天花板等等。html全稱HyperText Mark-up Language(超文本標(biāo)記語(yǔ)言)，通過標(biāo)記在網(wǎng)頁(yè)上布置文本、圖片、表單等等元素。html能夠搭建一個(gè)網(wǎng)頁(yè)的骨架。
• css：css相當(dāng)于給網(wǎng)頁(yè)這棟房子的裝潢，在毛坯房的基礎(chǔ)上，對(duì)其進(jìn)行裝修，如粉刷，布置壁紙等等。css全稱Cascading Style Sheets（層疊樣式表）。通過css能夠?qū)W(wǎng)頁(yè)進(jìn)行精細(xì)的布局、設(shè)置顏色、修改字體等操作，讓網(wǎng)頁(yè)變得更加精美。
• javascript：javascript相當(dāng)于給網(wǎng)頁(yè)這棟房子通電水暖，能夠讓房子“動(dòng)起來”，用戶可以在房子里開燈、開電視、開地暖、開水龍頭等等。javascript是一門腳本語(yǔ)言，它能夠讓網(wǎng)頁(yè)和用戶互動(dòng)起來，比如用戶能通過網(wǎng)頁(yè)上的按鈕更改頁(yè)面的一些布局或者背景色。

前端領(lǐng)域還包括一些框架：bootstrap、react、vue能夠降低開發(fā)者的開發(fā)成本，這些其前端框架在一定程度上封裝了html、css、javascript，能夠讓開發(fā)人員進(jìn)行組件式地調(diào)動(dòng)。

后端

對(duì)于程序員來說，后端的話最基礎(chǔ)的就是后端語(yǔ)言，如java、c++、python等等。通過這些后端語(yǔ)言處理復(fù)雜的業(yè)務(wù)邏輯，而這些業(yè)務(wù)往往是用戶通過在前端操作傳遞到后端的。對(duì)于程序員來說，后端還需要了解數(shù)據(jù)庫(kù)，因?yàn)楹蠖酥袛?shù)據(jù)都是保存在數(shù)據(jù)庫(kù)中的。不同的后端語(yǔ)言也有對(duì)應(yīng)的后端框架，減少開發(fā)人員的工作量。像是java的springboot框架，python的flask框架。

前端和后端的交互

要知道前端和后端是怎么交互的，首先要知道一些簡(jiǎn)單的計(jì)算機(jī)網(wǎng)絡(luò)知識(shí)。

簡(jiǎn)單來說：前端發(fā)送請(qǐng)求到后端，后端接收請(qǐng)求之后，后端根據(jù)請(qǐng)求進(jìn)行處理并將結(jié)果以響應(yīng)的方式傳回給前端。

詳情請(qǐng)看：HTTP協(xié)議。

進(jìn)一步來說，用戶在前端不管是點(diǎn)擊按鈕、點(diǎn)擊鏈接、還是輸入信息進(jìn)行搜索，這些操作實(shí)際上都對(duì)應(yīng)一個(gè)url發(fā)送給后端，這個(gè)url可以看作是前端對(duì)后端的請(qǐng)求，我們知道根據(jù)url就能訪問到后端。前端和后端會(huì)約定好，前端發(fā)送什么樣的url，后端根據(jù)其url調(diào)用對(duì)應(yīng)的函數(shù)，并將函數(shù)運(yùn)行之后的結(jié)果返回給前端。

而后端框架的作用包括不限于：

• 將請(qǐng)求（url）與對(duì)應(yīng)的函數(shù)綁定起來。
• 解析url中的參數(shù)，并將參數(shù)填入對(duì)應(yīng)函數(shù)中。
• 調(diào)用完函數(shù)之后，將結(jié)果以響應(yīng)的方式返回給前端。