使用json-server创建mock数据

json-server的作用就是在不需要后端提供接口的情况下，自行搭建json服务器。

写mock数据首先就是要会写接口文档，才能写json数据。我们先说如何使用json-server;

json-server没有办法配置api；

1. npm中搜索json-server用法

npm i json-server -g json-server命令提示

2. 暴露json数据

```
var poslist = require('./polist.json')
module.exports = function(){
return {
list:poslist
}
}
```

3. json-server ./static/mock/mock.js 9000 json数据和端口号

显示url来访问json数据；此时可以手动修改url可以查看到json文件；

mock.js:

```

挂载数据：

componentDidMount(){
  fetch('/api/position/list') //当前请求的路径
  .then((response)=>response.json())
  then((res)=>{
  this.data.list = res.data.subjects
 })
}

遇到api时候跳转到目标路径,需要在node_module中找到react-script进行配置跨域：

proxyTable:{
'/api':{
target:'http://localhost:9000',//自己配置的url,
changeOrigin:true,
<!-- pathRewrite:{//将/api从url中去掉；接口最好加api，因为知道他是个接口;
'^/api':''
} -->
}

}

此时访问的路径只能是/api/list,而且是利用pathRewrite的方法；而在暴露接口的时候不支持'/',而他支持list.jsp的方式，因此可以配置路由：

因此配置jsonserver的路由：

router:{
'/api/position/list':'/list' //配置路由进行跳转，不是vue路由
}
```

假如你只配置/api/list就不需要配置上面的路由了。