4-2 STORY 1 - 上架后台 CRUD
目标
使用者必须要是 admin 才能登入 http://localhost:3000/admin/products
商品栏位必须要有 title, description, quantity, price
admin 后台 products 完整的 CRUD
Step 0:
git checkout -b story1
Step 1: 建立 controller admin/products
rails g controller admin::products
Step 2: 设定 admin/products 的 routes
config/routes.rb
Rails.application.routes.draw do
+ namespace :admin do
+ resources :products
+ end...
(略)
end
Step 3: 建立 model product
rails g model product title:string description:text quantity:integer price:integer
rake db:migrate
Step 4: 实作后台新增商品
app/controllers/admin/products_controller.rb
class Admin::ProductsController < ApplicationController
def new
@product = Product.new
end
def create
@product = Product.new(product_params)
if @product.save
redirect_to admin_products_path
else
render :new
end
end
private
def product_params
params.require(:product).permit(:title, :description, :quantity, :price)
end
end
Step 5: 新增商品页面
touch app/views/admin/products/new.html.erb
app/views/admin/products/new.html.erb
<h2> New Product </h2>
<%= simple_form_for [:admin, @product] do |f| %>
<div class="group">
<%= f.input :title %>
</div>
<div class="group">
<%= f.input :description %>
</div>
<div class="group">
<%= f.input :quantity %>
</div>
<div class="group">
<%= f.input :price %>
</div>
<%= f.submit "Submit", data: { disable_with: "Submitting..." } %>
<% end %>
http://localhost:3000/admin/products/new
新增几个 product 试试看。
Step 6: 实作后台index action
app/controllers/admin/products_contoller.rb
class Admin::ProductsController < ApplicationController
+ def index
+ @products = Product.all
+ end
def new
@product = Product.new
end
...(略)
end
Step 7: 新增index页面
touch app/views/admin/products/index.html.erb
app/views/admin/products/index.html.erb
<ul>
<% @products.each do |product| %>
<li> <%= link_to(product.title, admin_product_path(product)) %> </li>
<% end %>
</ul>
新增商品后可以看到新增的商品页面
http://localhost:3000/admin/products
Step 8: 实作后台商品修改
修改 admin/products_controller.rb
app/controllers/admin/products_controller.rb
...(略)
def new
@product = Product.new
end
+ def edit
+ @product = Product.find(params[:id])
+ end
+ def update
+ @product = Product.find(params[:id])
+ if @product.update(product_params)
+ redirect_to admin_products_path
+ else
+ render :edit
+ end
+ end
def create
@product = Product.new(product_params)
...(略)
Step 9: 新增修改页面
touch app/views/admin/products/edit.html.erb
app/views/admin/products/edit.html.erb
<h2> Edit Product </h2>
<%= simple_form_for [:admin, @product] do |f| %>
<div class="group">
<%= f.input :title %>
</div>
<div class="group">
<%= f.input :description %>
</div>
<div class="group">
<%= f.input :quantity %>
</div>
<div class="group">
<%= f.input :price %>
</div>
<%= f.submit "Submit", data: { disable_with: "Submitting..." } %>
<% end %>
测试看看http://localhost:3000/admin/products/1/edit(/product/XXX/edit 若有多笔资料, XXX可以替换为其他数字)
Step 10: git 存档
git add .
git commit -m "implement backend CRUD"
