一、簡介

1.前端和后端之間的基本交互過程

1. 客戶端發(fā)送請求：當(dāng)用戶在瀏覽器中訪問一個網(wǎng)頁時撬槽，瀏覽器會發(fā)送一個HTTP請求到服務(wù)器寸宵。這個請求包含了用戶需要的信息，比如請求的頁面URL厚骗、表單數(shù)據(jù)等。
2. 服務(wù)器接收請求：服務(wù)器接收到客戶端發(fā)送的請求后兢哭，會根據(jù)請求的URL和參數(shù)來確定應(yīng)該由哪個后端程序處理领舰。
3. 后端處理請求：后端程序會根據(jù)接收到的請求進(jìn)行相應(yīng)的處理灾部。這可能涉及到與數(shù)據(jù)庫的交互喜喂、進(jìn)行業(yè)務(wù)邏輯處理等。后端程序可以使用各種編程語言和框架來實(shí)現(xiàn)镊靴。
4. 數(shù)據(jù)庫交互：在后端處理過程中矩父，如果需要從數(shù)據(jù)庫中讀取或?qū)懭霐?shù)據(jù)锉桑，后端程序會與數(shù)據(jù)庫進(jìn)行交互。它可以執(zhí)行查詢操作窍株、更新數(shù)據(jù)等民轴。
5. 生成響應(yīng)：后端程序處理完請求后，會生成一個HTTP響應(yīng)球订，包含了需要返回給客戶端的數(shù)據(jù)和狀態(tài)碼等信息后裸。
6. 服務(wù)器發(fā)送響應(yīng)：服務(wù)器將生成的HTTP響應(yīng)發(fā)送回客戶端。這個響應(yīng)包含了請求的結(jié)果數(shù)據(jù)和狀態(tài)信息冒滩。
7. 客戶端渲染和展示：一旦瀏覽器收到服務(wù)器發(fā)送的響應(yīng)微驶，它會根據(jù)響應(yīng)的內(nèi)容進(jìn)行解析和渲染，將頁面展示給用戶开睡。如果響應(yīng)中包含了前端代碼（如HTML因苹、CSS和JavaScript），瀏覽器會執(zhí)行這些代碼來實(shí)現(xiàn)動態(tài)交互和頁面效果篇恒。

2.客戶端渲染和展示過程

1. HTML解析：瀏覽器首先會解析接收到的HTML代碼扶檐，構(gòu)建一個DOM（Document Object Model）樹。DOM樹表示了HTML文檔的結(jié)構(gòu)婚度，它由一系列的HTML元素和它們的關(guān)系組成蘸秘。
2. CSS解析和樣式計算：瀏覽器接下來會解析CSS樣式表官卡，確定每個HTML元素應(yīng)該應(yīng)用的樣式規(guī)則。瀏覽器會計算出每個元素的最終樣式醋虏，這包括繼承的樣式和通過選擇器選擇的樣式寻咒。
3. 布局和繪制：在樣式計算完成后，瀏覽器會根據(jù)DOM樹和樣式信息進(jìn)行布局颈嚼，確定每個元素在屏幕上的位置和大小毛秘。然后，瀏覽器將元素轉(zhuǎn)換為屏幕上的可視圖像阻课，這個過程稱為繪制叫挟。
4. JavaScript執(zhí)行：如果HTML文檔包含了JavaScript代碼，瀏覽器會執(zhí)行這些腳本限煞。JavaScript可以操作DOM樹抹恳、修改樣式、處理用戶交互等署驻。通過JavaScript奋献，開發(fā)人員可以實(shí)現(xiàn)動態(tài)的頁面行為和交互。
5. 事件處理：瀏覽器會監(jiān)聽用戶的交互事件旺上，比如點(diǎn)擊瓶蚂、輸入等。當(dāng)用戶觸發(fā)一個事件時宣吱，瀏覽器會執(zhí)行相應(yīng)的JavaScript代碼來處理事件窃这，可能會修改頁面的狀態(tài)、發(fā)送請求等征候。
6. 頁面更新：當(dāng)頁面的狀態(tài)或數(shù)據(jù)發(fā)生變化時杭攻，JavaScript代碼可以更新DOM樹的內(nèi)容，修改樣式疤坝，或者向服務(wù)器發(fā)送異步請求獲取新的數(shù)據(jù)朴上。這些操作可以觸發(fā)瀏覽器的重新布局和繪制，從而更新頁面上的內(nèi)容卒煞。

