vue2.5.2使用http请求获取静态json数据的实例代码


Posted in Javascript onFebruary 27, 2018

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数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue下的@change事件的实现
Oct 25 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
关于ES6箭头函数中的this问题
Feb 27 #Javascript
vue中echarts3.0自适应的方法
Feb 26 #Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 #Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 #Javascript
Angular5中调用第三方js插件的方法
Feb 26 #Javascript
angular2中使用第三方js库的实例
Feb 26 #Javascript
You might like
php实现高效获取图片尺寸的方法
2014/12/12 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JS array 数组详解
2009/03/22 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jQuery事件对象总结
2016/10/17 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
商场经理竞聘演讲稿
2014/01/01 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
全国文明单位申报材料
2014/05/31 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
客户答谢会致辞
2015/01/20 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL