mock数据_API路由调用本地数据

在使用vue时，当我们在本地模拟api调用服务器中的数据时，假设我们本地的数据存放在一个data.json的数据文件中，我们要通过vue-resouce（或者使用axios）调用api的形式使用这个文件中数据，我们可以使用node的路由Router来模拟路由调用。

在webpack项目中，内设了node，我们可以在build文件夹下的dev-server.js中找到node的框架express，（dev-server.js是webpack的入口文件），通过express.Router()来定义路由。至于data.json这个文件，我们可以直接require(‘相对路径/data.json’)获取到这个文件下的全部数据对象。

具体例子如下：

在build -> dev-server.js进行编写

//1、引入data.json数据文件

var appData = require(‘相对路径/data.json’);

//通过appData.xxx获取到每个独立的子对象

var objectA = appData.objectA;

var objectB = appData.objectB;

var objectC = appData.objectC;

//2、使用路由Router()

var apiRoutes = express.Router();

apiRoutes.get(‘/objectA’,function(req,res){

res.json({

type:0,

data:objectA

})

});

apiRoutes.get(‘/objectB’,function(req,res){

res.json({

type:0,

data:objectB

})

});

apiRoutes.get(‘/objectC’,function(req,res){

res.json({

type:0,

data:objectC

})

});

app.use(‘/api’,apiRoutes);//所有url以/api开始的，都会分配到apiRoutes这个对象中

如果我们直接在浏览器url中访问这个localhost:8080/api/objectA就会返回请求的数据（json格式），但浏览器并不能格式化json格式，所以当我们使用Google的chrome浏览器，我们可以安装它的插件来格式化json数据（jsonview插件）。

前面我们设定好了路由，接下来，我们就是使用路由，vue以前是使用vue-resouce来访问服务器的，但在vue2.0之后，停止了更新vue-resouce，转而使用axios插件，对于axios我在这里不多说，我就说一下使用vue-resouce,它非常易上手，官方文档详细。

我们可以使用this.$http.get(‘/api/objectA’).then((response) => {

//第一个函数是成功的返回函数

response= response.body();

if(response.type=0){

this.objectA = response.objectA

}

},(err) => {

//第二个是失败的返回函数

})