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異步更新DOM及$nextTick執(zhí)行機(jī)制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Element-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默認(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公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò)
這篇文章主要介紹了vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報(bào)錯(cuò),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04