2.2 开始
配置好基础，新建项目
rails new rails101
cd rails101
git init
git add .
git commit -m "git init"
2.3 套上 bootstrap
修改 Gemfile，在 group :development, :test do前一行加入 gem 'bootstrap-sass'
然后终端安装 bundle install
接着，将 Bootstrap 的 CSS 套件装进项目里面：
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
最后添加2个@魔法,并git 保存
# app/assets/stylesheets/application.scss
/*
* ...(一堆注解)
*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
2.4 套用 Bootstrap 的 html 样式 （以下内容无需记忆）
上一节只是“挂上”Bootstrap 使用的 CSS
这一节则是让全站的 HTML 架构，套用 Bootstrap 的制服
新增文件夹 mkdir app/views/common 新增touch app/views/common/_navbar.html.erb 填入
新增 touch app/views/common/_footer.html.erb
修改全域 HTML 样式 application.html.erb
# app/views/layouts/application.html.erb
Rails101
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= render "common/navbar" %>
<%= yield %>
<%= render "common/footer" %>
产生一个新的空 Hello World 页面 （放在 welcome#index)
- 新增一个
welcome controller
rails g controller welcome - 新增一个空的 HelloWorld 页面
touch app/views/welcome/index.html.erb
填入
Hello World!
将首页指到 welcome 下的 index.html.erb 页面
# config/routes.rb
Rails.application.routes.draw do
root 'welcome#index'
end
最后，我们先git保存，再 rails s ，就能看到最简单的hello world 最简web页面了
2-5 制作漂亮的“提示信息” （以下内容无需记忆）
- 将 Bootstrap 的 js 提示套件 bootstrap/alert “挂”进项目里面
在require_tree上加入//= require bootstrap/alert
# app/assets/javascripts/application.js
... (一堆注解)
//= require jquery
//= require jquery_ujs
//= require turbolinks
+//= require bootstrap/alert
//= require_tree .
- 新增
app/views/common/_flashes.html.erb
# app/views/common/_flashes.html.erb
<% if flash.any? %>
<% user_facing_flashes.each do |key, value| %>
<%= value %>
<% end %>
<% end %>
- 加入
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
- 在
application.html.erb内加入 flash 这个 partial
在<%= yield %>前加入<%= render "common/flashes" %>
# app/views/layouts/application.html.erb
<%= render "common/flashes" %>
<%= yield %>
- git 存档并测试
修改app/controllers/welcome_controller.rb。加入flash[:notice] = "早安！你好！"。你应该可以看到系统跳出“绿色”提示窗
# app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
def index
flash[:notice] = "早安！你好！" # alert 红色，warning 黄色
end
end
3-1 建立讨论群的架构
这一章，我们要带大家设计出一个讨论群“列表”。我们会完成以下事项：
讨论群要有“标题”与“叙述”
使用者要可以看到“讨论群一览表”
git checkout -b ch02切换新分支，代码出错还可以悔改设计 Group 的 model 架构
为了做到在讨论群要有“标题”与“叙述”，我们在这里要建立一个model Group，并建立数据表 group 的两个栏位 :
title(string 字串属性)
description(text 文字属性)
所以终端输入：rails g model group title:string description:text
将数据库建立起来，并执行rake db:migrate产生 groups controller
rails g controller groups建立 index action 以及 index 的 view
# 修改 app/controllers/groups_controller.rb
class GroupsController < ApplicationController
def index
@groups = Group.all
end
end
touch app/views/groups/index.html.erb
# app/views/groups/index.html.erb
<%= link_to("New group", new_group_path, class: "btn btn-primary pull-right") %>
#
Title
Description
<% @groups.each do |group| %>
#
<%= link_to(group.title, group_path(group)) %>
<%= group.description %>
<%= link_to("Edit", edit_group_path(group), class: "btn btn-sm btn-default")%>
<%= link_to("Delete", group_path(group), class: "btn btn-sm btn-default",
method: :delete, data: { confirm: "Are you sure?" } )%>
<% end %>
- 在 routing 上挂上 groups
在 root 'welcome#index' 前加上一行resources :groups
# config/routes.rb
Rails.application.routes.draw do
resources :groups
root 'welcome#index'
end
- 添加一些数据, 先终端
rails console，再输入
Group.create(title: "Board 1", description: "Board 1 body")
Group.create(title: "Board 2", description: "Board 2 body")
再重新打开 http://localhost:3000/groups 可以看到成果了，图略
- 最后记得 git
3-2 将首页换成讨论群一览表
- 修改 routing
# config/routes.rb
Rails.application.routes.draw do
resources :groups
+ root 'groups#index'
- root 'welcome#index'
end
然后你就可以在 http://localhost:3000/ 看到 Group 一览表了,最后一步，还是 git
4-1 手动实作讨论群的“新增”“修改”“删除”功能
实作看板的“新增” new / create
实作看板的“编辑” edit / update
实作看板的“删除” destroy
使用 gem "simple_form" 产生表单
限制看板标题“不得为空”
4-2 实作讨论群“新增”功能
这里，我先写出 controller 的全部代码，之后的都是补充 views界面
# CRUD 作为基础应该提前写出来，后面不会再重复
def show
@group = Group.find(params[:id])
# @posts = @group.posts # 后面会涉及的代码，这里忽略
end
def index
@groups = Group.all
end
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
def edit
@group = Group.find(params[:id])
end
def update
@group = Group.find(params[:id])
if @group.update(group_params)
redirect_to groups_path, notice: "update success"
else
render :edit
end
end
def destroy
@group = Group.find(params[:id])
@group.destroy
redirect_to groups_path, alert: "deleted ,say bye"
end
private
def group_params
params.require(:group).permit(:title, :description)
end
end
-
-
git checkout -b ch03新建分支
-
-
- 建立 new action 略
-
- 建立 new action 的表单
touch app/views/groups/new.html.erb
- 建立 new action 的表单
新增讨论版
<%= form_for @group do |f| %>
标题
<%= f.text_field :title %>
叙述
<%= f.text_area :description %>
<%= f.submit "Submit", :disable_with => 'Submitting...' %>
<% end %>
然后打开 http://localhost:3000/groups/new，可以见到成果
-
- git 存档
-
- 建立 create action，接收数据并储存
目前还只是个表单画面，无法将数据送出后成功建立出一笔讨论版的数据，缺了 action create。如果此时你按下 Submit，会看到错误。
所以这时候，我们要实作 create action，接收 new 里的表单送出的信息，变成一笔存在数据库里的数据。
- 建立 create action，接收数据并储存
修改 app/controllers/groups_controller.rb 略
-
- git 存档
4-3 实作讨论群“浏览”功能
-
- 建立 show action 略
-
- 加入
app/views/groups/show.html.erb
- 加入
<%= link_to("Edit", edit_group_path(@group), class: "btn btn-primary pull-right")%>
<%= @group.title %>
<%= @group.description %>
- git 保存
4-4 实作讨论群“编辑”功能
-
- 建立 edit action 参上，略
-
- 建立 edit action 的表单
# app/views/groups/edit.html.erb
编辑讨论版
<%= form_for @group do |f| %>
标题
<%= f.text_field :title %>
叙述
<%= f.text_area :description %>
<%= f.submit "Submit", :disable_with => 'Submiting...' %>
<% end %>
-
- git 存档
-
- 实作 update action 略
-
- git
4-5 实作讨论群“删除”功能
-
- 建立 delete action
-
- git 存档
4-6 限制“标题为空”的Group，不能被新增
- 1: 在 Group model 加入“标题限制”
# app/models/group.rb
class Group < ApplicationRecord
validates :title, presence: true
end
这样一来，就算送出了空的表单，也不会产生任何纪录。
但我们真正希望达到的效果是像这样子的，送出了空表单，使用者能够确切地知道，自己是因为什么错误被拦下
- 2: 在 groups_controller 里面加入储存失败的判断
# app/controllers/groups_controller.rb
def create
@group = Group.new(group_params)
if @group.save
redirect_to groups_path
else
render :new
end
end
然后修改 app/views/groups/new.html.erb
在 form_for 下方加入这一段：
<% if @group.errors.any? %>
<% @group.errors.full_messages.each do |msg| %>
- <%= msg %>
<% end %>
<% end %>
3 : git 存档
4 : 修改 edit action
# app/controllers/groups_controller.rb
def update
@group = Group.find(params[:id])
if @group.update(group_params)
redirect_to groups_path, notice: "Update Success"
else
render :edit
end
end
然后修改 app/views/groups/edit.html.erb
也在 form_for 下方加入这一段：
<% if @group.errors.any? %>
<% @group.errors.full_messages.each do |msg| %>
- <%= msg %>
<% end %>
<% end %>
- 5 : git 存档
4-7 共用“表单”
把 new 与 edit 重复的表单代码，抽成一个共用文件
我们观察到，new 与 edit 都有相同的“表单代码”，显得相当累赘。在这里我们可以利用一个 Rails 内建的架构 partial去整理设计。
- 1: 产生 app/views/groups/_form.html.erb
<%= form_for @group do |f| %>
<% if @group.errors.any? %>
<% @group.errors.full_messages.each do |msg| %>
- <%= msg %>
<% end %>
<% end %>
标题
<%= f.text_field :title %>
叙述
<%= f.text_area :description %>
<%= f.submit "Submit", :disable_with => 'Submiting...' %>
<% end %>
- 2: 修改
app/views/groups/new.html.erb
# app/views/groups/new.html.erb
新增讨论版
<%= render "form" %>
- 3: 修改
app/views/groups/edit.html.erb
# app/views/groups/edit.html.erb
编辑讨论版
<%= render "form" %>
- 4: git 存档
4-8 将表单换为 Bootstrap 提供的版型
虽然我们已经有看起来还可以的表单，但是 Bootstrap 本身提供的表单版型更棒。
- 1: 修改
app/views/groups/_form.html.erb
# app/views/groups/_form.html.erb
<%= form_for @group do |f| %>
<%= f.label "title", :class => "string optional control-label" %>
<%= f.text_field :title, :class => "string optional form-control" %>
# 这段代码很啰嗦
<%= f.label "description", :class => "string optional control-label" %>
<%= f.text_area :description, :class => "string optional form-control" %>
<%= f.submit "Submit", class: "btn btn-primary", data: { disable_with: "Submiting..." } %>
<% end %>
- 2： git 存档
- 3: 使用 SimpleForm 简化
首先我们要来安装 simple_form
打开 Gemfile，然后新增一行 gem 'simple_form'
# Gemfile
gem 'bootstrap-sass'
+ gem 'simple_form'
bundle install , 安装 gem
- 4: 安装 simple_form for bootstrap 的设定
终端执行 rails generate simple_form:install --bootstrap
然后重开 rails s
这个指令会产生两个文件
config/initializers/simple_form.rb
config/initializers/simple_form_bootstrap.rb （这个是 Bootstrap 表单的“布景”)
- 5: 修改
app/views/groups/_form.html.erb
# app/views/groups/_form.html.erb
<%= simple_form_for @group do |f| %>
<%= f.input :title, input_html: { class: "form-control"} %>
<%= f.input :description, input_html: { class: "form-control"} %>
<%= f.submit "Submit", class: "btn btn-primary", data: { disable_with: "Submiting..." } %>
<% end %>
这样，新的界面更加简洁好看
- 6: git 存档