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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
json

相關(guān)文章

vue-cli構(gòu)建的項目如何手動添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項目如何手動添加eslint配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中的組件及路由使用實例代碼詳解
組件系統(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
vue.js管理后臺table組件封裝的方法
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
vue?data中的return使用方法示例
當(dāng)一個組件被定義,data必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù),因為組件可能被用來創(chuàng)建多個實例,下面這篇文章主要給大家介紹了關(guān)于vue?data中return使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
解決Vue+ts里面this.$store問題
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vant樣式不生效問題的解決辦法
這篇文章主要給大家介紹了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