vue.js學(xué)習(xí)筆記:如何加載本地json文件
在項(xiàng)目開(kāi)發(fā)的過(guò)程中，因?yàn)闊o(wú)法和后臺(tái)的數(shù)據(jù)做交互，所以我們可以自建一個(gè)假數(shù)據(jù)文件(如data.json)到項(xiàng)目文件夾中，這樣我們就可以模仿后臺(tái)的數(shù)據(jù)進(jìn)行開(kāi)發(fā)。但是，如何在一個(gè)vue.js 項(xiàng)目中引入本地的json文件呢，下面就將步驟貼出來(lái)。(此時(shí)項(xiàng)目是由webpack打包而成)。
整個(gè)項(xiàng)目是由webpack打包而成。具體項(xiàng)目結(jié)構(gòu)如下：
1：打包好的文件在此，http://pan.baidu.com/s/1dFCAzux
2：我們找到bulid>dev-server.js,然后打開(kāi)
3：在里面加入這段代碼，大概在17行）。
var app = express() //從這后面開(kāi)始加
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router();
apiRoutes.get('/seller',function (req,res) {
res.json({
errno:0,
data:seller
});
});
apiRoutes.get('/goods',function (req,res) {
res.json({
errno:0,
data:goods
});
});
apiRoutes.get('/ratings',function (req,res) {
res.json({
errno:0,
datta:ratings
});
});
app.use('/api',apiRoutes);
4：使用方法：
你可以在瀏覽器地址欄填寫(xiě)http://localhost:8080/api/seller 或者h(yuǎn)ttp://localhost:8080/api/goods 或者h(yuǎn)ttp://localhost:8080/api/ratings 查看數(shù)據(jù)
因?yàn)榧虞d的json數(shù)據(jù)沒(méi)有格式，看起來(lái)很亂，所以我們可以使用谷歌的擴(kuò)展程序JSONView。
貼上讀取數(shù)據(jù)的頁(yè)面
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
組件系統(tǒng)是 Vue 的一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。這篇文章主要介紹了Vue中的組件及路由使用 ,需要的朋友可以參考下2019-05-05
element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
table作為數(shù)據(jù)展示組件,在日常開(kāi)發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺(tái)table組件封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過(guò)程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05
當(dāng)一個(gè)組件被定義,data必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù),因?yàn)榻M件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于vue?data中return使用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了解決Vue+ts里面this.$store問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了vant樣式不生效問(wèn)題的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計(jì)算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過(guò)代碼講解非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作
這篇文章主要介紹了Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08