RAILS 101 第二讲 GROUP CRUD

RAILS 101 第二讲 GROUP CRUD(2h)

目标

1.了解如何建立一个含有CRUD 的GROUP。
2.通过反复练习,能够熟记GROUP 的CRUD

一 基础建设

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

3)

二 建立 GROUP(使用者可以创建组群)

1.建立MODEL

1)

rails g model group title:string description:text user_id:integer

rake db:migrate

2)

app/models/user.rb

has_many :groups

3)

app/models/group.rb

belongs_to :user

2.建立CONTROLLER

rails g controller groups

3.建立ROUTES

config/routes

resources :groups
root 'groups#index'

4.使用者可以创建话题。

1)

app/controllers/groups_controller.rb

before_action :authenticate_user!
def new 
 @group = Group.new
end 
def create 
  @group = Group.new(group_params)
  @group.user = current_user 
  if @group.save
   redirect_to groups_path 
  else 
   render :new 
  end
end 
private
def group_params 
 params.require(:group).permit(:title, :description)
end 

app/models/group.rb

validates :title, presence: true 

2)

touch app/views/groups/new.html.erb

app/views/groups/new.html.erb

<div class="col-md-4 col-md-offset-4">
  <h2>Create A Group </h2>
  <hr>
  <%= simple_form_for @group do |f| %>
    <%= f.input :title %>
    <%= f.input :description %>
    <%= f.submit "Submit", class: "btn btn-sm btn-primary" %>
  <% end %>
</div>

3)

在网址中输入:http://localhost:3000/groups/new

可以看到:

5.使用者可以在首页看到创建的话题。

1)

app/controllers/groups_controller.rb

def index 
 @groups = Group.all
end 

2)

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

<div class="col-md-12">
  <div class="group">
    <%= link_to("New Group", new_group_path, class: "btn btn-sm btn-primary") %>
  </div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Creator</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
       <% @groups.each do |group| %>
         <tr>
           <td><%= link_to(group.title, group_path(group))%></td>
           <td><%= group.description %></td>
           <td><%= group.user.email %></td>
           <td>
               <%= link_to edit_group_path(group), class: "btn btn-sm btn-default" do %>
                 <i class="fa fa-pencil">Edit</i>
               <% end %>
               <%= link_to("Delete", group_path(group), method: :delete, class: "btn btn-xs btn-default", data: {confirm: "Are you sure? "}) %>
           </td>         
         </tr>
       <% end %>
    </tbody>
  </table>
</div>

3) 在网址中输入:http://localhost:3000/groups

 可以看到:

6.使用者可以修改话题。

1)

app/controllers/groups_controller.rb

def edit  
  @group = Group.find(params[:id])
end 
def update 
  @group = Group.find(params[:id])
  if @group.update(group_params)
   redirect_to groups_path 
  else 
   render :edit 
  end 
end 

2)

touch app/views/groups/edit.html.erb

app/views/groups/edit.html.erb

<div class="col-md-4 col-md-offset-4">
  <h2>Create A Group </h2>
  <hr>
  <%= simple_form_for @group do |f| %>
    <%= f.input :title %>
    <%= f.input :description %>
    <%= f.submit "Submit", class: "btn btn-sm btn-primary" %>
  <% end %>
</div>

3)

7.使用者可以查看话题。

1)

app/controllers/groups_controller.rb

def show 
  @group = Group.find(params[:id])
end 

2)

touch app/views/groups/show.html.erb

app/views/groups/show.html.erb

<div class="col-md-12">
  <div class="group">
    <%= link_to("Edit", edit_group_path(@group), class: "btn btn-sm btn-primary pull-right")%>
  </div>
  <h2><%= @group.title %></h2>
  <p><%= @group.description %></p>
</div>

3)

8.使用者可以删除话题。

1)

app/controllers/groups_controller.rb

def destroy 
  @group = Group.find(params[:id])
  @group.destroy 
  redirect_to groups_path
end 

2)

9.遇到的错误。

1)报错,说title 是 no method

 仔细检查和title 有关的一切内容后发现:

validates :title, presence: true粘贴到了user.rb里了。

!应该把 validates :title, presence: true粘贴到group.rb

三 课后作业

1.复制粘贴教程中的代码。 (30MIN)

1)目的一:确保代码是正确的 & 了解代码产生的效果。

2)目的二: 用笔记本记录自己不清楚的代码。

2.与我ZOOM,一起讨论不清楚的代码。(15MIN)

3.写ORID,总结此次练习的收获,感悟,低峰,以及下一步行动(下一步行动中需包含此次课后作业第四个作业(5MIN)。

4.自己反复练习”第二部分建立 GROUP(使用者可以创建组群)“中的代码”,直至能够在不看代码的情况下,自己默写出代码。

写在最后

我们之所以没有进步,或者进步缓慢,就是因为我们对自己要求太低了。 将GROUP CRUD 的代码记住后,我相信,再去练习教程时,你会发现,自己居然突然懂了很多。加油吧!

Comments

comments powered by Disqus