vue2.5.2使用http请求获取静态json数据的实例代码
时间:2019-04-13
本文章向大家介绍vue2.5.2使用http请求获取静态json数据的实例代码,主要包括vue2.5.2使用http请求获取静态json数据的实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.配置 build/webpack.dev.conf.js
// 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) const apiRouter = express.Router() const fs = require('fs') apiRouter.route('/:apiName') .all(function (req, res) { fs.readFile('./db.json', 'utf8', function (err, data) { if (err) throw err var data = JSON.parse(data) if (data[req.params.apiName]) { res.json(data[req.params.apiName]) } else { res.send('no such api name') } }) }) apiServer.use('/api', apiRouter); apiServer.listen(8081, function (err) { if (err) { console.log(err) return } console.log('Listening at http://localhost:' + (8081) + '\n') })
2.新建 db.json
{ "getNewsList": [ { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "http://overwatch.com" }, { "id": 4, "title": "新闻条4广告发布", "url": "http://hearstone.com" } ], "login": { "username": "yudongdong", "userId": 123123 }, "getPrice": { "amount": 678 }, "createOrder": { "orderId": "6djk979" }, "getOrderList": { "list": [ { "orderId": "ddj123", "product": "数据统计", "version": "高级版", "period": "1年", "buyNum": 2, "date": "2016-10-10", "amount": "500元" }, { "orderId": "yuj583", "product": "流量分析", "version": "户外版", "period": "3个月", "buyNum": 1, "date": "2016-5-2", "amount": "2200元" }, { "orderId": "pmd201", "product": "广告发布", "version": "商铺版", "period": "3年", "buyNum": 12, "date": "2016-8-3", "amount": "7890元" } ] } }
3.通过 localhost:8081/api/getNewsList 访问
4.在页面中获取的方式
export default { data() { newsList: [] }, created: function(){ this.$http.get('api/getNewsList').then((res)=> { this.newsList = res.data },(err)=> { console.log(err); }) } }
总结
以上所述是小编给大家介绍的vue2.5.2使用http请求获取静态json数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- AdoHelper使用MySQL存储过程示例
- 使用8位字节的编码格式将字节流安全的转换成String
- 同样的SQL语句在查询分析器执行很快,但是网站上执行超时的诡异问题
- PDF.NET数据开发框架操作MySQL实体类操作实例
- 使用PDF.NET数据开发框架的实体操作语言OQL构造复杂查询条件
- 鲶鱼CMS存储XSS漏洞披露
- 【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!
- K-近邻算法(KNN)概述
- 不使用DalFactory和IDAL,支持多种数据库应用
- MVC和三层,我的一个不成熟的看法,大家批批
- 实体类的二进制序列化
- 多任务验证码识别
- 一加手机系统预装APP被曝存在后门
- 单数据库,多数据库,单实例,多实例不同情况下的数据访问效率测试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 要点1:指针、数组和复合字面量
- akka-typed(9) - 业务分片、整合,谈谈lagom, 需要吗?
- com-IFileDlg 进行文件的 打开或者保存
- 哆啦A梦?不好记!安利一下Prometheus这款开源的企业监控报警平台
- Kotlin:03-变量、常量、数据类型
- nginx工程师,需要上承天命,下召九幽
- 新版视频流媒体平台EasyNVR如何在前端显示当前页面所在位置?
- Kotlin:04-基本数据类型详细介绍
- Kotlin:05-控制流 if、when、for、while
- android: API24 及以上版本调用系统相机时报:FileUriExposedException 的解决
- Typora 完美结合 PicGo,写作体验更佳!
- 视频流媒体服务器EasyNVR在CentOS6.5上编译报 No such file or directory错误
- Flink Timer(定时器)机制及实现详解
- android:运行时权限工具类的封装
- Android:非Activity跳转Activity时要加FLAG?