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

vue.js實現(xiàn)回到頂部動畫效果
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)回到頂部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
Vue的Options用法說明
這篇文章主要介紹了Vue的Options用法說明，具有很好的參考價值，希望對大家有所
2020-08-08
詳解VUE的狀態(tài)控制與延時加載刷新
本篇文章主要介紹了詳解VUE的狀態(tài)控制與延時刷新，實例分析了數(shù)據(jù)延時到展示的時候再去刷新的技巧，有興趣的可以了解一下。
2017-03-03
vsCode中vue文件無法提示html標簽的操作方法
在vsCode中書寫Vue頁面時無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關于vsCode中vue文件無法提示html標簽的操作方法,需要的朋友可以參考下
2023-03-03
Vue使用watch監(jiān)聽數(shù)組或對象
這篇文章介紹了Vue使用watch監(jiān)聽數(shù)組或對象的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
Pinia入門學習之實現(xiàn)簡單的用戶狀態(tài)管理
Vue3雖然相對于Vue2很多東西都變了,但是核心的東西還是沒有變,比如說狀態(tài)管理、路由等,再Vue3中尤大神推薦我們使用pinia來實現(xiàn)狀態(tài)管理,他也說pinia就是Vuex的新版本,這篇文章主要給大家介紹了關于Pinia入門學習之實現(xiàn)簡單的用戶狀態(tài)管理的相關資料,需要的朋友可以參考下
2022-11-11
vue如何通過ref調(diào)用router-view子組件的方法
這篇文章主要介紹了vue?通過ref調(diào)用router-view子組件的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
vue+iview 兼容IE11瀏覽器的實現(xiàn)方法
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue實現(xiàn)pdf文檔在線預覽功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)pdf文檔在線預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08