3.網(wǎng)址 - URL

URL是縮寫，其英文全稱是：Uniform Resource Locator（統(tǒng)一資源定位符）叼架，由一下幾部分組成：

• 協(xié)議：常用的是http和https畔裕，了解有這兩種協(xié)議即可
• 域名：指向這個網(wǎng)站服務(wù)器地址的一串字符串
• 端口：用http協(xié)議訪問的網(wǎng)址就是80端口，而https訪問的網(wǎng)址就是443端口的乖订，使用80和443端口的服務(wù)端扮饶，訪問它就是不需要帶上端口號的。而使用非標(biāo)準(zhǔn)端口需要帶上端口號乍构。
• 路徑：以/開頭甜无，中間每一層也是使用/，路徑就像是一層層的文件夾，不同的路徑通常指向這個服務(wù)器下不同的網(wǎng)頁或者API等等
• 參數(shù)：和路徑之間以?分隔岂丘，?后面就是參數(shù)了陵究，多個參數(shù)之間使用&分隔，每個參數(shù)是參數(shù)名=參數(shù)值的形式奥帘。

4.Web服務(wù)API

Web服務(wù)API（應(yīng)用程序編程接口）是用于不同軟件應(yīng)用程序之間通信和交互的一組規(guī)則和協(xié)議铜邮。通過使用API，開發(fā)人員可以訪問和使用其他軟件應(yīng)用程序的功能和數(shù)據(jù)寨蹋，而無需了解底層實(shí)現(xiàn)細(xì)節(jié)松蒜。

當(dāng)訪問網(wǎng)頁的URL時，服務(wù)器會返回一個網(wǎng)頁文件已旧，瀏覽器把這個網(wǎng)頁顯示出來秸苗。而訪問API的URL的時候，返回的是一些文本數(shù)據(jù)而非網(wǎng)頁运褪，例如高德地圖天氣查詢API惊楼。

1）Web服務(wù)API說明

1. 請求和響應(yīng)格式：Web服務(wù)API使用HTTP協(xié)議進(jìn)行通信，通過發(fā)送HTTP請求來調(diào)用API吐句，然后收到HTTP響應(yīng)作為回應(yīng)胁后。常見的HTTP方法是GET、POST嗦枢、PUT攀芯、DELETE等。
2. 認(rèn)證和授權(quán)：為了保護(hù)API的安全性和限制訪問文虏，通常需要進(jìn)行身份驗(yàn)證和授權(quán)侣诺。常見的認(rèn)證方法包括API密鑰、OAuth等氧秘。
3. 端點(diǎn)（Endpoints）：API的端點(diǎn)是指可以通過特定URL訪問的特定功能或資源年鸳。例如，/users可能是一個用于獲取用戶信息的端點(diǎn)丸相。
4. 請求參數(shù)：API請求通成θ罚可以接受一些參數(shù)來指定操作的細(xì)節(jié)。這些參數(shù)可以作為查詢字符串參數(shù)灭忠、URL路徑參數(shù)或請求體中的JSON/XML數(shù)據(jù)膳算。
5. 響應(yīng)：API的響應(yīng)通常以JSON或XML格式返回。響應(yīng)中包含請求的結(jié)果弛作、狀態(tài)碼和其他相關(guān)信息涕蜂。
6. 錯誤處理：API可能會返回錯誤響應(yīng)，其中包含有關(guān)發(fā)生的錯誤類型映琳、錯誤消息和適當(dāng)?shù)臓顟B(tài)碼机隙。
7. 版本控制：API可能會使用版本控制來管理API的變化蜘拉。通過在URL中包含版本號，可以確保在進(jìn)行重大更改時不會破壞現(xiàn)有的API客戶端有鹿。
8. 文檔和說明：好的API通常提供詳細(xì)的文檔和說明旭旭，描述每個端點(diǎn)的功能、參數(shù)印颤、返回值和示例代碼您机。

