Vue怎么通過(guò)json文件讀取數(shù)據(jù)

本篇內(nèi)容介紹了“Vue怎么通過(guò)json文件讀取數(shù)據(jù)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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:[];  
  }
}

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

“Vue怎么通過(guò)json文件讀取數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！