Quelles étapes sont nécessaires pour configurer vue afin de demander des données json locales ?

Cette fois, je vais vous présenter les étapes nécessaires à la configuration de vue pour demander des données json locales. Quelles sont les précautions pour que la configuration de vue demande des données json locales. Ce qui suit est un cas pratique, prenons un. regarder.

Trouvez le fichier webpack.dev.conf.js dans le dossier build, 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') et trouvez-le devServer, 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请求后调用
   })
  }

Demande d'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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée des étapes de construction du projet Koa

Implémentation JS de l'interface d'impression de polices de texte

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!