혼잣말 앱을 만들어 보도록 하겠습니다.

10862 단어 Rails
우선 혼잣말 표시 기능을 만든다.

일단 모델부터 하자.


트윗 모델을 생성합니다.
cd tsubuyaki

rails g model tweet

우리 데이터베이스를 하나 만듭시다.

rails db:create

마이그레이션 파일 편집

class CreateTweets < ActiveRecord::Migration[6.0]
  def change
    create_table :tweets do |t|
      t.string :name
      t.string :text
      t.timestamps
    end
  end
end

이전을 실행합시다.

rails db:migrate

라우팅 설정


트윗 컨트롤러의 인덱스 작업을 수행하기 위한 루트를 설정합니다.
index 작업은 "보기"데이터에 사용되며, 그 외에 다양한 종류의 처리도 있습니다.
요약 데이터 처리의 기본 처리를 CRUD라고 합니다.

CRUD


데이터 처리에 관하여 기본 처리의 이니셜을 배열하였다
C(Create)
R(Read)
U(Update)
D(Delete)
생성
읽기
업데이트
삭제
CRUD를 구현하려면 각 처리에 대해 설명해야 합니다.
Rails는 이러한 동작을 습관적으로 설정합니다.
작업 이름
컨텐트
index
훑어보다
show
세부 정보 보기
new
생성
create
보존
edit
편집하다
update
업데이트
destroy
삭제
이 일곱 가지 동작의 경로를 리소스 방법으로 한꺼번에 설정할 수 있습니다.

자원 방법


resources는 자동으로 7개의 동작을 생성하는 방법이다.
리소스 매개 변수에 기호를 지정합니다. 트위터는 해당하는 루트를 생성합니다.
Rails.application.routes.draw do
  resources :tweets
end

터미널에서 라우팅을 검사할 때 작업의 라우팅이 설정됩니다.

고유 옵션


리소스에 읽기 전용 옵션을 추가하면 지정한 작업의 루트만 설정합니다.
Rails.application.routes.draw do
  resources :tweets, only: :index
end

컨트롤러와 보기를 만듭니다.

rails g controller tweets index #tweetsコントローラーindexアクションとそれに対応するビューを作成
all 방법으로 모든 정보를 얻을 수 있도록 컨트롤러에 기술하세요.
  def index
    @tweets = Tweet.all
  end
뷰 파일에 다음 설명을 추가합니다.
<div class="contents row">
  <% @tweets.each do |tweet| %>
    <div class="content_post" >
      <p><%= tweet.text %></p>
      <span class="name">
        <%= tweet.name %>
      </span>
    </div>
  <% end %>
</div>

레이아웃 템플릿


머리글과 꼬리 등 공통된 부분을 모아 레이아웃 템플릿이라고 합니다.
Rails에서 애플리케이션입니다.html.erb 파일.
이것은 app/views/layouts 디렉터리에 있습니다.

방법


레이아웃 템플릿에서 각 템플릿 파일을 확장하는 방법입니다.
yield를 설명하면 컨트롤러에 대응하는 보기가 yield 설명 부분으로 전개됩니다.
app/views/layouts/application.html.erb
#途中省略
<body>
    <header class="header">
      <div class="header__bar row">
        <h1 class="grid-6"><a href="/">Tsubuyaki</a></h1>
        <div class="user_nav grid-6">
          <a class="post" href="/tweets/new">投稿する</a>
        </div>
      </div>
    </header>
    <%= yield %>
    <footer>
      <p>
        Copyright Tsubuyaki 2021.
      </p>
    </footer>
  </body>
</html>

CSS 파일을 입력합니다.


app/assets/stylesheets/중스타일.css라는 파일을 만들고 다음 내용을 기입하십시오.
.btn,
header.header div.header__bar.row div.grid-6 a.post {
  padding: 8px 20px;
  font-size: 14px;
  border: 2px solid #57C3E9;
  color: #57C3E9;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
  display: inline-block;
}

.btn:hover,
header.header div.header__bar.row div.grid-6 a.post:hover {
  border-color: #9bdbf2;
  color: #9bdbf2;
}

footer {
  margin: 30px auto;
  padding: 10px;
  color: #D8D8D8;
  text-align: center;
}

header {
  margin: 30px auto;
  padding: 10px;
  color: #D8D8D8;
  text-align: center;
}

.content_post {
  text-align: center;
}
rails c 명령을 사용하여 콘솔에 데이터 입력
[1] pry(main)> Tweet.create(name: "taro", text: "おはようございます")
루트 경로를 설정합니다.
config/routes.rb
Rails.application.routes.draw do
  root to: 'tweets#index'
  get 'tweets/index'
  resources :tweets
end
서버 시작
방문합시다http://localhost:3000.
다음 화면이면 성공이야.

여기서 마치겠습니다.
styled-component + react-transition-group = 매우 간단한 전환
VB로 다른 애플리케이션 닫기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage