vue-cli中配置mock数据的方法

有时候前端想要请求数据的时候需要先自己手动创造一些假数据来调试，等到后台接口写好，才可以真正的进行连调.这里介绍两种在vue项目中配置mock数据的方法

1、使用json-server

　　首先在vue-cli脚手架创建的目录中的build/dev-server.js 添加如下代码(注意db.json文件就是我们的假数据的文件，把他放到和index.html文件同级目录下)　

var jsonServer = require('json-server');
var apiServer = jsonServer.create();
var apiRouter = jsonServer.router('db.json');
var middlewares = jsonServer.defaults();

apiServer.use(middlewares);
apiServer.use('/api',apiRouter);
apiServer.listen(port+1,function(){
  console.log('json-server is running');
})

　　然后在config/index.js下设置代理,找到dev 下的proxyTable ，代码如下（代码的意思就是当本地访问localhost:8080/api的时候访问localhost:8081这个地址所以在上面的配置当中apiRouter里面也要加上/api 才可以正常访问）　

 proxyTable: {
      '/api/':'http://localhost:8081'//代理配置
    },

　　缺点:这种方法只适合于get请求 post请求会有问题

2、使用express创建

　　在dev-server文件加如下代码（具体代码不做解释需要有node基础）　下面的配置代理和上面一样

var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName')
  .all(function (req, res) {
    fs.readFile('./db.json', 'utf8', function (err, data) {
      if (err) throw err
      var data = JSON.parse(data)
      if (data[req.params.apiName]) {
        res.json(data[req.params.apiName])
      }
      else {
        res.send('no such api name')
      }

    })
  })
apiServer.use('/api', apiRouter);
apiServer.listen(port + 1, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (port + 1) + '
')
})

　　优点:post请求和get请求都可以

vue-cli中配置mock数据的方法

相关推荐