vue-cli构建项目之mock data

当前后台同时开发时，后台接口尚未实现，所以前端需要根据约定好的接口来模拟接口数据来完成接口调用。在vue-cli构建的项目中，如何启动数据服务，使用mock data 呢？见下方：

在build -> dev-server.js 中启动api server

//启动api server
var apiServer = express();
//引入body-parser 模块
var bodyParser = require("body-parser");
apiServer.use(bodyParser.urlencoded({extended:true}));
apiServer.use(bodyParser.json());
//定义api router
var apiRouter = express.Router();
var fs = require("fs");
apiRouter.route("/:apiName")
.all(function(req,res){
//读db.json 中的数据作为接口返回数据
fs.readFile('./db.json',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");

})

在config->index.js 中声明代理

proxyTable{
'/api':'http://localhost:apiServer的端口号'
}

重新起本地服务器，测试api接口mock data 是否能调用成功


之后，可以使用vue-resource成功调用接口了，this.$http.get('/api/getOrderList')