快捷導(dǎo)航

Vue加載json文件的方法簡(jiǎn)單示例

更新時(shí)間：2019年01月28日 08:47:17 作者：低頭撿到蛋

這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)json文件的加載及數(shù)據(jù)讀取等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Vue加載json文件的方法。分享給大家供大家參考，具體如下：

一、在build/dev-server.js文件里 var app = express() 這句代碼后面添加如下(舊版)：

var appData = require('../address.json'); // 引入address.json文件
var apiRoutes = express.Router();
apiRoutes.get('/address',function (req,res) {
 res.json({
  errno:0,
  data:appData
 });
});
app.use('/api',apiRoutes);  // 訪問(wèn)地址為： /api/address

新版代碼如下：

在build/webpack.dev.conf.js文件里添加如下代碼：

const express = require('express')
const app = express()
var appData = require('../address.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

// 在devServer對(duì)象里添加如下代碼：
before(app) {
   app.get('/api/address', (req, res) => {
    res.json({
     errno: 0,
     data: appData
    })
   })
}

二、然后重新 npm run dev 一下

三、這時(shí)候在瀏覽器輸入 http://localhost:8080/api/address 便可看到j(luò)son文件的數(shù)據(jù)了。

在組件里可以用axios或者其它方式請(qǐng)求獲取數(shù)據(jù)，請(qǐng)求URL為：'/api/address'，例如用axios的話：

（1）、下載axios，如果沒(méi)有的話

npm install --save axios vue-axios

（2）、在main.js里引入

import axios from 'axios'
Vue.prototype.$http = axios

（3）、開(kāi)始請(qǐng)求

this.$http.get('/api/address').then(response => {
   console.log(response)
}, response => {
   console.log('數(shù)據(jù)加載失敗')
})

PS：這里再為大家推薦幾款相關(guān)的json在線工具供大家參考：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

Vue
json

相關(guān)文章

基于iview的router常用控制方式
這篇文章主要介紹了基于iview的router常用控制方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
Vue3學(xué)習(xí)筆記之依賴(lài)注入Provide/Inject
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴(lài)注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下
2023-05-05
在vue中使用echarts(折線圖的demo,markline用法)
這篇文章主要介紹了在vue中使用echarts(折線圖的demo,markline用法)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件
這篇文章主要利用websocked 建立長(zhǎng)連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽(tīng)消息變化，并驅(qū)動(dòng)頁(yè)面變化實(shí)現(xiàn)實(shí)時(shí)聊天，感興趣的可以了解一下
2021-08-08
Vue計(jì)時(shí)器的用法詳解
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)時(shí)器的用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue.js—定義全局變量、函數(shù)的方式
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue項(xiàng)目實(shí)現(xiàn)多語(yǔ)言切換的思路
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)多語(yǔ)言切換的思路，幫助大家完成多語(yǔ)言翻譯，感興趣的朋友可以了解下
2020-09-09
Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，
2020-01-01
vue+web端仿微信網(wǎng)頁(yè)版聊天室功能
這篇文章主要介紹了vue+web端仿微信網(wǎng)頁(yè)版聊天室功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
這篇文章主要介紹了vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04