vue 模拟数据请求 使用json-server

今天弄了个项目不想去写后台,于是乎搞个模拟数据,网上大部分使用express,尝试了很多个配置方式,都不成功

很难受,也可能是因为现在vue-cli的文件配置跟以前不一样的,总是不能成功。

废话多数 ,我使用的json-server 做模拟数据请求(我使用的是最新的配置文件)

第一步:先引入 npm i -s json-server
第二步:在webpack.dev.conf.js 配置
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('datas/data.json') //数据关联server,datas与index.html同级
const middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen(3000, () => {                 //监听端口
  console.log('JSON Server is running')
})

特别要注意一下模拟数据的路径问题

router('datas/data.json') 默认是和index.html同级的目录

第三步: 配置代理端口 ,因为我们的模拟数据的服务是3000端口的,存在跨域问题,解决方式有两种

1、axios配置跨域 (其实这个很多项目应该这么做,但我只是想模拟一下数据,就算了,后期在处理)

2、在config/index.js中配置

proxyTable: {
  '/api':'http://localhost:3000/'
},

备注 我的json数据格式

{
"login":{ //这里就是你要请求的接口
"errno":0 ,
"data":{
"name":"amdin",
"password":"888888"
}
}, //下面可以写很多
}
请求方式

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容