2）最常見的 API 協(xié)議

• SOAP：（Simple Object Access Protocol）是一種基于XML的協(xié)議，用于在網(wǎng)絡(luò)上進(jìn)行分布式通信年局。它定義了一種標(biāo)準(zhǔn)的消息格式和交互模式际看，使得不同平臺和應(yīng)用程序之間可以進(jìn)行跨網(wǎng)絡(luò)的通信。
• REST：（Representational State Transfer）是一種設(shè)計風(fēng)格和架構(gòu)模式矢否，用于構(gòu)建分布式網(wǎng)絡(luò)應(yīng)用程序和服務(wù)仲闽。RESTful架構(gòu)是基于Web標(biāo)準(zhǔn)和HTTP協(xié)議的，它強(qiáng)調(diào)簡單性僵朗、可擴(kuò)展性赖欣、可伸縮性和可移植性。RESTful架構(gòu)已成為構(gòu)建Web服務(wù)和API的一種流行選擇验庙，其簡潔性和靈活性使得它適用于各種應(yīng)用場景和平臺顶吮。
• GraphQL：一種用于構(gòu)建API的查詢語言和運(yùn)行時環(huán)境。與傳統(tǒng)的REST架構(gòu)不同粪薛，GraphQL允許客戶端在單個請求中定義需要的數(shù)據(jù)結(jié)構(gòu)和內(nèi)容悴了，從而提供更靈活、高效和精確的數(shù)據(jù)獲取方式违寿。

3）網(wǎng)絡(luò)請求結(jié)構(gòu)和類型

一個HTTP請求報文由請求行（request line）湃交、請求頭部（header）、空行和請求數(shù)據(jù)4個部分組成藤巢。

POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
Host: developer.mozilla.org
Connection: keep-alive
Content-Length: 432
Pragma: no-cache
Cache-Control: no-cache
Origin: https://developer.mozilla.org
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,es;q=0.6
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true

csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=

• 請求行

  • 由請求方法字段搞莺、URL字段和HTTP協(xié)議版本字段3個字段組成，它們用空格分隔掂咒。例如才沧，GET /index.html HTTP/1.1。
    • 請求方法有GET绍刮、POST糜工、HEAD、PUT录淡、DELETE、OPTIONS油坝、TRACE嫉戚、CONNECT刨裆。
      • GET：要求服務(wù)器將URL定位的資源放在響應(yīng)報文的數(shù)據(jù)部分，回送給客戶端彬檀。使用GET方法時帆啃，請求參數(shù)和對應(yīng)的值附加在URL后面，利用一個問號（“?”）代表URL的結(jié)尾與請求參數(shù)的開始窍帝，各個參數(shù)之間用”&”符號隔開努潘。
        • 不適合傳送私密數(shù)據(jù)。
        • 一般最多只能識別1024個字符坤学，所以如果需要傳送大量數(shù)據(jù)的時候疯坤，也不適合使用GET方式。
      • POST：將請求參數(shù)封裝在HTTP請求數(shù)據(jù)中深浮，以名稱/值的形式出現(xiàn)压怠，可以傳輸大量數(shù)據(jù)。
      • HEAD：服務(wù)器接受到HEAD請求后只返回響應(yīng)頭飞苇，而不會發(fā)送響應(yīng)內(nèi)容菌瘫。當(dāng)我們只需要查看某個頁面的狀態(tài)的時候，使用HEAD是非常高效的布卡。
      • DELETE：刪除某一個資源雨让。
      • PUT： PUT和POST極為相似，都是向服務(wù)器發(fā)送數(shù)據(jù)忿等，但它們之間有一個重要區(qū)別栖忠，PUT通常指定了資源的存放位置，而POST則沒有这弧，POST的數(shù)據(jù)存放位置由服務(wù)器自己決定娃闲。
      • CONNECT：能夠?qū)⑦B接改為管道方式的代理服務(wù)器。通常用于SSL加密服務(wù)器的鏈接與非加密的HTTP代理服務(wù)器的通信匾浪。
    • HTTP協(xié)議
      • HTTP/1.0：支持GET皇帮、POST、HEAD三種HTTP請求方法蛋辈。
      • HTTP/1.1：默認(rèn)采用持久連接属拾，并能很好地配合代理服務(wù)器工作。還支持以管道方式同時發(fā)送多個請求冷溶，以便降低線路負(fù)載渐白，提高傳輸速度。新增OPTIONS逞频、PUT纯衍、DELETE、TRACE苗胀、CONNECT五種HTTP請求方法襟诸。

