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

版权声明：原创内容，版权所有【web_hwf@sain.com】 https://blog.csdn.net/weixin_42406046/article/details/80619735

今天弄了个项目不想去写后台，于是乎搞个模拟数据，网上大部分使用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" } }, //下面可以写很多 } 请求方式

阅读更多