Ruby on Rails로 어플리케이션을 만들어 보세요.

6593 단어 Rails

투고 기능을 만들어보도록 하겠습니다.


투고 기능은 두 단계로 나누어 해설한다.
좀 어렵지만 힘내세요.
우선 투고화면(new)을 만들어 처리합시다.
그림 1 마이그레이션 그림

일단 루트를 설정할게요.


new 동작의 목적지를 지정합니다.
config/routes.rb
Rails.application.routes.draw do
  get 'posts', to: 'posts#index'
  get 'posts/new', to: 'posts#new' #newアクションのルーティング設定
end
rails routes 명령 실행 루트 확인

new 작업의 경로가 설정되었습니다.
다음은 컨트롤러의 조작을 정의합니다.
페이지만 표시하기 때문에 내용이 필요 없습니다.
app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

  def new  #newアクションを定義
  end
end
다음은 보기 파일을 만듭니다.

보조 방법


Rails는 양식을 작성할 때 보조 방법을 사용하여 작성합니다.
주로 뷰에 HTML 태그를 표시하거나 텍스트를 가공하는 데 사용되는 여러 가지 방법입니다.
보조 방법을 사용하는 장점은 주로 다음과 같은 두 가지가 있다.
① 경로의 지정과 루비의 삽입 등에 대한 설명이 간단해졌다
② 보안 문제를 해결하기 위해
이번에 사용한 두 가지 방법을 소개하겠습니다.
보조 방법
용도
form_with
구현 양식
link_to
링크 구현

form_방법


폼을 실현하는 보조 방법에서 HTML의form 태그를 대체할 수 있습니다.
<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <%= form.text_field :comment %>
  <%= form.submit '投稿する' %>
<% end %>
form_with~do의 기술은 옵션이라고 불리며 설정이 적혀 있습니다.
옵션 이름
설명
url
정보 전달 경로 지정
method
요청한 HTTP 방법을 지정합니다(초기 값은 post이므로 post 시 생략가능).
local
원격 전송을 비활성화할지 여부를 지정합니다.실제 값으로 비활성화
do~end의 기술은 보기 파일에 표시된 것을 나타낸다
기술에 따라 부품을 추가할 수 있습니다.
창 위젯
용도
text_field
단일 행 텍스트 상자
password_field
암호 입력 상자(텍스트를 * 등으로 대체)
check_box
확인란 (선택 사항)
radio_button
라디오 버튼(여러 버튼 중 하나만 선택)
submit
보내기 버튼
이 중에서submit을 제외하고 매개 변수는name 속성에 해당하는 이름을 포함합니다.
name 속성의 값은 데이터를 처리할 때의 키입니다.
편집기를 엽니다. app/views/posts 디렉터리에 new입니다.html.eb 파일을 만드세요.
다음 코드를 붙여넣으십시오.
app/views/posts/new.html.erb
<h1>新規投稿ページ</h1>
<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <%= form.text_field :comment %>
  <%= form.submit '投稿する' %>
<% end %>

다음으로, 우리는 첫 페이지에서 투고 페이지에 접근하는 처리를 만들 것이다

link_방법


링크를 만드는 보조 방법에서 HTML의 a 태그를 대체할 수 있습니다.
<%= link_to 'リンクに表示する文字', 'パス', method: :HTTPメソッド %>

링크에 표시된 텍스트는 이번에 새 투고입니다.
이번에 표시하고 싶은 것은 new 화면입니다.post#new 옆에 있는/posts/new 경로를 입력하십시오.
그리고 HTTP 방법은 Verb의 get이 됩니다.
<%= link_to '新規投稿', '/posts/new', method: :GET %>
이 코드는 첫 페이지의 보기 app/views/posts/index입니다.html.eb에 기입하세요.

그리고 http://localhost:3000/posts방문

새 투고 링크를 클릭하면 다음 페이지로 넘어갑니다.

다음에 데이터 저장 처리합시다.

좋은 웹페이지 즐겨찾기