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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
js图片轮播插件的封装
Jul 21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
php MessagePack介绍
2013/10/06 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python获取中文字符串长度的方法
2018/11/14 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
利用Python计算KS的实例详解
2020/03/03 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
C++的几个面试题附答案
2016/08/03 面试题
一篇.NET面试题
2014/09/29 面试题
策划主管的工作职责
2013/11/24 职场文书
物业门卫岗位职责
2013/12/28 职场文书
临床医师个人自我评价
2014/04/06 职场文书
梅花魂教学反思
2014/04/25 职场文书
跳槽求职信范文
2014/05/26 职场文书
市场推广策划方案
2014/06/02 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python
Python find()、rfind()方法及作用
2022/12/24 Python