Vue前端开发必备工具——json-server模仿后端服务器

当我们用Vue开发前端时，如果想调用后端接口，又没有真实的后端接口服务器怎么办？答案是：可以用 json-server。
1、简介

• Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源，并提供了一组简朴的路由和端点，可以模仿后端服务器的举动。
  
• github地址：https://github.com/typicode/json-server
  
• npm地址：https://www.npmjs.com/package/json-server
  

2、安装

• json-server是基于npm安装的，安装了node就主动安装了npm，所以安装json-server必要先安装node。
  
• 安装json-server：使用npm或yarn全局安装json-server。
  

1. npm install -g json-server

复制代码

• 验证安装是否乐成：显示版本号就是安装乐成了
  

1. json-server -v

复制代码

3、快速使用

(1)创建JSON文件：

创建一个JSON文件作为数据源，比方 db.json，并在此中定义你想要模仿的数据，比方：

1. {
2.   "users": [
3.     { "id": 1, "name": "John" },
4.     { "id": 2, "name": "Jane" }
5.   ]
6. }

复制代码

(2) 启动json-server

使用以下命令启动json-server，并将JSON文件作为参数传递给服务器。这将在本地盘算机的3000端口上启动服务器，并将db.json文件中的数据暴露为RESTful API。

1. c:\vue3-news>json-server --watch db.json
3. --watch/-w can be omitted, JSON Server 1+ watches for file changes by default
4. JSON Server started on PORT :3000
5. Press CTRL-C to stop
6. Watching db.json...
8. (˶ᵔ ᵕ ᵔ˶)
10. Index:
11. http://localhost:3000/
13. Static files:
14. Serving ./public directory if it exists
16. Endpoints:
17. http://localhost:3000/users

复制代码

(3) 使用API

可以使用Web欣赏器或任何HTTP客户端程序（如Postman）来访问json-server提供的的数据。
比方，以下URL将检索JSON文件中的所有用户：

1. http://localhost:3000/users

复制代码

显示：

并且支持以下的访问方式呦
GET /users
GET /users/:id
POST /users
PUT /users/:id
PATCH /users/:id
DELETE /users/:id
(4) 以其它端口号启动

也可以使用-p参数修改启动的服务器端口号，比方想以8000端口启动json-server，使用以下命令：

1. json-server --watch db.json -p 8000

复制代码

(5) 启动多个API

如果想启动多个API，在 json文件中定义多个变量即可。
好比，db.json文件内容：

1. {
2.     "users": [
3.       { "id": 1, "name": "John" },
4.       { "id": 2, "name": "Jane" }
5.     ],
6.     "article":[
7.         {"id":1,"article":"Vue3入门到精通"},
8.         {"id":2,"article":"JAVA学习"}
9.     ]
10.   }

复制代码

启动json-server：

1. c:\vue3-news>json-server --watch db.json -p 8000
2. --watch/-w can be omitted, JSON Server 1+ watches for file changes by defaultJSON Server started on PORT :8000Press CTRL-C to stopWatching db.json...( ˶ˆ ᗜ ˆ˵ )Index:http://localhost:8000/Static files:Serving ./public directory if it existsEndpoints:http://localhost:8000/usershttp://localhost:8000/article

复制代码

如许就启动了http://localhost:8000/users和http://localhost:8000/article两个接口。
想启动更多API就在json文件中添加就行了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。