vue2.0插件vue-resource模拟服务端返回(JSON)数据
来源:互联网 发布:seo有何优缺点 编辑:程序博客网 时间:2024/06/07 00:18
最近使用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)数据 !!!
阅读全文
1 0
- vue2.0插件vue-resource模拟服务端返回(JSON)数据
- Vue2.0 之vue-resource 模拟服务端返回本地json数据
- vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
- vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
- Vue2.0 使用vue-resource 模拟网络请求加载本地数据
- vue-resource + json-server模拟数据 vue-cli配置
- Vue之vue-resource入门--模拟数据
- Fiddler 4 模拟 服务端返回 json
- vue2.0 如何通过本地json文件模拟后台数据接口
- vue-resource插件使用
- vue-resource插件使用
- vue-resource插件使用
- vue-resource插件使用
- vue-resource插件使用
- 使用vue2.0 vue-router vuex 模拟ios7操作
- 使用vue2.0 vue-router vuex 模拟ios7操作
- vue2.0配置resource
- Struts2 json插件返回json数据配置
- Android Studio与eclipse的区别
- JAVA学习笔记(11)-- Java类的定义及其实例化
- IIS服务器返回Bad Request
- SPOJ LCS Longest Common Substring
- js forEach
- vue2.0插件vue-resource模拟服务端返回(JSON)数据
- mysql对emoji特殊字符进行存储
- Docker for Mac 镜像加速器配置
- Matplotlib 入门教程
- Facebook服软_把React协议改成MIT你还会用吗?
- 请求时才加载JS文件,从而不阻塞浏览器
- OpenGL学习: 光照系列2-材质和lighting maps使用
- xcode无线真机调试
- opencv main 函数里的argc *argv[]解释