目錄
前後分離-資料互動
為什麼要前後分離
資料接口規範流程
HTTP協定
了解：
工作原理
HTTP請求方法
GET
HEAD
POST
PUT
DLELTE
TRACE
OPTIONS（域請求，域檢測）
CONNECT
get與post請求的差別：
常見狀态碼：
浏覽器調試工具
箭頭按鈕
裝置圖示
Elements
Console
Sources
Network
前後分離-資料互動
為什麼要前後分離
前後分離---開發階段，前後端工程師約定好資料互動接口，實作并行開發和測試；在運作階段前後端分離模式需要對web應用進行分離部署，使用HTTP或者其他協定進行互動請求。
在以前傳統的網站開發中，前端一般扮演的隻是切圖的工作，簡單地将UI設計師提供的原型圖實作成靜态的HTML頁面，而具體的頁面互動邏輯，比如與背景的資料互動工作等，可能都是由背景的開發人員來實作，這也就導緻了前後端工作配置設定不均。這樣做不僅僅開發效率慢，代碼也難以維護。而前後端分離的話，則可以很好的解決前後端分工不均的問題，将更多的互動邏輯配置設定給前端來處理，而後端則可以專注于其本職工作，像提供API接口，進行權限控制以及進行運算工作。前端可以獨立完成與使用者互動的整一個過程，兩者都可以同時開工，不互相依賴，開發效率更快，而且分工比較均衡。
資料接口規範流程
HTTP協定
了解：
HTTP是一個用戶端終端（使用者）和伺服器（網站）請求和應答的标準（TCP）。通過使用網頁浏覽器、網絡爬蟲或者其它的工具，用戶端發起一個HTTP請求到伺服器上指定端口（預設端口為80）。
通常，由HTTP客服端發起一個請求，建立一個到伺服器指定端口（預設是80端口）的TCP連接配接。HTTP伺服器則在那個端口監聽用戶端的請求。一旦收到請求，伺服器會向用戶端傳回一個狀态，比如”HTTP/1.1 200 OK”, 以及傳回的内容，如請求的檔案、錯誤資訊、或者其它資訊。
工作原理
HTTP協定定義Web用戶端如何從Web伺服器請求Web頁面，以及伺服器如何把Web頁面傳送給用戶端。HTTP協定采用了請求/響應模型。用戶端向伺服器發送一個請求封包，請求封包包含請求的方法、URL、協定版本、請求頭部和請求資料。伺服器以一個狀态行作為響應，響應的内容包括協定的版本、成功或者錯誤代碼、伺服器資訊、響應頭部和響應資料。
知識補充：
websocket 雙向通訊的協定
http 通信隻能由用戶端發起
基于 請求-響應 的模式
HTTP協定規定，請求從用戶端發出，最後伺服器端響應該請求并傳回。換句話說，肯定是先從用戶端開始建立通信的，伺服器端在沒有接收到請求之前不會發送響應
無狀态儲存
HTTP 是一種不儲存狀态，即無狀态（stateless）協定。HTTP協定 自身不對請求和響應之間的通信狀态進行儲存。也就是說在HTTP這個級别，協定對于發送過的請求或響應不做持久化處理。
HTTP請求方法
HTTP協定中共定義了八種方法（也叫“動作”）來以不同方式操作指定的資源:
GET
向指定的資源發出“顯示”請求。使用GET方法應該隻用在讀取資料，而不應當被用于産生“副作用”的操作中，例如在Web Application中。其中一個原因是GET可能會被網絡蜘蛛等随意通路。
HEAD
與GET方法一樣，都是向伺服器發出指定資源的請求。隻不過伺服器将不傳回資源的文本部分。它的好處在于，使用這個方法可以在不必傳輸前部内容的情況下，就可以擷取其中“關于該資源的資訊”（元資訊或稱中繼資料）。
POST
向指定資源送出資料，請求伺服器進行處理（例如送出表單或者上傳檔案）。資料被包含在請求文本中。這個請求可能會建立新的資源或修改現有資源，或二者皆有。
PUT
向指定資源位置上傳其最新内容。
DLELTE
請求伺服器删除Request-URI所表示的資源。
TRACE
回顯伺服器收到的請求，主要用于測試或診斷。
OPTIONS（域請求，域檢測）
這個方法可使伺服器傳回該資源所支援的所有HTTP請求方法。用“*”來代替資源名稱，向Web伺服器發送OPTIONS請求，可以測試伺服器功能是否正常運作。
CONNECT
HTTP/1.1 協定中預留給能夠将連接配接改為管道方式的代理伺服器。通常用于SSL加密伺服器的連結（經由非加密的HTTP代理伺服器）。
get與post請求的差別：
· GET 送出的資料會放在URL之後，也就是請求行裡面，以？分割URL和傳輸資料，參數之間&相連，如EditBook?name=test1&id=123456; POST方法是把送出的資料放在HTTP包的請求體中。是以，GET送出的資料會在位址欄中顯示出來，而POST送出，位址欄不會改變
·GET送出的資料大小有限制（因為浏覽器對URL的長度有限制），而POST方法送出的資料沒有限制。
狀态代碼的第一個數字代表目前響應的類型:
類别 原因短語
1XX Informational(資訊性狀态碼) 接收的請求正在處理
2XX Success(成功狀态碼) 請求正常處理完畢
3XX Redireation(重定向狀态碼) 需要進行附加操作以完成請求
4XX Client Error(用戶端錯誤狀态碼) 伺服器無法處理請求
5XX Server Error(伺服器錯誤狀态碼) 伺服器處理請求出錯
常見狀态碼：
- OK // 用戶端請求成功
- Bad Request // 用戶端請求有文法錯誤，不能被伺服器所理 解
- Unauthorized // 請求未經授權，這個狀态代碼必須和 WWW-Authenticate 報頭域一起使用
403 Forbidden // 伺服器收到請求，但是拒絕提供服務
404 Not Found // 請求資源不存在，eg: 輸入了錯誤的URL
500 Interval Server Error // 伺服器發生不可預期的錯誤
503 Server Unavailable // 伺服器目前不能處理用戶端的請求，一段時 間後可能恢複正常
浏覽器調試工具
以chrome為例
箭頭按鈕
用于在頁面選擇一個元素來審查和檢視它的相關資訊，當我們在Elements這個按鈕頁面下點選某個Dom元素時，箭頭按鈕會變成選擇狀态。
裝置圖示
可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端裝置，同時可以選擇不同的尺寸比例。
Elements
該面闆顯示了渲染完畢後的全部HTML源代碼，用來檢視、修改頁面上的元素，包括DOM标簽，以及css樣式，友善對靜态網頁進行調試。
Console
該面闆用來顯示網頁加載過程中的日志資訊，包括列印，警告，錯誤及其他可顯示的資訊等，同時也是一個js互動控制台。
Sources
該面闆以站點為分組，存放着請求下來的所有資源(html,css,jpg,gif,js等)。正是因為該面闆存放了所有的資源，是以在調試js時，目标代碼都在此處尋找，友善斷點調試
Network
網絡請求标簽頁：可看到所有的資源請求，包括網絡請求，圖檔資源，html，css，js檔案等請求，可以根據需求篩選請求項，一般多用于網絡請求的檢視和分析，分析後端接口是否正确傳輸，擷取的資料是否準确，請求頭，請求參數的檢視
檢視Network基本資訊: URL，響應狀态碼，響應資料類型，響應資料大小，響應時間
請求檔案的具體介紹：
Header: 面闆列出資源的請求url、HTTP方法、響應狀态碼、請求頭和響應頭及它們各自的值、請求參數等等
Preview: 預覽面闆，用于資源的預覽。
Response: 響應資訊面闆包含資源還未進行格式處理的内容