Vue加載json文件的方法簡單示例

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

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

本文實例講述了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);  // 訪問地址為： /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對象里添加如下代碼：
before(app) {
   app.get('/api/address', (req, res) => {
    res.json({
     errno: 0,
     data: appData
    })
   })
}

二、然后重新 npm run dev 一下

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

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

（1）、下載axios，如果沒有的話

npm install --save axios vue-axios

（2）、在main.js里引入

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

（3）、開始請求

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

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

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

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

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

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

在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章:

Vue
json

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