前端 | 本地json文件作为接口给前端提供数据



vue-cli 的话就直接 vue.config.js 配置开发环境

遇到的问题是后端给的接口为了安全并没有设置跨域(之后会放在一个服务器),在做本地测试的时候,又需要测试接口数据。此时就可以将接口的数据下载下来放在 json 文件里,再通过 json-server 发布至本地服务器默认 3000 端口,再在前端直接通过该端口接口访问数据。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
// 安装
npm i json-server -g

{
"list": [
{
"id": 11,
"products": ["胡萝卜", "白菜", "土豆", "豆腐", "青椒"]
},
{
"id": 22,
"products": ["香蕉", "苹果", "葡萄", "哈密瓜", "西瓜"]
},
{
"id": 33,
"products": ["牛肉", "羊肉", "鸡肉", "鱼肉", "鸭肉"]
}
]
}

// 在 json 的目录下,启动 json-server 查看数据文件
json-server --watch db.json

// 再通过 http://localhost:3000/list 访问

// 启动配置 一般默认 3000 端口发布
Options:
-c, --config Path to config file
[default: "json-server.json"]
-p, --port Set port [default: 3000]
-H, --host Set host [default: "localhost"]
-w, --watch Watch file(s) [boolean]
-r, --routes Path to routes file
-m, --middlewares Paths to middleware files [array]
-s, --static Set static files directory
--read-only, --ro Allow only GET requests [boolean]
--no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]
--no-gzip, --ng Disable GZIP Content-Encoding [boolean]
-S, --snapshots Set snapshots directory [default: "."]
-d, --delay Add delay to responses (ms)
-i, --id Set database id property (e.g. _id)
[default: "id"]
--foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
[default: "Id"]
-q, --quiet Suppress log messages from output [boolean]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]