Rails 어플리케이션에 새로운 투고 기능 설치

11593 단어 초보자Rails

일람 화면에 새 로그인 링크 추가


일람 화면 (index.html.slim) 에서 새 투고 화면에 설정된 링크입니다.
만약 당신이 Bootstrap에 css 클래스를 주면, 링크를 단추처럼 보일 것입니다.
index.html.slim
h1 タスク一覧

= link_to '新規登録', new_posts_patch, class: btn btn-primary
Slim 템플릿에서 = 로 시작하는 행은 Ruby 코드를 실행하고 내보냅니다.
link_to 방법은 a 원소를 출력하는 방법이다.
new_task_path는 URL 지원 방법입니다."/posts/new"URL 문자열을 가져옵니다.

모델 번역 정보 추가


투고표를 작성하기 전에 포스트 모델의 번역 정보를 config/locales/ja로 준비합니다.yml에 추가합니다.
config/locales/ja.yml
ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
    models:
      post:投稿
    attributes:
      post:
      id: ID
      content: 投稿内容
      created_at: 登録日時
      updated_at: 更新日時

새 등록 화면 설치 작업


app/controllers/posts_controller.rb의 new 동작에서 새로운 투고 화면을 표시하는 데 필요한 준비를 합니다.
새 포스트 객체를 생성하여 인스턴스 변수@post에 대입합니다.
app/config/posts_controller.rb
  def new
    @post = Post.new
  end
동작에서 보기까지의 데이터를 실례 변수에 넣는 것은 동작의 작용 중의 하나이다.

새 투고 화면의 미리보기를 설치합니다.


new 동작에 대응하는 파일은 app/views/posts/new입니다.html.슬림입니다.
@post,form_with 방법으로 게시물 양식을 표시합니다.
투고를 포기하고 일람표에 들어갈 수 있도록 일람표의 링크도 추가했다.
app/views/posts/new.html.slim
#一覧画面に新規登録リンクを追加する
一覧画面(index.html.slim)に新規投稿画面へのリンクを設置します。
Bootstrap用にcssクラスを与えると、リンクをボタンのような外見にしてくれます。

```ruby:index.html.slim
h1 タスク一覧

= link_to '新規登録', new_posts_patch, class: btn btn-primary
Slim 템플릿에서 = 로 시작하는 행은 Ruby 코드를 실행하고 내보냅니다.
link_to 방법은 a 원소를 출력하는 방법이다.
new_task_path는 URL 지원 방법입니다."/posts/new"URL 문자열을 가져옵니다.

모델 번역 정보 추가


투고표를 작성하기 전에 포스트 모델의 번역 정보를 config/locales/ja로 준비합니다.yml에 추가합니다.
config/locales/ja.yml
ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
    models:
      post:投稿
    attributes:
      post:
      id: ID
      content: 投稿内容
      created_at: 登録日時
      updated_at: 更新日時

새 등록 화면 설치 작업


app/controllers/posts_controller.rb의 new 동작에서 새로운 투고 화면을 표시하는 데 필요한 준비를 합니다.
새 포스트 객체를 생성하여 인스턴스 변수@post에 대입합니다.
app/config/posts_controller.rb
  def new
    @post = Post.new
  end
동작에서 보기까지의 데이터를 실례 변수에 넣는 것은 동작의 작용 중의 하나이다.

새 투고 화면의 미리보기를 설치합니다.


new 동작에 대응하는 파일은 app/views/posts/new입니다.html.슬림입니다.
@post,form_with 방법으로 게시물 양식을 표시합니다.
투고를 포기하고 일람표에 들어갈 수 있도록 일람표의 링크도 추가했다.
app/views/posts/new.html.slim
h1 つぶやきの新規投稿

.nav.justify-content-end
  = link_to '一覧', posts_path, class: 'nav-link'

= form_with model: @post, local: true do |f|
  .form-group
    = f.label :投稿内容
    = f.text_area :content, rows:5, class: 'form-control', id: 'post_name'
  = f.submit nil, class: 'btn btn-primary'
form_with 블록의 마지막에 나는submit 조수를 부르고 있다.
여기에 표시된 용어 "등록"은 정보를 번역하는 helpers에 정의되어 있기 때문에 Rails는 @post 상태에 따라 자동으로 판단할 것 같습니다.
그래서 투고로 바꿨어요.
이렇게 하면'일람'과'새로운 투고 화면'을 만들 수 있습니다!

게시글 작업 구현


현재 "게시물"동작에 데이터를 보낼 수 있지만 아직 쓰기 처리되지 않았습니다.
게시물 작업은 app/controllers/posts_controller.rb에서create 동작으로 씁니다.
"투고 양식에서 전송된 데이터를 DB에 저장하여 일람 화면으로 이동"으로 처리합니다.
app/controllers/posts_controller.rb
  def create
    post = Post.new(post_params)
    post.save!
    redirect_to posts_url, notice: "「#{post.content}」を投稿しました。"
  end

  private

  def post_params
    params.require(:post).permit(:content)
  end
end
파일 뒤에 있는 개인 방법의post_안전상의 이유로params 방법을 추가했습니다.
Strong Parameters라고 불리며 원하지 않는 데이터를 전송하는 것을 방지합니다.
보안화된post 매개 변수를post_로 설정params 방법으로 Post 대상을 검색하고 사용합니다.
다음, 이save!DB에 저장, redirect_to 방법으로 일람 화면으로 이동합니다.
redirect_Flash 메시지를 to 메서드에 전달할 수 있습니다.Flash는 방향을 바꿀 때 다음 요청에 대해 약간의 데이터를 전달하는 구조입니다.
Flash는 산열로 데이터를 전달할 수 있습니다.
Flash 메시지가 화면에 표시되어야 하므로 공통 레이아웃에 코드를 추가합니다.
nil이나 공백이 아닌 notice의 플래시 메시지가 나타나면
app/views/layouts/application.html.slim
    .container
      - if flash.notice.present?
        .alert.alert-success= flash.notice
투고해 보세요.투고를 입력하고 "새 투고"버튼을 누르면...

일람 화면으로 리디렉션되고 Flash도 표시됩니다!
브라우저를 업데이트한 후 Flash가 사라져서 DB에 등록하고 Flash가 잘 나오는 것 같습니다.

참고 자료


현장에서 사용하는 Ruby on Rails5 속습 실습 가이드

좋은 웹페이지 즐겨찾기