왜 할까

Rails에서 만든 포모도로 ToDo 앱의 ToDo 작업을 Ajax에서 구현하고 싶습니다.
JS와 Rails를 연결한다..??에는, Rails의 태스크를 JSON 형식으로 출력할 필요가 있는 것 같다. (조금 아직 여기 잘 모르겠어)
jbuilder를 사용하면 쉽게 JSON 형식의 데이터를 출력 할 수 있습니다.

절차

우선 rails 앱의 신규 작성

rails new myapp

이동하여 데이터베이스 만들기

cd myapp && rails db:create

작업 모델 만들기

rails g model Task name:string is_done:boolean

마이 그레이트

rails db:migrate

콘솔에서 데이터를 넣습니다.

 rails c

> Task.new(name: "タスクのテストです。JSONで飛ばせるかな")
> task1.save
> exit #で抜ける

컨트롤러 작성

rails g controller tasks index

vim에서 라우팅을 다음과 같이 편집하고 컨트롤러와 뷰를 연결

config/routes.rb

  1 Rails.application.routes.draw do
  2   root 'tasks#index'

  3   # For details on the DSL available within this file, see https://guides.ru    byonrails.org/routing.html
  4 end

index.html.erb가 이미 있지만 다음 명령으로 json.jbuilder를 만들고 엽니 다.

app/views/tasks/index.json.jbuilder

  1 json.array! @tasks, :name, :id, :created_at

app/controller/tasks_controller.rb

  1 class TasksController < ApplicationController
  2   def index
  3     @tasks = Task.all
  4     render :index, formats: :json, handlers: 'jbuilder'
  5   end
  6 end

rails s -p 3333 로 localhost:3000에 연결하면...

표시되었습니다!



curl 명령에서도 볼 수 있는 것 같다.

curl localhost:3333
[{"name":"タスクのテストです。JSONで飛ばせるかな","id":1,"created_at":"2021-05-18T03:20:27.370Z"}]%

참고 기사

이번 기사는 거의 이하의 순서를 답습하고 있습니다. 하지만, 일부 db:migrate가 빠져 있거나, Rails6에 대응하고 있지 않는 쓰는 방법이기도 했으므로, 수정해 Qiita에 정리해 보았습니다.

jbuilder의 기술 방법에 대해 알기 쉬운 기사↓
· 【Rails】Jbuilder의 메소드에 대해 조사해 보았다