Code sharing on how vue.js obtains database data

This article mainly introduces the vue.js example code for obtaining database data. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look

vue.js dynamically obtains database data

(Environment built through vue.cli and webpack)

1. First of all, let me Create a static data.json file and create a json folder under static (in a webpack environment, static files are placed in the static directory)

{
  "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. You need to use vue-resource here, install in our project:

nam install vue-ressource --save-dev

2. In main# Reference in ##.jsvie-resource

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

3. The code is written under the Home.vue component:

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

So we can use vue.js to get it The data obtained from the background is json data.

The above is the detailed content of Code sharing on how vue.js obtains database data. For more information, please follow other related articles on the PHP Chinese website!