一、 HTTP 相關內容
- 前後臺交互的基本過程，如下所示：
- 前後應用從瀏覽器端向服務器發送
HTTP請求(請求報文) - 後臺服務器接收到請求後, 調度服務器應用處理請求, 向瀏覽器端返回
HTTP響應(響應報文) - 瀏覽器端接收到響應, 解析顯示響應體/調用監視回調
HTTP請求報文，如下：
- 請求行: 請求方式
/url，如下所示：
method url GET /product_detail?id=2 POST /login - 多個請求頭: 一個請求頭由
name:value組成, 如Host/Cookie/Content-Type，如下所示：Host: www.baidu.com Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706; Content-Type: application/x-www-form-urlencoded 或者 application/json - 請求體，如下所示：
username=tom&pwd=123 {"username": "tom", "pwd": 123}
HTTP響應報文，如下所示：
- 響應行: 響應狀態碼/對應的文本，如
status statusText - 多個響應頭: 如
Content-Type / Set-Cookie 頭，如下所示：Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/ - 響應體，如
html 文本 /json 文本/js/css/圖片
post請求體文本參數格式，如下所示：
Content-Type: application/x-www-form-urlencoded;charset=utf-8
用於鍵值對參數，參數的鍵值用=連接, 參數之間用&連接
例如:name=%E5%B0%8F%E6%98%8E&age=12Content-Type: application/json;charset=utf-8 用於json字符串參數
例如:{"name": "%E5%B0%8F%E6%98%8E", "age": 12}Content-Type: multipart/form-data，用於文件上傳請求
- 常見響應狀態碼，如下所示：
200 OK請求成功，一般用於GET與POST請求201 Created已創建，成功請求並創建了新的資源401 Unauthorized未授權/請求要求用戶的身份認證404 Not Found服務器無法根據客戶端的請求找到資源500 Internal Server Error服務器內部錯誤，無法完成請求
- 不同類型的請求及其作用，如下所示；
GET: 從服務器端讀取數據POST: 向服務器端添加新數據PUT: 更新服務器端已經數據DELETE: 刪除服務器端數據
API的分類，如下所示：
REST API:restful，如下：- 發送請求進行
CRUD哪個操作由請求方式來決定
- 同一個請求路徑可以進行多個操作
- 請求方式會用到
GET/POST/PUT/DELETE
- 發送請求進行
- 非
REST API:restless，如下：- 請求方式不決定請求的
CRUD操作 - 一個請求路徑只對應一個操作
- 一般只有
GET/POST
- 請求方式不決定請求的
- 測試: 可以使用
json-server快速搭建模擬的rest api接口
二、json-server 的相關內容
json-server：用來快速搭建REST API的工具包。- 使用
json-server，如下所示：
- 在線文檔:
https://github.com/typicode/json-server - 下載:
npm install -g json-server - 目標根目錄下創建數據庫
json文件:db.json{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } - 啓動服務器執行命令:
json-server --watch db.json
- 使用瀏覽器訪問測試
http://localhost:3000/postshttp://localhost:3000/posts/1
- 使用
axios訪問測試，代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<button onclick="testGet()">GET請求</button>
<button onclick="testPost()">POST請求</button>
<button onclick="testPut()">PUT請求</button>
<button onclick="testDelete()">DELETE請求</button>
</div>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
/* 1. GET請求: 從服務器端獲取數據*/
function testGet() {
// axios.get('http://localhost:3000/posts')
// axios.get('http://localhost:3000/posts/1')
// 獲取 id 爲 1 的參數
axios.get('http://localhost:3000/posts?id=1')
.then(response => {
console.log('/posts get', response.data)
})
}
/* 2. POST請求: 向服務器端添加新數據*/
function testPost() {
// 保存數據
axios.post('http://localhost:3000/posts', {"title": "json-server3", "author": "typicode3"})
.then(response => {
console.log('/posts post', response.data)
})
}
/* 3. PUT請求: 更新服務器端已經數據 */
function testPut() {
axios.put('http://localhost:3000/posts/3', {"title": "json-server...", "author": "typicode..."})
.then(response => {
console.log('/posts put', response.data)
})
}
/* 4. DELETE請求: 刪除服務器端數據 */
function testDelete() {
axios.delete('http://localhost:3000/posts/3')
.then(response => {
console.log('/posts delete', response.data)
})
}
</script>
</body>
</html>
db.json ：
{
"posts": [
{
"title": "json-server+++",
"author": "typicode+++",
"id": 1
},
{
"id": 3
},
{
"title": "json-server3",
"author": "typicode3",
"id": 6
},
{
"title": "json-server4",
"author": "typicode4",
"id": 7
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}