26
2017
09

vue2.0插件vue-resource模拟服务端返回(JSON)数据

最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程。
1:安装vue-resource;

$ yarn add vue-resource   or npm add vue-resource
$ npm install vue-resource

2、接着在build的dev-server.js进行加入代码:

var app = express();
// 添加 JSON 文件 
var data = require('..mock/data.json');//相对路径
var message = data.massages; // 获取data.json文件的对象或者字段名

var apiRoutes = express.Router();
apiRoutes.get('/message',function (req,res) {
  res.json({
    errno:0,
    data:message
  });
});

app.use('/api',apiRoutes);

PS : json文件

这里写图片描述

通过express提供的Router对象及其一些方法(这里用的get方法)来设置接口(请求路径)以及请求成功后的回调函数来处理要返回给请求端的数据。
最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。在这个“接口”中,当我们访问“http://localhost:8080/api/message”路径的时候,就会返回data.json里的message对象给我们。
注意:修改好后重新执行下npm run dev (当dev-server.js和db.json改变后都需要进行该步骤)

这里写图片描述

抱歉这里代码没有格式话, 不过可以看出来已经请求成功。(有代码洁癖的可以用Google:代码格式化工具jsonview 插件)!

接来下我们就可以在页面里发送请求了:

这里写图片描述

我们返回控制台查看

这里写图片描述

这样已经返回我们的 JSON 数据了 了。
最后渲染到我们的页面上就 ok 了!!!!

这里写图片描述

到这里就结束了, 这就是最终渲染的页面了!

ps :后期还会继续分享 另一种方式 模拟服务端返回(JSON)数据 !!!

上一篇:Activity+弹框,点击home键Activity生命周期 下一篇:git 使用笔记