Exemple de code pour obtenir des données de base de données avec vue.js

Cet article présente principalement l'exemple de code vue.js pour obtenir des données de base de données. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour jeter un œil

vue.js obtient dynamiquement les données de la base de données

(environnement construit via vue.cli et webpack)

1. va créer un fichier static data.json et créer un dossier json sous static (dans un environnement webpack, les fichiers statiques sont placés dans le répertoire statique)

{
  "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. Vous devez utiliser vue-resource ici, et install dans notre projet :

nam install vue-ressource --save-dev

2. dans 🎜>main.js références vie-resource

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

3. Le code est écrit sous le composant Home.vue :

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);
        })
      }
    }
  }

De cette façon, vous pouvez utiliser vue.js pour obtenir les données json obtenues en arrière-plan.

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!