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

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

一、使用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请求会有问题

二、使用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) + '\n')
})

　　优势:post请求和get请求均可以