So rufen Sie JSON in VueJS auf

So rufen Sie JSON in VueJS auf: 1. Platzieren Sie JSON im statischen Ordner. 2. Erstellen Sie das Objekt. 3. Geben Sie die Adresse mit der Axios-Methode ein.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie passt man JSON in VueJS an?

So verwenden Sie VUE zum Aufrufen von lokalem JSON:

Am Anfang dachte ich, wie mühsam es wäre, Vue zum Aufrufen von JSON zu verwenden. Dann ging ich zuerst zu Baidu und fand ein paar Beim oben genannten Konfigurieren dieser und jener Konfiguration wird mir schwindlig. Jemand mit klarem Denken und Logik wird diese Situation definitiv nicht haben.

Ich werde unten über meine Situation sprechen, und Sie können sie entsprechend der Situation ersetzen.

Wenn Sie gerade erst mit der Erstellung von Vue beginnen, müssen Sie natürlich Dinge konfigurieren. Worüber ich unten sprechen werde, ist die Situation, in der Ihr Projekt dies kann Ich werde es beenden. Natürlich verwende ich hier auch die Axios-Erfassungsmethode.

Zunächst müssen Sie wissen, welche Ordner, in dem Ihr JSON abgelegt werden soll (normale Referenz). Was Sie schreiben möchten, hat seine eigenen Regeln und Sie können es auf Ihre eigene Weise tun. Ich habe einige im Internet gesehen, die in verschiedenen Ordnern abgelegt sind. Es scheint, dass ich etwas konfigurieren muss, aber im Standardmodus ist es am besten, sie in Ihrem statischen Ordner abzulegen, wie oben gezeigt

Wenn es nicht in diesem Ordner abgelegt wird, wird möglicherweise ein Fehler gemeldet!

JSON-Daten müssen gemäß den Spezifikationen geschrieben werden

rrree

Nachdem der JSON geschrieben wurde, muss er importiert werden. Da es sich um eine lokale Verbindung handelt, muss die Adresse http://localhost sein :8080/static/ceshi.json Solch ein Format

{
  "status":"0",
  "result":[
   {
     "productId":"10001",
     "productName":"小米6",
     "prodcutPrice":"2499",
     "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10002",
    "productName":"小米笔记本",
    "prodcutPrice":"3999",
    "prodcutImg":"note.jpg"
   },
   {
    "productId":"10003",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10004",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"1.jpg"
   },
   {
    "productId":"10001",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10002",
   "productName":"小米笔记本",
   "prodcutPrice":"3999",
   "prodcutImg":"note.jpg"
  },
  {
   "productId":"10003",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10004",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"1.jpg"
  }
  ] }

<script>
  import axios from &#39;axios&#39;
  export default{
    data(){
      return {
        res:"",//创建对象
             
      }
    },
    mounted () {
     this.getGoodsList()
    },
    methods: {
     getGoodsList () {
      this.$axios.get(&#39;http://localhost:8080/static/ceshi.json&#39;).then((res) => {
        //用axios的方法引入地址
        this.res=res
        //赋值
       console.log(res)
      })
     }
    }
  }
</script>

Empfohlen: „

Die neuesten 5 vue.js-Video-Tutorial-Auswahlen

“

Das obige ist der detaillierte Inhalt vonSo rufen Sie JSON in VueJS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!