Comment demander des données json locales dans la configuration de vue

Cette fois, je vais vous montrer comment demander des données json locales dans la configuration vue. Quelles sont les précautions pour que la configuration vue demande des données json locales. Voici un cas pratique, jetons un coup d'oeil.

Recherchez le fichier webpack.dev.conf.js dans le dossier build et ajoutez

après const portfinder =

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)

require

('portfinder') Recherchez ensuite devServer et insérez le code suivant :

 //然后找到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请求后调用
   })
  }

Demander l'accès à

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

Enfin redémarrer démarrer le projet pour accéder à npm run dev

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, s'il vous plaît faites attention à php pour des informations plus intéressantes. Autres articles connexes sur le site Web chinois !

Lecture recommandée :

Quelles sont les méthodes de requête Dataframe dans les pandas

Comment implémenter l'API de reconnaissance vocale Baidu dans python Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!