一、 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=12
Content-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/posts
http://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"
}
}