vue項(xiàng)目如何引入json數(shù)據(jù)
vue項(xiàng)目引入json數(shù)據(jù)
在項(xiàng)目中我們?cè)谝胱约簩?xiě)的json數(shù)據(jù),可以通過(guò)json-server方法將json文件轉(zhuǎn)化為一個(gè)端口號(hào)引入!但是使用該方法前需要導(dǎo)入node的一個(gè)模塊!
json-server可以直接把一個(gè)json文件托管成一個(gè)具備全RESTful風(fēng)格的API,并支持跨域、jsonp、路由訂制、數(shù)據(jù)快照保存等功能的 web 服務(wù)器。
然后在json文件目錄下,運(yùn)行 json-server --watch --port 3001 data.json指令
通過(guò)啟動(dòng)json-server服務(wù)并偵聽(tīng)data.json,就可以將data.json文件托管成一個(gè) web 服務(wù),此時(shí)data.json就充當(dāng)了數(shù)據(jù)庫(kù)服務(wù)器的作用
然后在組件中就可以直接使用這個(gè)端口啦!
vue引入json數(shù)據(jù),無(wú)請(qǐng)求,直接引入的那種
vue項(xiàng)目經(jīng)常會(huì)造一些假數(shù)據(jù),一般我都是直接在.vue頁(yè)面里直接寫(xiě),今天來(lái)看一下外部引入json數(shù)據(jù)吧
購(gòu)物車(chē)頁(yè)面(cart.vue)的假數(shù)據(jù)我放在了cartGoods.js里面
cartGoods.js代碼如下:
const goodsJson = [ {"id":1,"title":"蘋(píng)果","price":2.2}, {"id":2,"title":"香蕉","price":3.2}, {"id":3,"title":"橘子","price":1.4}, {"id":4,"title":"芒果","price":5.6}, {"id":5,"title":"梨子","price":3.3}, {"id":6,"title":"葡萄","price":3.6} ] const addrList = [ { id:1, addr:"上海市浦東新區(qū)鵬飛路5103弄7號(hào)1102" }, { id:2, addr:"上海市浦東新區(qū)高青路2345弄20號(hào)101" } ] export default { goodsJson, addrList }
引入方式?jīng)]啥差別
// 引入 import goodsData from '../../static/mockJson/cartGoods'; // 應(yīng)用 created(){ console.log(goodsData) //打印出全部 this.goodsList = goodsData.goodsJson // 一個(gè)js里可以聲明多組數(shù)據(jù),該用誰(shuí)取誰(shuí)就好 },
渲染出來(lái)頁(yè)面效果如下:
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式
這篇文章主要介紹了vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解
這篇文章主要為大家介紹了Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決
這篇文章主要介紹了vue.set向?qū)ο罄镌黾佣鄬訑?shù)組屬性不生效問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染
這篇文章主要介紹了vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05Vue源碼學(xué)習(xí)之關(guān)于對(duì)Array的數(shù)據(jù)偵聽(tīng)實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼學(xué)習(xí)之關(guān)于對(duì)Array的數(shù)據(jù)偵聽(tīng)實(shí)現(xiàn),Vue使用了一個(gè)方式來(lái)實(shí)現(xiàn)Array類(lèi)型的監(jiān)測(cè)就是攔截器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04vue3?+?element-plus?的?upload?+?axios?+?django?實(shí)現(xiàn)文件上
這篇文章主要介紹了vue3?+?element-plus?的?upload?+?axios?+?django?文件上傳并保存,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08