So fordern Sie lokale JSON-Daten in der Vue-Konfiguration an

Dieses Mal zeige ich Ihnen, wie Sie lokale JSON-Daten in der Vue-Konfiguration anfordern. Was sind die Vorsichtsmaßnahmen für die Vue-Konfiguration, um lokale JSON-Daten anzufordern?

Suchen Sie die Datei webpack.dev.conf.js im Build-Ordner und fügen Sie

nach const portfinder =

require

const express = require('express')
const app = express()
const appData = require('../data.json') // 加载本地json文件
const seller = appData.seller // 获取对应本地数据
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

('portfinder') hinzu. Suchen Sie dann devServer und fügen Sie den folgenden Code ein:

 //然后找到devSeerver，在里面添加
  before (app) {
   app.get('/api/seller',(reg,res) => {
    res.json({
     errno: 0,
     data: seller
    }) // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
   }),
   app.get('/api/goods',(reg,res) => {
    res.json({
     errno: 0,
     data: goods
    }) // 接口返回json数据，上面配置的数据goods就复制给data请求后调用
   }),
   app.get('/api/ratings',(reg,res) => {
    res.json({
     errno: 0,
     data: ratings
    }) // 接口返回json数据，上面配置的数据ratings就复制给data请求后调用
   })
  }

Fordern Sie den Zugriff an

<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
 data () {
  return {
   seller: {}
  }
 },
 created () {
  this.$http.get('/api/seller').then((response) => {
   response = response.body; // 获取到数据
   if (response.errno === ERR_OK) {
    this.seller = response.data;
    console.log(this.seller);
   }
  })
 },
 components: {
  'v-header': header
 }
}
</script>

Endlich neu starten

Starten Sie das Projekt , um auf npm run dev zuzugreifen

Ich glaube, Sie haben die Methode bitte beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Achten Sie auf PHP für weitere spannende Informationen. Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Was sind die Methoden der Dataframe-Abfrage in Pandas?

Wie implementiert man die Baidu-Spracherkennungs-API in Python Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSo fordern Sie lokale JSON-Daten in der Vue-Konfiguration an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!