json-server的使用

项目开发中，为保证项目进度，前后端不相互依赖，前端需要自己造api返回的数据来写页面的各种逻辑，而页面写死假数据的做法效率太差，所以就有了Mock数据的方法，最常用的方法就是json-server

json-server是什么？
json-server顾名思义，是个存储json数据的server，是Node的一个模块，模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

json-server如何使用？
1、下载安装
使用npm来安装：
npm install -g json-server

查看是否安装成功：
json-server -v

2、如何Mock数据
1、在项目里面新建一个Mock文件夹，然后在此文件夹下新建一个db.json文件（也可在根目录下创建，文件名自定义）
可以先在这个文件里面写死几条你要的数据，方便后面验证：

{
  "users":[
    {
      "id":1,
      "name":"tom",
      "age":"13",
      "email":"tom@qq.com"
    },
    {
      "id":2,
      "name":"andy",
      "age":"18",
      "email":"andy@qq.com"
    },
    {
      "id":3,
      "name":"lose",
      "age":"26",
      "email":"lose@qq.com"
    }
  ]
}

2、命令行进入到Mock目录，执行以下命令启动：

// 默认端口是3000，也可以自己定义断后
json-server --watch db_xxx.json --port 3004

若觉得每次这么启动麻烦，可将启动命令写成一个配置文件
在db.json同级目录里面，新建一个package.json文件，在里面写入启动的配置
{
“scripts”: {
“mock”: “json-server db.json --port 3004”
}
}

进入Mock目录下，然后启动的时候输入：npm run mock
启动服务后，你将在控制台看到输出的host地址，这个就是你Mock数据时要请求的地址

3.使用接口（post/put/delete）
使用postman测试post pust delete

（2）.patch(修改数据)


3.delete(删除数据)


不想用axios的话，也可以使用jquery的getJSON()方法)

npm install --save json-server
三、配置json-server
在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。
/----------------jsonServer---------/

/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
  console.log('JSON Server is running')
})

四、访问数据
　　配置完成后，要npm dev run 重启项目，然后再地址栏输入http://localhost:3000 就可以访问到数据。
五、设置代理
　　最后做一下浏览器代理设置，在 config/index.js中：

/*代理配置表，在这里可以配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/
proxyTable: {
  '/api': {
    changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
    target: 'http://localhost:3000',// 接口的域名
    pathRewrite: {
      '^/api': ''//后面可以使重写的新路径，一般不做更改
    }
  }

六、最后验证一下代理是否成功
　　在浏览器输入地址：http://localhost:8080/api。
　　
使用

POST、PUT、PATCH请求头中要包含Content-Type: application/json；