• 請求頭部

  • 由鍵值對組成瓦堵，每行一對，關(guān)鍵字和值用英文冒號“:”分隔歌亲。請求頭部通知服務(wù)器有關(guān)于客戶端請求的信息菇用。例如：

    • User-Agent：產(chǎn)生請求的瀏覽器類型;

    • Accept：客戶端可識別的響應(yīng)內(nèi)容類型列表;星號 “ * ” 用于按范圍將類型分組，用 “ / ” 指示可接受全部類型陷揪，用“ type/* ”指示可接受 type 類型的所有子類型; 比如 Accept：text/xml（application/json）表示希望接受到的是xml（json）類型惋鸥。

    • Accept-Language：客戶端可接受的自然語言;

    • Accept-Encoding：客戶端可接受的編碼壓縮格式;

    • Accept-Charset：可接受的應(yīng)答的字符集;

    • Host：請求的主機(jī)名，允許多個域名同處一個IP 地址悍缠，即虛擬主機(jī);

    • connection：連接方式(close 或 keepalive);

    • Cookie：存儲于客戶端擴(kuò)展字段卦绣，向同一域名的服務(wù)端發(fā)送屬于該域的cookie;

    • Content-Type：發(fā)送端發(fā)送的實(shí)體數(shù)據(jù)的數(shù)據(jù)類型。 比如扮休，Content-Type：text/html（application/json）表示發(fā)送的是html類型迎卤。

      Content-Type	解釋
      text/html	html格式
      text/plain	純文本格式
      text/css	CSS格式
      text/javascript	js格式
      image/gif	gif圖片格式
      image/jpeg	jpg圖片格式
      image/png	png圖片格式
      application/x-www-form-urlencoded	POST專用：form表單數(shù)據(jù)被編碼為key/value格式發(fā)送到服務(wù)器。
      application/json	POST專用：序列化后的 JSON 字符串
      text/xml	POST專用：發(fā)送xml數(shù)據(jù)
      multipart/form-data	POST專用：向服務(wù)器發(fā)送二進(jìn)制數(shù)據(jù)玷坠，以便可以在 POST 請求中實(shí)現(xiàn)文件上傳等功能

• 空行

  • 最后一個請求頭之后是一個空行蜗搔，發(fā)送回車符和換行符，通知服務(wù)器以下不再有請求頭八堡。

• 請求數(shù)據(jù)

  • 與請求數(shù)據(jù)相關(guān)的請求頭是Content-Type和Content-Length樟凄。請求數(shù)據(jù)不在GET方法中使用，而是在POST方法中使用兄渺。

4）響應(yīng)報文結(jié)構(gòu)與類型

HTTP響應(yīng)報文和請求報文的結(jié)構(gòu)類似缝龄，由狀態(tài)行（request line）、響應(yīng)頭部（header）挂谍、空行和響應(yīng)實(shí)體4個部分組成叔壤。

• 狀態(tài)行

  • 由服務(wù)器HTTP協(xié)議版本，狀態(tài)碼和狀態(tài)碼的文本描述組成口叙。
    • 比如：HTTP/1.1 200 OK
  • 狀態(tài)碼：由3位數(shù)字組成炼绘，第一個數(shù)字定義了響應(yīng)的類別
    • 1xx：指示信息，表示請求已接收妄田，繼續(xù)處理
    • 2xx：成功俺亮，表示請求已被成功接收，處理疟呐。
      • 200 OK：客戶端請求成功
      • 204 No Content：無內(nèi)容脚曾。服務(wù)器成功處理，但未返回內(nèi)容启具。一般用在只是客戶端向服務(wù)器發(fā)送信息本讥，而服務(wù)器不用向客戶端返回什么信息的情況。不會刷新頁面。
      • 206 Partial Content：服務(wù)器已經(jīng)完成了部分GET請求（客戶端進(jìn)行了范圍請求）囤踩。響應(yīng)報文中包含Content-Range指定范圍的實(shí)體內(nèi)容
    • 3xx：重定向
      • 301 Moved Permanently：永久重定向旨椒，表示請求的資源已經(jīng)永久的搬到了其他位置。
      • 302 Found：臨時重定向堵漱，表示請求的資源臨時搬到了其他位置
      • 303 See Other：臨時重定向，應(yīng)使用GET定向獲取請求資源涣仿。303功能與302一樣勤庐，區(qū)別只是303明確客戶端應(yīng)該使用GET訪問
      • 307 Temporary Redirect：臨時重定向，和302有著相同含義好港。POST不會變成GET
      • 304 Not Modified：表示客戶端發(fā)送附帶條件的請求（GET方法請求報文中的IF…）時愉镰，條件不滿足。
    • 4xx：客戶端錯誤
      • 400 Bad Request：客戶端請求有語法錯誤钧汹，服務(wù)器無法理解丈探。
      • 401 Unauthorized：請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用拔莱。
      • 403 Forbidden：服務(wù)器收到請求碗降，但是拒絕提供服務(wù)
      • 404 Not Found：請求資源不存在。比如塘秦，輸入了錯誤的url
      • 415 Unsupported media type：不支持的媒體類型
    • 5xx：服務(wù)器端錯誤讼渊，服務(wù)器未能實(shí)現(xiàn)合法的請求。
      • 500 Internal Server Error：服務(wù)器發(fā)生不可預(yù)期的錯誤尊剔。
      • 503 Server Unavailable：服務(wù)器當(dāng)前不能處理客戶端的請求爪幻，一段時間后可能恢復(fù)正常

• 響應(yīng)頭部

  • Date標(biāo)頭：消息產(chǎn)生的時間
  • Age標(biāo)頭:（從最初創(chuàng)建開始）響應(yīng)持續(xù)時間
  • Server標(biāo)頭: 向客戶端標(biāo)明服務(wù)器程序名稱和版本
  • ETage標(biāo)頭：不透明驗(yàn)證者
  • Location標(biāo)頭：URL備用的位置
  • Content-Length標(biāo)頭：實(shí)體的長度
  • Content-Tyep標(biāo)頭：實(shí)體的媒體類型

• 響應(yīng)實(shí)體

  • 實(shí)體包含了Web客戶端請求的對象。Content-Length標(biāo)頭及Content-Type標(biāo)頭用于計算實(shí)體的位置须误、數(shù)據(jù)類型和數(shù)據(jù)長度挨稿。

5.靜態(tài)網(wǎng)站與動態(tài)網(wǎng)站

1）靜態(tài)網(wǎng)站

由靜態(tài)文件組成的網(wǎng)站，這些文件在服務(wù)器上預(yù)先生成京痢，并以相同的方式呈現(xiàn)給所有用戶奶甘。每個頁面都是獨(dú)立的HTML文件，不包含動態(tài)內(nèi)容或交互功能历造。靜態(tài)網(wǎng)站的內(nèi)容在訪問之前已經(jīng)存在甩十，并且在用戶請求時直接發(fā)送給用戶的瀏覽器。由于沒有數(shù)據(jù)庫或服務(wù)器端代碼的需求吭产，靜態(tài)網(wǎng)站通常具有簡單的架構(gòu)和較快的加載速度侣监。

靜態(tài)網(wǎng)站的優(yōu)點(diǎn)包括：

1. 簡單易于創(chuàng)建和維護(hù)，不需要復(fù)雜的后端開發(fā)臣淤。
2. 快速加載橄霉，因?yàn)轫撁鎯?nèi)容已經(jīng)在服務(wù)器上生成并且不需要額外的處理。
3. 更好的安全性邑蒋，因?yàn)?strong>沒有與數(shù)據(jù)庫或服務(wù)器端代碼交互的機(jī)會姓蜂。

靜態(tài)網(wǎng)站的缺點(diǎn)包括：

1. 缺乏動態(tài)內(nèi)容和個性化體驗(yàn)按厘，每個用戶看到的內(nèi)容都是相同的。
2. 更新和更改內(nèi)容需要手動修改和重新生成每個頁面钱慢。
3. 交互性和復(fù)雜功能的實(shí)現(xiàn)有限逮京。

2）動態(tài)網(wǎng)站

使用服務(wù)器端腳本和數(shù)據(jù)庫等技術(shù)生成內(nèi)容的網(wǎng)站，在用戶請求時動態(tài)生成頁面內(nèi)容束莫。服務(wù)器端腳本可以根據(jù)用戶的請求和其他條件從數(shù)據(jù)庫中檢索數(shù)據(jù)懒棉、執(zhí)行計算和邏輯，并生成相應(yīng)的HTML頁面览绿。動態(tài)網(wǎng)站通常具有更豐富的功能和交互性策严。

動態(tài)網(wǎng)站的優(yōu)點(diǎn)包括：

1. 提供個性化和交互性的體驗(yàn)，可以根據(jù)用戶的需求和條件生成動態(tài)內(nèi)容饿敲。
2. 可以輕松更新和管理內(nèi)容妻导，不需要手動編輯和生成每個頁面。
3. 支持更復(fù)雜的功能怀各，如用戶登錄倔韭、評論系統(tǒng)、購物車等渠啤。

動態(tài)網(wǎng)站的缺點(diǎn)包括：

1. 復(fù)雜的開發(fā)和維護(hù)需求狐肢，需要后端開發(fā)人員編寫服務(wù)器端腳本和處理數(shù)據(jù)庫交互。
2. 加載速度可能較慢沥曹，因?yàn)轫撁鎯?nèi)容需要在服務(wù)器端生成份名。
3. 需要更高級的服務(wù)器配置和資源，以支持處理動態(tài)請求的負(fù)載妓美。

二僵腺、后端web框架

后端 Web 框架是一種用于構(gòu)建和開發(fā)服務(wù)器端應(yīng)用程序的軟件框架。它提供了一組工具壶栋、庫和規(guī)范辰如，使開發(fā)人員能夠更輕松地構(gòu)建功能強(qiáng)大的 Web 應(yīng)用程序。后端 Web 框架通常用于處理與數(shù)據(jù)庫贵试、用戶認(rèn)證琉兜、請求處理和響應(yīng)等相關(guān)的服務(wù)器端邏輯。

常用后端web開發(fā)框架：

參考

• 前后端是怎么進(jìn)行交互的
• HTTP請求報文和響應(yīng)報文詳解
• Flask實(shí)戰(zhàn)教程microblog