赵龙 全栈之路

Rails Guides 通知发布系统 CRUD 教程(基础版)

| Comments

目标

建立一个可以发布,更新,删除的通知系统,通知由标题与正文构成。

确认操作环境

进入终端页面
ruby -v
rails -v

建立新 rails 专案

rails new rails001
cd rails001
git init
git add .
git commit -m "First Commit"

建立 Welcome 页面

git checkout -b ch01

在文件 config/routes.rb 添加 welcome 页面路由

config/routes.rb
Rails.application.routes.draw do
  root 'welcome#index'
end

新建文件 app/controllers/welcome_controller.rb

app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
  end
end

新建文件夹 app/views/welcome
新建文件 app/views/welcome/index.html.erb

app/views/welcome/index.html.erb
<h1>Hello World</h1>

再开一个终端页面,执行 rails s
打开 http://localhost:3000 页面

git add .
git commit -m "implement welcome#html"

通知页面

Routes

在文件 config/routes.rb 添加 notices 路由

config/routes.rb
  root 'welcome#index'
+ resources :notices

查看专案路由
rake routes

Models

在建立数据库建立 Noitce 数据表
rails g migration notice

打开新生成文件 db/migrate/xxxx一堆数字xxxx_notice.rb

db/migrate/xxxx一堆数字xxxx_notice.rb
class Notice < ActiveRecord::Migration[5.0]
  def change
+   create_table :notices do |t|
+     t.string :title
+     t.text   :text
+
+     t.timestamps
    end
  end
end

rake db:create
rake db:migrate

新建文件 app/models/notice.rb (Model)

app/models/notice.rb
class Notice < ApplicationRecord
end

进入 rails c
Notice
u = Notice.create(title: "Hello", text: "World")
Notice.all
exit

Create

新建文件 app/controllers/notices_controller.rb 添加 def new

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
  def new
  end
end

新建文件夹 app/views/notices
新建文件 app/views/notices/new.html.erb

app/views/notices/new.html.erb
<h1>New Notice</h1>

打开 http://localhost:3000/notices/new 页面

修改文件 app/controllers/notices_controller.rb 修改 def new添加 def create

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
  def new
    @notice = Notice.new
  end

  def create
    @notice = Notice.new(
      :title => params[:notice][:title],
      :text => params[:notice][:text]
      )

    if @notice.save
      redirect_to @notice
    else
      render 'new'
    end
  end
end

修改文件 app/views/notices/new.html.erb

app/views/notices/new.html.erb
<h1>New Notice</h1>
<% form_for @notice do |f| %>
  <p>
    <%= f.label :title %> </br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %> </br>
    <%= f.text_field :text %>
  </p>

  <p>
    <%= f.submit 'save'%>
  </p>
<% end %>

刷新 http://localhost:3000/notices/new 页面

Read

修改文件 app/controllers/notices_controller.rb 添加 def show

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
 # def create
   end
   
  def show
    @notice = Notice.find(params[:id])
  end
end

新建文件 app/views/notices/show.html.erb

app/views/notices/show.html.erb
<h1>Show Notices</h1>
<p>
  <strong>Title:</strong>
  <%= @notice.title %>
</p>
<p>
  <strong>text:</strong>
  <%= @notice.text %>
</p>

打开 http://localhost:3000/notices/1 页面

Update

修改文件 app/controllers/notices_controller.rb 添加 def edit & def update

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
# def show
   
  def edit
    @notice = Notice.find(params[:id])
  end

  def update
    @notice = Notice.find(params[:id])

    if @notice.update(
      :title => params[:notice][:title],
      :text => params[:notice][:text]
      )
      redirect_to notice_path
    else
      render 'edit'
    end
  end
end

新建文件 app/views/notices/edit.html.erb

app/views/notices/edit.html.erb
<h1>Edit Notice</h1>
<%= form_for @notice do |f| %>
  <p>
    <%= f.label :title %> </br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %> </br>
    <%= f.text_field :text %>
  </p>

  <p>
    <%= f.submit 'save'%>
  </p>
<% end %>

打开 http://localhost:3000/notices/1/edit 页面

Index

修改文件 app/controllers/notices_controller.rb 添加 def index

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
  def index
    @notices = Notice.all
  end
  
# def show
end

新建文件 app/views/notices/index.html.erb

app/views/notices/index.html.erb
<h1>Listing Notices</h1>
</p>
<%= link_to 'New', new_notice_path %>
</p>

<table>
  <tr>
    <th>Title</th>
    <th>Text</th>
  </tr>

  <% @notices.each do |notice| %>
    <tr>
      <td><%= notice.title %></td>
      <td><%= notice.text %></td>
      <td><%= link_to 'Show', notice_path(notice) %></td>
      <td><%= link_to 'Edit', edit_notice_path(notice) %></td>      
    </tr>
  <% end %>
</table>

Delete

修改文件 app/controllers/notices_controller.rb 添加 def index

app/controllers/notices_controller.rb
class NoticesController < ApplicationController
# def update

  def destroy
    @notice = Notice.find(params[:id])
    @notice.destroy

    redirect_to notices_path
  end
end

修改文件 app/views/notices/index.html.erb

app/views/notices/index.html.erb
#     <td><%= link_to 'Show', notice_path(notice) %></td>
#     <td><%= link_to 'Edit', edit_notice_path(notice) %></td>
      <td><%= link_to 'Delete', notice_path(notice),
              method: :delete,
              data: { confirm: 'Are you sure' } %></td>

git add .
git commit -m "implement Noitce CRUD"

添加链接

在 show 页面最下方加入 Edit 链接
<%= link_to 'Edit', edit_notice_path %>

在 new、show、edit 页面最下方加入 Back 链接
<%= link_to 'Back', notices_path %>

参考文章:

Comments

comments powered by Disqus