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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript call和apply方法
Nov 24 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
JavaScript类的继承多种实现方法
May 30 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
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
详解javascript高级定时器
2015/12/31 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python复制与引用用法分析
2015/04/08 Python
Python多线程爬虫简单示例
2016/03/04 Python
使用Python生成XML的方法实例
2017/03/21 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
解除劳动合同协议书
2014/04/14 职场文书
大学专科求职信
2014/07/02 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL