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) + '\n')
})

　　優點:post請求和get請求都可以