vue.js學(xué)習(xí)筆記:如何加載本地json文件
在項(xiàng)目開發(fā)的過(guò)程中，因?yàn)闊o(wú)法和后臺(tái)的數(shù)據(jù)做交互，所以我們可以自建一個(gè)假數(shù)據(jù)文件(如data.json)到項(xiàng)目文件夾中，這樣我們就可以模仿后臺(tái)的數(shù)據(jù)進(jìn)行開發(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,然后打開
3：在里面加入這段代碼，大概在17行）。
var app = express() //從這后面開始加
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：使用方法：
你可以在瀏覽器地址欄填寫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 proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue axios庫(kù)避免重復(fù)發(fā)送請(qǐng)求的示例介紹
Axios是一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫(kù)之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
手寫vue無(wú)限滾動(dòng)指令的詳細(xì)過(guò)程
今天在移動(dòng)端項(xiàng)目中遇見一個(gè)需求,需要數(shù)據(jù)無(wú)限滾動(dòng),所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無(wú)限滾動(dòng)指令的詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
vue中實(shí)現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實(shí)現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue項(xiàng)目打包問(wèn)題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過(guò)程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問(wèn)題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表固定列滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue框架實(shí)現(xiàn)將側(cè)邊欄完全隱藏
這篇文章主要介紹了vue框架實(shí)現(xiàn)將側(cè)邊欄完全隱藏，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
element-ui 限制日期選擇的方法(datepicker)
本篇文章主要介紹了element-ui 限制日期選擇的方法(datepicker)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05