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

 更新时间:2018年02月27日 09:41:56   作者:_Artisan  
这篇文章主要介绍了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数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • VUE django 跨域、csrf令牌的问题

    VUE django 跨域、csrf令牌的问题

    在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法
    2024-09-09
  • Vue异步更新DOM及$nextTick执行机制解读

    Vue异步更新DOM及$nextTick执行机制解读

    这篇文章主要介绍了Vue异步更新DOM及$nextTick执行机制解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue父子之间值传递的实例教程

    Vue父子之间值传递的实例教程

    这篇文章主要给大家介绍了关于Vue父子之间值传递的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • Element-UI组件实现面包屑导航栏的示例代码

    Element-UI组件实现面包屑导航栏的示例代码

    面包屑导航栏是一种用户界面组件,用于展示用户在网站或应用中的路径,它包括了从主页到当前页面的链接序列,有助于用户快速了解和导航至上级页面,本文就来介绍一下Element-UI组件实现面包屑导航栏的示例代码,感兴趣的可以了解一下
    2024-09-09
  • 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片较多,篇幅太长,就会比较烦恼,接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,需要的朋友可以参考下
    2018-08-08
  • 在Vue组件上动态添加和删除属性方法

    在Vue组件上动态添加和删除属性方法

    下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue中v-if和v-show使用区别源码分析

    vue中v-if和v-show使用区别源码分析

    这篇文章主要为大家介绍了vue中v-if和v-show使用区别源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 公共Hooks封装报表导出useExportExcel实现详解

    公共Hooks封装报表导出useExportExcel实现详解

    这篇文章主要为大家介绍了公共Hooks封装报表导出useExportExcel实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 利用vant如何给tabbar配置路由

    利用vant如何给tabbar配置路由

    这篇文章主要介绍了利用vant如何给tabbar配置路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目下,如何用命令直接修复ESLint报错

    vue项目下,如何用命令直接修复ESLint报错

    这篇文章主要介绍了vue项目下,如何用命令直接修复ESLint报错,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论