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)数据 ！！！