vue.js學習筆記:如何加載本地json文件
更新時間：2017年01月17日 15:08:17 作者：_林沖
這篇文章主要介紹了vue.js學習筆記:如何加載本地json文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。
在項目開發(fā)的過程中，因為無法和后臺的數(shù)據(jù)做交互，所以我們可以自建一個假數(shù)據(jù)文件(如data.json)到項目文件夾中，這樣我們就可以模仿后臺的數(shù)據(jù)進行開發(fā)。但是，如何在一個vue.js 項目中引入本地的json文件呢，下面就將步驟貼出來。(此時項目是由webpack打包而成)。
整個項目是由webpack打包而成。具體項目結(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 或者http://localhost:8080/api/goods 或者http://localhost:8080/api/ratings 查看數(shù)據(jù)
因為加載的json數(shù)據(jù)沒有格式，看起來很亂，所以我們可以使用谷歌的擴展程序JSONView。
貼上讀取數(shù)據(jù)的頁面
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue proxy 的優(yōu)勢與使用場景實現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢與使用場景實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Axios是一個基于promise的HTTP庫，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請求庫之一,我們封裝axios請求也是為了讓代碼看的更加清晰,后期好維護2023-02-02
vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天在移動端項目中遇見一個需求,需要數(shù)據(jù)無限滾動,所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動指令的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
插槽slot可以說在一個Vue項目里面處處都有它的身影，比如我們使用一些UI組件庫的時候，我們通常可以使用插槽來自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
vue中實現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue項目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項目的打包是一個非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue框架實現(xiàn)將側(cè)邊欄完全隱藏，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
element-ui 限制日期選擇的方法(datepicker)
本篇文章主要介紹了element-ui 限制日期選擇的方法(datepicker)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05