Vue加載json文件的方法簡(jiǎ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集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
- vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫(xiě)法
- 詳解vue 模擬后臺(tái)數(shù)據(jù)(加載本地json文件)調(diào)試
- vue.js學(xué)習(xí)筆記:如何加載本地json文件
- Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
- Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
- vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能示例
- vue3.0 加載json的方法(非ajax)
相關(guān)文章
vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
Pinia入門(mén)學(xué)習(xí)之實(shí)現(xiàn)簡(jiǎn)單的用戶狀態(tài)管理
vue如何通過(guò)ref調(diào)用router-view子組件的方法
vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
element-ui循環(huán)顯示radio控件信息的方法

