欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼

 更新時(shí)間:2018年02月27日 09:41:56   作者:_Artisan  
這篇文章主要介紹了vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下

1.配置 build/webpack.dev.conf.js

// 獲取靜態(tài)json數(shù)據(jù)
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廣告發(fā)布",
   "url": "http://hearstone.com"
  }
 ],
 "login": {
  "username": "yudongdong",
  "userId": 123123
 },
 "getPrice": {
  "amount": 678
 },
 "createOrder": {
  "orderId": "6djk979"
 },
 "getOrderList": {
  "list": [
   {
    "orderId": "ddj123",
    "product": "數(shù)據(jù)統(tǒng)計(jì)",
    "version": "高級(jí)版",
    "period": "1年",
    "buyNum": 2,
    "date": "2016-10-10",
    "amount": "500元"
   },
   {
    "orderId": "yuj583",
    "product": "流量分析",
    "version": "戶外版",
    "period": "3個(gè)月",
    "buyNum": 1,
    "date": "2016-5-2",
    "amount": "2200元"
   },
   {
    "orderId": "pmd201",
    "product": "廣告發(fā)布",
    "version": "商鋪版",
    "period": "3年",
    "buyNum": 12,
    "date": "2016-8-3",
    "amount": "7890元"
   }
  ]
 }
}

3.通過(guò) localhost:8081/api/getNewsList 訪問(wèn)

4.在頁(yè)面中獲取的方式

export default {
  data() {
   newsList: []
  },
  created: function(){
   this.$http.get('api/getNewsList').then((res)=> {
    this.newsList = res.data
   },(err)=> {
    console.log(err);
   })
  }
 }

總結(jié)

以上所述是小編給大家介紹的vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • VUE django 跨域、csrf令牌的問(wèn)題

    VUE django 跨域、csrf令牌的問(wèn)題

    在Vue和Django進(jìn)行前后分離開發(fā)時(shí),經(jīng)常會(huì)遇到跨域和CSRF令牌驗(yàn)證問(wèn)題,本文詳細(xì)介紹了如何在Django后端設(shè)置視圖獲取CSRF令牌,并在Vue前端進(jìn)行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請(qǐng)求封裝的具體方法
    2024-09-09
  • Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀

    Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀

    這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue父子之間值傳遞的實(shí)例教程

    Vue父子之間值傳遞的實(shí)例教程

    這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼

    Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼

    面包屑導(dǎo)航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁(yè)到當(dāng)前頁(yè)面的鏈接序列,有助于用戶快速了解和導(dǎo)航至上級(jí)頁(yè)面,本文就來(lái)介紹一下Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下
    2024-09-09
  • 解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題

    解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題

    vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中,如果圖片較多,篇幅太長(zhǎng),就會(huì)比較煩惱,接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下
    2018-08-08
  • 在Vue組件上動(dòng)態(tài)添加和刪除屬性方法

    在Vue組件上動(dòng)態(tài)添加和刪除屬性方法

    下面小編就為大家分享一篇在Vue組件上動(dòng)態(tài)添加和刪除屬性方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue中v-if和v-show使用區(qū)別源碼分析

    vue中v-if和v-show使用區(qū)別源碼分析

    這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解

    公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 利用vant如何給tabbar配置路由

    利用vant如何給tabbar配置路由

    這篇文章主要介紹了利用vant如何給tabbar配置路由,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò)

    vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò)

    這篇文章主要介紹了vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論