rails로 앱을 만들 때의 노트2

7767 단어 Rails

rails generate


여러 가지 마법 주문을 외우고 있어요.
$ rails generate controller home top

라우팅 정보


routes.rb에 코드를 추가했습니다.
/config/routes.rb
Rails.application.routes.draw do
  get 'home/top' # 追加されている
end
이로부터 $ rails s하면
액세스 가능http://localhost:3000/home/top

뷰 정보


새 파일이 생성되었습니다.
/app/views/home/top.html.erb
<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>
이 화면은 방금 http://localhost:3000/home/top에 액세스했을 때 표시됩니다.

컨트롤러 정보


새 파일이 생성되었습니다.
/app/controllers/home_controller.rb
class HomeController < ApplicationController
  def top
  end
end

라우팅 편집


/config/routes.rb
Rails.application.routes.draw do
  get 'top' => "home#top"  # 編集
end
접근 http://localhost:3000/top 후 홈 컨트롤러의 top 방법을 호출합니다.

소개 페이지 만들기


라우팅 추가


/config/routes.rb
Rails.application.routes.draw do
  get 'top' => "home#top"  
  get "about" => "home#about" # 追加
end

컨트롤러 추가


/app/controllers/home_controller.rb
class HomeController < ApplicationController
  def top
  end
  def about
  end
end

뷰 생성하기


자동으로 생성되지 않았기 때문에, 스스로 새 파일을 만듭니다.
app/views/home/about.html.erb
<div class="about-main">
  <h2>MyFormAppとは</h2>
  <p>
    フォームを新しく作成するアプリケーションです。
  </p>
</div>

공통 포트 생성


머리글 같은 공통 부분을 만듭니다.
/app/views/layouts/application.html.erb
<!-- 追加 -->
  <header>
    <div class="header-logo">
      <a href="/top">MyFormApp</a>
    </div>
    <ul class="header-menus">
      <li>
        <a href="/about">MyFormAppとは</a>
      </li>
    </ul>
  </header>
첫 페이지

소개 페이지

동일한 컨텐트가 표시됩니다.

CSS


CSS 파일은 자동으로 생성됩니다.
/app/assets/stylesheets/home.scss
ul, li {
  list-style-type: none;
}
body {
  background-color: #3ecdc6;
}
.main {
 position: absolute;
 top: 64px;
}
header {
  height: 64px;
  position: absolute;
  width: 100%;
}
.header-logo {
  float: left;
  color: white;
}
//
.header-logo a{
  color: white;
}
//
.header-menus {
  float: right;
}
.header-menus a {
  color: white;
}

아무튼 여기까지.

좋은 웹페이지 즐겨찾기