Vue2.5如何通過(guò)json文件讀取數(shù)據(jù)

這篇文章主要介紹了Vue2.5如何通過(guò)json文件讀取數(shù)據(jù)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1.準(zhǔn)備工作

1.1 webpack.dev.conf.js

在 const portfinder = require(‘portfinder') 的下面加上以下代碼

const express = require('express')
const app = express()
var appData = require('../data.json')//加載本地?cái)?shù)據(jù)文件的路徑
var leftMenu = appData.leftMenu //獲取對(duì)應(yīng)的本地?cái)?shù)據(jù)
var 數(shù)據(jù)名稱 = appData.選擇項(xiàng)
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer，在里面加入一下代碼

before(app) {
 app.get('/api/leftmenu', (req, res) => {
  res.json({
   errno: 0,
   data: leftMenu
  })//接口返回json數(shù)據(jù)，上面配置的數(shù)據(jù)seller就賦值給data請(qǐng)求后調(diào)用
 }),
 app.get('/api/數(shù)據(jù)', (req, res) => {
  res.json({
   errno: 0,
   data: 數(shù)據(jù)（與上面數(shù)據(jù)名稱對(duì)應(yīng)）
  })
 })
}

2.在使用的組件里

created(){
  this.$http.get('api/leftmenu').then((response) => {
   console.log(response)
   this.leftMenu = response.body.data  //數(shù)據(jù)位置
  })
} 
data(){
  return{
    leftMenu:[];  
  }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue2.5如何通過(guò)json文件讀取數(shù)據(jù)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!