文章目录
  1. 1. mockapi
    1. 1.1. 1.get 方法获取数据
    2. 1.2. 2.post 方法添加数据
    3. 1.3. 3.真实的数据更新
    4. 1.4. 4.注意事项
  2. 2. json-server
    1. 2.1. 1.全局安装
    2. 2.2. 2.创建db.json文件
    3. 2.3. 3.开启服务并在指定端口更新
    4. 2.4. 4.get 获取数据
    5. 2.5. 5.post 添加数据
    6. 2.6. 6.真实的数据更新
  3. 3. useful links
    1. 3.0.0.1. 参考链接

mockapi

初始化创建数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
[
{
id: "1",
date: "2018-05-17",
title: "title 1",
amount: 88
},
{
id: "2",
date: "2018-05-18",
title: "title 2",
amount: 23
},
{
id: "3",
date: "2018-05-19",
title: "title 3",
amount: 3
},
{
id: "4",
date: "2018-05-20",
title: "title 4",
amount: 8
},
{
id: "5",
date: "2018-05-21",
title: "title 5",
amount: 88
}
];

1.get 方法获取数据

image

1
2

https://5b02556920848e001432c915.mockapi.io/api/v1/:records

2.post 方法添加数据

准备添加
image

send
image

3.真实的数据更新

image

4.注意事项

测试访问 ip 数据时保证在浏览器中已开启 https://www.mockapi.io/projects,就是下面的页面

image

json-server

1.全局安装

1
$ npm install -g json-server

2.创建db.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
"records": [
{
"id": "1",
"date": "2018-05-17",
"title": "title 1",
"amount": 88
},
{
"id": "2",
"date": "2018-05-18",
"title": "title 2",
"amount": 23
},
{
"id": "3",
"date": "2018-05-19",
"title": "title 3",
"amount": 3
},
{
"id": "4",
"date": "2018-05-20",
"title": "title 4",
"amount": 8
},
{
"id": "5",
"date": "2018-05-21",
"title": "title 5",
"amount": 88
}
]
}

3.开启服务并在指定端口更新

db.json目录打开

image

1
json-server --watch db.json --port 3006

4.get 获取数据

image

5.post 添加数据

准备添加
image

send
image

6.真实的数据更新

image

参考链接
文章目录
  1. 1. mockapi
    1. 1.1. 1.get 方法获取数据
    2. 1.2. 2.post 方法添加数据
    3. 1.3. 3.真实的数据更新
    4. 1.4. 4.注意事项
  2. 2. json-server
    1. 2.1. 1.全局安装
    2. 2.2. 2.创建db.json文件
    3. 2.3. 3.开启服务并在指定端口更新
    4. 2.4. 4.get 获取数据
    5. 2.5. 5.post 添加数据
    6. 2.6. 6.真实的数据更新
  3. 3. useful links
    1. 3.0.0.1. 参考链接