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) => {

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

})

推荐阅读更多精彩内容