当前位置:首页 > 编程教程 > vue技术文章 > vue2.5.2使用http请求获取静态json数据的实例代码

详解vue2.5.2如何使用http请求获取静态json数据

  • 发布时间:
  • 作者:码农之家
  • 点击:109

这篇文章主要知识点是关于vue2.5.2、http、静态json、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

http请求获取静态json数据 相关电子书
学习笔记
网友NO.329674

深入讲解xhr(XMLHttpRequest)/jsonp请求之abort

前言 相信大家在工作中经常需要使用AJAX,所以 当大家看到文章标题的时候可能会觉得这是一个老生常谈的话题。 前端开发中向后端发起xhr(XMLHttpRequest)请求(代表性的就是熟悉的ajax)是再正常不过的事。 但在前端开发过程中,不怎么重视xhr的abort(中止掉xhr请求,及表示取消本次请求)。往往会带来一些不可意料的结果。 比如:切换tab,发起xhr请求,渲染同一个列表。就这么简单的拉取数据渲染列表的功能,并且可以根据tab切换。想想应该是很简单。但是假如你只顾着发起xhr请求,而没有abort掉它,想想会发生什么。很有可能就是当前选中的tab数据,并不是你想要的。说白了就是数据错了。这时候你可能就要考虑是不是xhr请求返回数据的顺序问题。 答案是肯定的,xhr请求返回数据顺序是不固定的。所以你要做的就是abort掉你之前的xhr请求,然后……

网友NO.406546

python3 http提交json参数并获取返回值的方法

如下所示: import jsonimport http.client connection = http.client.HTTPSConnection('spd.aiopos.cn') headers = {'Content-type': 'application/json'} values = { 'acct_pan':'6226011****83678', 'acct_name':'张三', 'cert_type':'01', 'cert_id':'37293019****95', 'phone_num':'1516××××02'} json_foo = json.dumps(values) connection.request('POST', '/authen/verifi?access_token=e2011a', json_foo, headers) response = connection.getresponse()print(response.read().decode()) 以上这篇python3 http提交json参数并获取返回值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.752843

java发起http请求获取返回的Json对象方法

话不多说,先看代码! /** * Created by david on 2017-7-5. */import com.google.gson.JsonObject;import com.google.gson.JsonParser;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.net.HttpURLConnection;import java.net.URL;public class HttpRequestUtil { /** * 发起http请求并获取结果 * @param requestUrl 请求地址 */ public static JsonObject getXpath(String requestUrl){ String res=""; JsonObject object = null; StringBuffer buffer = new StringBuffer(); try{ URL url = new URL(requestUrl); HttpURLConnection urlCon= (HttpURLConnection)url.openConnection(); if(200==urlCon.getResponseCode()){ InputStream is = urlCon.getInputStream(); InputStreamReader isr = new InputStreamReader(is,"utf-8"); BufferedReader br = new BufferedReader(isr); String str = null; while((str = br.readLine())!=null){ buffer.append(str); } br.close(); isr.close(); is.close(); res = buffer.toString(); JsonParser parse =new JsonP……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757