vue サーバーからデータを取得して表示する

#vue #api

前提条件

バックエンドはRails
自作のAPIサーバーからデータを取る
vue_cliで作成
パッケージ管理はnpm

一次情報

手順

axiosインストール
export default {}内にサーバーとやり取りするコードを記述
Rails側設定

axiosインストール(HTTP通信ができるようになる)

pakage.jsonがあるディレクリに移動後下記のコマンド実行

$ npm install axios --save

サーバーとやり取りするコードを記述

コンポーネントmethods内にaxiosのコード追記

-----------
  template
-----------

<script>
  import axios from [インストール先パス];

  export default {
  name: 'test',
  data: {
    test: []
  },
  methods{
    // メソッドreadが発火したら取りにいくという想定
    read(){
      axios
      .get('https://取得したいサーバドメイン名')
      .then((response) {

        // responseが実際に取得するデータ
        console.log(response);

        // responseの中のdata属性に取得したいデータが格納されている.
        // thisはvuecomponentオブジェクト 配列であるtestに格納している.
        // 取得するデータがJSONだとdataでいいっぽい APIそんな触らないから他のパターンもあるかも
        this.test = response.data;
      })
      .catch((error) {
        // handle error
        console.log(error);
      })
    },
  }
  };
</script>

長々と書いたが、実際に気にするのはどこから取得するかと、取得したデータの格納先今回記述したコードはaxiosのサンプルコードとほぼ同じ.サンプルコードを下記に示す.

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Rails側設定

CORS対策でRails側の設定が必要

gem 'rack-cors'

config/initializers/cors.rbコメントアウトを有効に

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://データを贈りたいパス'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end