vue.js でデータベースのデータを取得するサンプルコード

この記事では、vue.jsでデータベースのデータを取得するサンプルコードを中心に紹介します。エディターに従って見てみましょう

vue.js はデータベース データを動的に取得します

(vue.cli と webpack によって構築された環境)

1. まず、

staticdata.json ファイルを作成します。 static の下の json フォルダー (Webpack 環境では、静的ファイルは static ディレクトリに配置されます)

{
  "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. プロジェクトにインストールされている vue-

resource を使用する必要があります:

nam install vue-ressource --save-dev

2. vie-resource

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

in

main.js3. コードは 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);
        })
      }
    }
  }

このようにして、vue.js を使用してバックグラウンド Data から取得したデータ json を取得できます。

以上がvue.js でデータベースのデータを取得するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。