美文网首页
mock数据_API路由调用本地数据

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

作者: 编程知识圈 | 来源:发表于2017-06-25 19:51 被阅读0次

在使用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) => {

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

})

相关文章

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

    在使用vue时,当我们在本地模拟api调用服务器中的数据时,假设我们本地的数据存放在一个data.json的数据文...

  • 使用mock数据进行开发

    核心思想:webpack中使用代理,访问本地的mock数据 API参考:https://webpack.docsc...

  • 使用 NodeJs 实现本地接口系统

    本地mock数据服务 1、概述 一个基于node.js的轻量级API mock服务。 支持GET和POST请求、支...

  • koa api测试文档

    api测试重点 测试执行阶段 api接口测试时,需要在构建环境启动服务并且连接mock数据库,mock数据库要通过...

  • 如何mock数据

    mock数据有搭建本地服务器mock和通过线上网站mock数据两种方法:1.搭建本地服务器安装node.js,使用...

  • axios请求封装

    axios封装 简单设置本地mock数据

  • vue本地开发mock数据.md

    一、为什么要mock数据? 二、如何mock数据? 三、webpack本地代理配置 四、mockjs使用 五、ea...

  • ionic开发模式下跨域调试

    数据mock。在组建中,通过http模块调用数据接口,只需要在www目录下建立对应的文件,即可完成数据mock。 ...

  • Charles学习笔记

    1. Day1 mock数据 为什么要mock数据从发布建数据比较麻烦or发布端还没有做好;后端api格式已经定好...

  • vue常用的插件等安装

    Vuex:状态管理 vue-router:路由 axios:请求数据 mock:模拟后台数据 less和sass ...

网友评论

      本文标题:mock数据_API路由调用本地数据

      本文链接:https://www.haomeiwen.com/subject/cdyrcxtx.html