作为一个前端,在实现项目功能的时候,需要在前端写一个静态的json数据,进行测试,但是有的时候,需要涉及到全模拟请求以及请求回来的过程,实现动态增删改查,这个时候就需要使用到web的API接口神器json-server。
json server 作为工具,足够简单,写少量数据,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法。在使用之前先确定安装node和npm最新版本。
1:全局安装json-server
打开cmd,右键以管理员身份运行(我的电脑是win10的,所以需要权限)
输入json-server -h
进行测试,查看是否安装成功,出现以下内容说明安装成功。
2:在D盘新建一个文件夹JsonServer
命令行进入新建的文件夹里面。
初始化文件 npm init
,一路回车键。
这个时候,空文件夹里面生成了一个package.json
文件。
3:db.json模拟数据
在根目录底下新建db.json
文件,写上自己模拟的json数据,后面会要用到进行模拟接口。
json
{ "users": [ { "name": "王小婷", "phone": "123456789", "email": "11357097537@qq.com", "age": "20", "id": 1, "companyId": 1 }, { "name": "祈澈菇凉", "phone": "123456789", "email": "11357097537@qq.com", "age": "30", "id": 2, "companyId": 2 }, { "name": "最帅的坏兔子", "phone": "123456789", "email": "11357097537@qq.com", "age": "23", "id": 3, "companyId": 3 }, { "name": "安安", "phone": "123456789", "email": "11357097537@qq.com", "age": "45", "id": 4, "companyId": 3 } ], "companies": [ { "id": 1, "name": "Apple", "description": "Apple lalala!" }, { "id": 2, "name": "Microsoft", "description": "Microsoft lalala!" }, { "id": 3, "name": "Google", "description": "Google lalala!" } ] }
4:安装依赖模块
进入项目,在项目里面安装json-server的模块依赖文件,命令如下:
npm install json-server --save
安装完成会发现多了两个文件:
5:修改配置文件
打开package.json
文件,将scripts
进行修改,如下:
"scripts": { "json:server": "json-server --watch db.json" },
6:运行
完成之后,输入命令,运行:
npm run json:server
在浏览器输入http://localhost:3000/,可以看到以下界面,搭建成功。
现在可以查看一下json接口数据,输入http://localhost:3000/users,可以看到一个完整的接口啦: