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請求均可以