新聞中心
這篇文章主要介紹了Vue2.5如何通過json文件讀取數(shù)據(jù),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
1.準(zhǔn)備工作
1.1 webpack.dev.conf.js
在 const portfinder = require(‘portfinder')
的下面加上以下代碼
const express = require('express') const app = express() var appData = require('../data.json')//加載本地數(shù)據(jù)文件的路徑 var leftMenu = appData.leftMenu //獲取對應(yīng)的本地數(shù)據(jù) var 數(shù)據(jù)名稱 = appData.選擇項 var apiRoutes = express.Router() app.use('/api', apiRoutes)
找到devServer,在里面加入一下代碼
before(app) { app.get('/api/leftmenu', (req, res) => { res.json({ errno: 0, data: leftMenu })//接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)seller就賦值給data請求后調(diào)用 }), app.get('/api/數(shù)據(jù)', (req, res) => { res.json({ errno: 0, data: 數(shù)據(jù)(與上面數(shù)據(jù)名稱對應(yīng)) }) }) }
2.在使用的組件里
created(){ this.$http.get('api/leftmenu').then((response) => { console.log(response) this.leftMenu = response.body.data //數(shù)據(jù)位置 }) } data(){ return{ leftMenu:[]; } }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue2.5如何通過json文件讀取數(shù)據(jù)”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章標(biāo)題:Vue2.5如何通過json文件讀取數(shù)據(jù)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://www.dlmjj.cn/article/cecpph.html