Vue加載json文件的方法簡單示例
本文實(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); // 訪問地址為: /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
一下
三、這時(shí)候在瀏覽器輸入 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代碼檢驗(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
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
- vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
- vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
- 詳解vue 模擬后臺數(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ù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
- vue3.0 加載json的方法(非ajax)
相關(guān)文章
vue.js實(shí)現(xiàn)回到頂部動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)回到頂部動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vsCode中vue文件無法提示html標(biāo)簽的操作方法
在vsCode中書寫Vue頁面時(shí)無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03

Pinia入門學(xué)習(xí)之實(shí)現(xiàn)簡單的用戶狀態(tài)管理

vue如何通過ref調(diào)用router-view子組件的方法

vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法

vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能

element-ui循環(huán)顯示radio控件信息的方法