在使用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) => {
//第二个是失败的返回函数
})