Welche Schritte sind erforderlich, um Vue für die Anforderung lokaler JSON-Daten zu konfigurieren?

Dieses Mal werde ich Ihnen die Schritte vorstellen, die für die Vue-Konfiguration zum Anfordern lokaler JSON-Daten erforderlich sind. Was sind die Vorsichtsmaßnahmen für die Vue-Konfiguration zum Anfordern lokaler JSON-Daten? sehen.

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

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)

nach const portfinder =

require

('portfinder') hinzu und suchen Sie dann devServer. 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请求后调用
   })
  }

Zugriff anfordern

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Aufbau des Koa-Projekts

JS-Implementierung der Schnittstelle zum Drucken von Textschriften

Das obige ist der detaillierte Inhalt vonWelche Schritte sind erforderlich, um Vue für die Anforderung lokaler JSON-Daten zu konfigurieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!