1. Dotnet9首页
  2. 更多分享
  3. 最佳实践
  4. 技术分享

json-server模拟后端接口

22

作为一个前端,在实现项目功能的时候,需要在前端写一个静态的json数据,进行测试,但是有的时候,需要涉及到全模拟请求以及请求回来的过程,实现动态增删改查,这个时候就需要使用到web的API接口神器json-server。

文档:https://www.npmjs.com/package/json-server
参考链接:https://www.jianshu.com/p/863c3e55299d

json server 作为工具,足够简单,写少量数据,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法。在使用之前先确定安装node和npm最新版本。

1:全局安装json-server

打开cmd,右键以管理员身份运行(我的电脑是win10的,所以需要权限)

json-server模拟后端接口

输入json-server -h进行测试,查看是否安装成功,出现以下内容说明安装成功。

json-server模拟后端接口
2:在D盘新建一个文件夹JsonServer

命令行进入新建的文件夹里面。

json-server模拟后端接口

初始化文件npm init ,一路回车键。

json-server模拟后端接口

这个时候,空文件夹里面生成了一个package.json文件。

json-server模拟后端接口
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
json-server模拟后端接口

安装完成会发现多了两个文件:

json-server模拟后端接口
5:修改配置文件

打开package.json文件,将scripts进行修改,如下:

"scripts": {
    "json:server": "json-server --watch db.json"
},
json-server模拟后端接口
6:运行

完成之后,输入命令,运行:

npm run json:server
json-server模拟后端接口

在浏览器输入http://localhost:3000/,可以看到以下界面,搭建成功。

json-server模拟后端接口

现在可以查看一下json接口数据,输入http://localhost:3000/users,可以看到一个完整的接口啦:

json-server模拟后端接口

作者:祈澈菇凉
链接:https://www.jianshu.com/p/920d73fc32de
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文出处:简书【祈澈菇凉】

原文链接:https://www.jianshu.com/p/920d73fc32de

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论