vue2.0插件vue-resource模拟服务端返回(JSON)数据
最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程。1:安装vue-resource;$ yarn add vue-resourceor npm add vue-resource$ npm install vue-resource2、接着在build的dev-server.js进行加
最近使用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)数据 !!!
更多推荐
所有评论(0)