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就不需要配置上面的路由了。