vue2.5.2使用http請求獲取靜態(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)計",
"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": "廣告發(fā)布",
"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);
})
}
}
總結(jié)
以上所述是小編給大家介紹的vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼
面包屑導(dǎo)航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁到當(dāng)前頁面的鏈接序列,有助于用戶快速了解和導(dǎo)航至上級頁面,本文就來介紹一下Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下2024-09-09
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中,如果圖片較多,篇幅太長,就會比較煩惱,接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08
公共Hooks封裝報表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報錯
這篇文章主要介紹了vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報錯,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04

