4-2 STORY 1 - 上架后台 CRUD

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

输入rake routes
可以看到新增了路径

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"