ror突进-p8

源问题

回天津后,发现rails new 项目失败,卡在了bundle install
查到https://ruby.taobao.org/
中,发现除了gem本身需要更改源意外
gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
bundle也需要配置淘宝的源
bundle config mirror.https://rubygems.org https://ruby.taobao.org

git checkout -b

切换分支,每个章节切换一次分支,使用checkout,可以保证任意时刻可以随便切换代码状态

添加bootstrap模块

添加与更新模块操作

  • 修改gemfile,添加 gem 'bootstrap-sass’,在生产执行函数之前
  • 修改完成后,使用bundle install应用更新

替换css为scss

目前还不知道有什么作用
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

套用bootstrap样式

  • 新建文件夹 mkdir app/views/common
  • 增加页头 touch app/views/common/_navbar.html.erb

    <nav class="navbar navbar-default" role="navigation"
    <div class="container-fluid"
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header"
            <a class="navbar-brand" href="/"Rails 101</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
            <ul class="nav navbar-nav navbar-right"
                <li>
                    <%= link_to("登入", '#') %>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
    </nav>
    
  • 增加页尾 touch app/views/common/_footer.html.erb

    <footer class="container" style="margin-top: 100px;"
    <p class="text-center"Copyright ©2016 Rails101
        <br>Design by
        <a href="http://courses.growthschool.com/courses/rails-101/" target=_newxdite</a>
    </p>
    </footer>
    
  • 修改全域样式 app/views/layouts/application.html.erb

    <!DOCTYPE html>
    <html>
    <head>
        <title>Rails101</title>
        <%= csrf_meta_tags %>
    
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>
    
    <body>
    
        <div class="container-fluid"
            <%= render "common/navbar" %>
            <%= yield %>
        </div>
    
        <%= render "common/footer" %>
    
    </body>
    </html>
    

    新增一个空页面

  • 添加一个controller rails g controller welcome

  • 添加一个空页面 touch app/views/welcome/index.html.erb

  • 添加一个路由条目,修改 config/routes.rb

    Rails.application.routes.draw do
    root 'welcome#index'
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    end
    

    添加一行提示信息

    修改 app/assets/javascripts/application.js
    在 requre_tree 上加入 //= require bootstrap/alert

    //= require turbolinks
    +//= require bootstrap/alert
    //= require_tree .
    

    添加flash页面

    touch 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 %>
    

    touch 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



    将 <%= render "common/flashes" %> 加入 app/views/layout/application.html.erb

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

    修改 app/controllers/welcome_controller.rb,加入 flash[:notice] = "早安!你好!"

    最后提交