vue.js學(xué)習(xí)筆記:如何加載本地json文件
更新時間：2017年01月17日 15:08:17 作者：_林沖
這篇文章主要介紹了vue.js學(xué)習(xí)筆記:如何加載本地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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli構(gòu)建的項目如何手動添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項目如何手動添加eslint配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
組件系統(tǒng)是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。這篇文章主要介紹了Vue中的組件及路由使用 ,需要的朋友可以參考下2019-05-05
element ui table（表格）實現(xiàn)點擊一行展開功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實現(xiàn)點擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
table作為數(shù)據(jù)展示組件,在日常開發(fā)中經(jīng)常被用到,這篇文章主要給大家介紹了關(guān)于vue.js管理后臺table組件封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實現(xiàn)過程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項，需要的朋友可以參考下2023-05-05
當(dāng)一個組件被定義,data必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù),因為組件可能被用來創(chuàng)建多個實例,下面這篇文章主要給大家介紹了關(guān)于vue?data中return使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細,需要的朋友可以參考下2024-01-01
Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁面的操作
這篇文章主要介紹了Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁面的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08