Code-Sharing darüber, wie vue.js Datenbankdaten erhält

Dieser Artikel stellt hauptsächlich den vue.js-Beispielcode zum Abrufen von Datenbankdaten vor. Jetzt werde ich ihn mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

vue.js ruft dynamisch Datenbankdaten ab

(Umgebung erstellt über vue.cli und Webpack)

1 erstellt eine statische data.json-Datei und erstellt einen JSON-Ordner unter statisch (in einer Webpack-Umgebung werden statische Dateien im statischen Verzeichnis abgelegt)

{
  "data":[
    {"id":1,"name": "yidong", "age": "11" },
    {"id":2,"name": "yidong2", "age": "12" },
    {"id":3,"name": "yidong3", "age": "13" },
    {"id":4,"name": "yidong4", "age": "14" },
    {"id":5,"name": "yidong5", "age": "15" },
    {"id":6,"name": "yidong6", "age": "16" },
    {"id":7,"name": "yidong7", "age": "17" }
  ]
}

1. Sie müssen vue-resource hier verwenden und installieren in unserem Projekt:

nam install vue-ressource --save-dev

2 🎜> in 🎜>main.js-Referenzen vie-resource

3. Der Code wird unter der Home.vue-Komponente geschrieben:

import VueResource from 'vue-resource';
Vue.use(VueResource)

This So können wir vue.js verwenden, um die aus dem Hintergrund erhaltenen JSON-Daten abzurufen.

export default{
    data(){
      return {        
        user:null,
      }
    },
    created () {
      this.fetchData()
    },
    watch:{
      '$route':'fetchData'
    },
    methods:{
      fetchData(){              this.$http.get('./../../static/json/data.json').then((response)=>{  
          console.log(response.data.data);
        })
      }
    }
  }

Das obige ist der detaillierte Inhalt vonCode-Sharing darüber, wie vue.js Datenbankdaten erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!