Vue加載json文件的方法簡單示例
本文實例講述了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 便可看到j(luò)son文件的數(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:這里再為大家推薦幾款相關(guān)的json在線工具供大家參考:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
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
希望本文所述對大家vue.js程序設(shè)計有所幫助。
- vue集成openlayers加載geojson并實現(xiàn)點擊彈窗教程
- vue中img src 動態(tài)加載本地json的圖片路徑寫法
- 詳解vue 模擬后臺數(shù)據(jù)(加載本地json文件)調(diào)試
- vue.js學(xué)習(xí)筆記:如何加載本地json文件
- Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
- Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
- vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
- vue3.0 加載json的方法(非ajax)
相關(guān)文章
vsCode中vue文件無法提示html標(biāo)簽的操作方法
在vsCode中書寫Vue頁面時無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
Pinia入門學(xué)習(xí)之實現(xiàn)簡單的用戶狀態(tài)管理
vue如何通過ref調(diào)用router-view子組件的方法
vue+iview 兼容IE11瀏覽器的實現(xiàn)方法
element-ui循環(huán)顯示radio控件信息的方法

