DEV Community

koki-takishita
koki-takishita

Posted on

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

#vue #api

前提条件

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

一次情報

手順

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

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

  • pakage.jsonがあるディレクリに移動後下記のコマンド実行 
$ npm install axios --save
Enter fullscreen mode Exit fullscreen mode

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

  • コンポーネント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>
Enter fullscreen mode Exit fullscreen mode
  • 長々と書いたが、実際に気にするのはどこから取得するかと、取得したデータの格納先 今回記述したコードは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 });
Enter fullscreen mode Exit fullscreen mode

Rails側設定

  • CORS対策でRails側の設定が必要 
gem 'rack-cors'
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

  • 変更するのはoriginsの指定のみ

  • Railsサーバーを再起動させて、データをこれで取得できるはず.

Top comments (0)