RAILS 101 迷你课程 V2.0 --- 第一讲环境准备

目标


1.完成基础环境的安装。
2.为第二讲的学习做好准备工作。

一 基础建设


0.

mkdir rails101

cd rails101

rails new rails101-1

cd rails101-1
git init
git add .
git commit -m "Initail Commit"

1.Bootstrap

1)

Gemfile

gem 'bootstrap-sass'


bundle install

2)

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/applicatio.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";


2.Devise

1)

Gemfile

gem 'devise'


rails g devise:install

rails g devise user

rake db:migrate

2)

mkdir app/views/common

touch app/views/common/_navbar.html.erb

touch app/views/common/_footer.html.erb

app/views/layouts/application.html.erb

<body>
  <div class="container-fluid">
    <%= render "common/navbar" %>
    <%= yield %>
  </div>
  <%= render "common/footer"%>
</body>


3)

app/views/common/_navbar.html.erb

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Rails 101</a>
        </div>
​
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                  <% if !current_user %>
                   <li><%= link_to("注册", new_user_registration_path) %> </li>
                   <li><%= link_to("登录", new_user_session_path) %></li>
                 <% else %>
                   <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                         Hi!, <%= current_user.email %>
                         <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li> <%= link_to("退出", destroy_user_session_path, method: :delete) %> </li>
                    </ul>
                  </li>
                <% end %>
            </ul>
        </div>
    </div>
</nav>


app/views/common/_footer.html.erb

<footer class="container" style="margin-top: 100px;">
    <p class="text-center">Copyright ©2017 Rails101
        <br>Design by
        <a href="http://courses.growthschool.com/courses/rails-101/" target=_new>xdite</a>
    </p>
</footer>




4)app/assets/javascripts/application.js

+ //= require bootstrap/dropdown
//= require_tree .




3.Simple_form

Gemfile

gem 'simple_form'


rails g simple_form:install --bootstrap

! control + c 停止。 rails s重启

4.测试

rails g controller welcome

touch app/views/welcome/index.html.erb

config/routes.rb

root 'welcome#index'


5.flash

1)Step 1. 将 Bootstrap 的 js 提示套件 bootstrap/alert “挂”进专案里面

app/assets/javascripts/application.js

... (一堆注解)
//= require jquery
//= require jquery_ujs
//= require turbolinks
+//= require bootstrap/alert
//= require_tree .


2)新增 app/views/common/flashes.html.erb

touch app/views/common/_flashes.html.erb

`app/views/common/
flashes.html.erb`

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>


3)加入 app/helpers/flashes_helper.rb

touch app/helpers/flashes_helper.rb

app/helpers/flashes_helper.rb

module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze
​
  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end
​
  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning" 
  end
end


4)在 application.html.erb 内加入 flash 这个 partial

app/views/layouts/application.html.erb

  <%= render "common/flashes" %>
  <%= yield %>


5)git 存档

git add .
git commit -m "add bootstrap flash function"


6)测试 flash helper 的功能

app/controllers/welcome_controller.rb

class WelcomeController < ApplicationController
  def index
    flash[:notice] = "早安!你好!"
  end
end



6.font-awesome

1)

Gemfile

gem 'font-awesome-rails'


bundle install
! control + c 停止。 rails s重启

2)

app/assets/stylesheets/application.scss

+ *= require font-awesome
 *= require_tree .
 *= require_self

Comments

comments powered by Disqus