소개

Rails에서 DB에서 데이터를 읽고 Vue.js를 통해 브라우저로 출력하는 방법을 요약했습니다.

이번에는 users_controller의 index 액션에서 얻은 정보를 Vue.js에서 표시하는 방법을 예로 들어 보겠습니다.

환경

OS: macOS Catalina 10.15.1
Ruby: 2.6.5
Rails: 6.0.2.1
Vue: 2.6.10
vue-cli: 4.1.1
axios: 0.19.0

전제

name와 email의 2개의 컬럼을 가지는 User 모델을 Rails로 작성 완료로 하고, 그 정보를 Vue.js로 표로 해 표시하는 프로그램을 예로 합니다.

또한 axios는 설치되었습니다.
※설치 방법은 여기 공식 문서을 참조.

1.Rails 측

1-1. users_controller

새로운 디렉토리 작성 및 이동

일반: app/controllers/↓
변경 후: app/controllers/api/v1/※api/v1/ 는 신규 디렉토리 작성

클래스에 Api::V1:: 쓰기

app/controllers/api/v1/users_controller.rb

class Api::V1::UsersController < ApplicationController

색인 동작 정의 변경

app/controllers/api/v1/users_controller.rb

...略
  def index
    #Vue.js側で呼び出したいデータだけをselectで抜き出す
    users = User.select(:id, :name, :email)
    #JSON形式でusersを出力 
    render json: users
  end
...略
end

1-2.routes.rb

라우팅도 위와 같이 다시 작성합니다.
일반 Rails 앱과 달리 namespace로 묶어야 합니다.

routes.rb

Rails.application.routes.draw do
...略
  namespace :api, {format: 'json'} do
    namespace :v1 do
      resources :users, only: [:index]
    end
  end
end

이제 개발 환경이라면

localhost:3000/api/v1/users

방문하면,
users_controller의 index 액션

발동,

JSON 형식으로 User 모델의 id, name, email

출력 할 수있는 상태가되었습니다.
그리고는 이 데이터를 Vue.js측에서 픽업합니다.

2.Vue.js 측

UsersIndex.vue라는 단일 파일 구성 요소로 데이터를 표시하기로 결정합니다.

※단일 파일 컴포넌트를 어떻게 읽어 브라우저에 표시하는지에 대해서는 할애하겠습니다.

UsersIndex.vue

<template>
  <table>
    <tbody>
      <tr>
        <th>ID</th>
        <th>name</th>
        <th>email</th>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
// axiosを読み込む
import axios from 'axios';

export default {
  data() {
    return {
      //axiosで取得するデータを入れるため、空でOK
      users: []
    }
  },
  //mountedでVueインスタンスのDOM作成完了直後に読み込む
  mounted() {
    axios
      //GETリクエストでRailsで作成したjsonを取得する
      .get('/api/v1/users.json')
      //response.data は RailsのUser.select(:id, :name, :email)
      //これをdata()で定義したusersに代入する
      .then(response => (this.users = response.data))
  }
}

</script>

이제 JSON 형식이었던 User 모델의 id, name, email을 Vue.js를 통해 브라우저에 표시할 수 있습니다.

이상입니다!

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Ruby on Rails, Vue.js로 시작하는 현대 웹 애플리케이션 시작 - Qiita