【JA魔改秘笈】實作「用戶中心」 & 訂單欄位自動填入用戶資料

關於這篇教程

這篇教程介紹如何實現簡單的「用戶中心」,供使用者修改個人資料,以及如何在用戶創建訂單時,自動幫他填入資料。這樣的小小優化,可以讓作品更加逼近真實網站的體驗,作法相當簡單,來試試吧!


Part 1 新增 User 欄位:姓名、地址。

訂單中用到「姓名」、「地址」這兩項資訊,所以我們先來幫 User 這個 Model 添加欄位。


[Step 1]

終端機執行:$ rails g migration add_columns_to_user。執行後 db/migrate 的目錄下,會產生一個:「(一串數字)_add_columns_to_user.rb」的檔案。參考以下代碼修改檔案內容,並存檔。

  • db/migrate/(一串數字)_add_columns_to_user.rb
db/migrate/(一串數字)\_add\_columns\_to\_user.rb
class AddColumnsToUser < ActiveRecord::Migration[5.0]
  def change
    add_column :users, :name, :string  # 添加姓名欄位

    add_column :users, :address, :string # 添加地址欄位

  end
end

[Step 2]

存檔後,回到終端機執行:$ rake db:migrate


Part 2 建立「用戶中心」,讓用戶自行修改個人資訊。

我們還會需要一個「用戶中心」,讓用戶可以填寫「姓名」、「地址」。


[Step 1]

先來安置路徑。由於「用戶中心」算是 account 的相關頁面,我們新增一行 resources :users,放在 namespace :account 的區塊。

  • config/routes.rb
  namespace :account do
    resources :users # 加入這一行,新增「用戶中心」的相關路徑

    resources :orders
  end

[Step 2]

有了路徑後,我們還需要相對應的 Controller 來定義操作。在終端機執行:$ rails g controller account::users,產生 account/users_controller.rb。

  • app/controllers/account/users_controller.rb
class Account::UsersController < ApplicationController
  # 必須登入

  before_action :authenticate_user!

  # 編輯當前用戶資料

  def edit
    @user = current_user
  end

  def update
    @user = current_user
    @user.update(user_params)
    if @user.save
      redirect_to edit_account_user_path(current_user)
      flash[:notice] = '用戶資料更新成功'
    else
      render :edit
    end
  end

private

  def user_params
    params.require(:user).permit(:name, :address)
  end

end

[Step 3]

先在下拉式選單加上一個「用戶中心」的連結,讓用戶可以透過選單,進到「用戶中心」的頁面。

  • app/views/common/_navbar.html.erb
<!-- 前略 -->

        <!-- 用戶中心連結 -->
        <li><%= link_to("用戶中心", edit_account_user_path(current_user)) %></li>
        
        <li><%= link_to("個人訂單列表", account_orders_path ) %></li>
        <li><%= link_to(content_tag(:i, '登出', class: 'fa fa-sign-out'), destroy_user_session_path, method: :delete) %></li>

<!-- 後略 -->

[Step 4]

終端機執行:$ touch app/views/account/users/edit.html.erb,建立「用戶中心」的頁面。

  • app/views/account/users/edit.html.erb
<%= simple_form_for [:account, @user] do |f| %>

    <%= f.input :name, :label => '姓名' %>
    <%= f.input :address, :label => '地址'  %>
    <%= f.button :submit, '更新', class: 'button' %>

<% end %>

完成上述 Step 1 ~ Step 4 的操作後,用戶就可以透過下拉式選單進入「用戶中心」,並且對個人資料進行修改。

  • 功能演示


Part 3 修改訂單表格,自動填入使用者資料。

最後,我們要改造 checkout.html.erb,讓表單讀取用戶資料。我們還可以再作一些小修改,讓表單更符合真實網站的體驗。


  • app/views/carts/checkout.html.erb
  <div class='order-form'>

      <%= simple_form_for @order do |f| %>

        <legend>訂購人</legend>

        <div class='form-group col-lg-6'>
            <%= f.input :billing_name, placeholder: '請輸入訂購人姓名', input_html: {value: current_user.name}, :label => '姓名'  %>
        </div>
        <div class='form-group col-lg-6'>
            <%= f.input :billing_address, placeholder: '請輸入訂購人帳單地址', input_html: {value: current_user.address}, :label => '地址'  %>
        </div>
        <!-- 收貨人欄位:姓名、地址 -->
        <legend>收貨人</legend>

        <div class='form-group col-lg-6'>
            <%= f.input :shipping_name, placeholder: '請輸入收貨人姓名', input_html: {value: current_user.name}, :label => '姓名'  %>
        </div>
        <div class='form-group col-lg-6'>
            <%= f.input :shipping_address, placeholder: '請輸入收貨人收件地址', input_html: {value: current_user.address}, :label => '地址'  %>
        </div>
        <div class='checkout'>
          <%= f.submit '生成訂單', class: 'btn btn-lg btn-danger pull-right', data: { disable_with: 'Submitting...' } %>
        </div>

      <% end %>
  </div>


像這樣的一段代碼,看似冗長、複雜,但別慌,這裡一一說給你聽!

<%= f.input :shipping_address, placeholder: '請輸入收貨人收件地址', input_html: {value: current_user.address}, :label => '地址'  %>`

像這樣一行代碼,可以拆分細看:

  • placeholder: '請輸入收貨人收件地址':欄位中的提示文字。
  • input_html: {value: current_user.address}:設定要代入的值(value),這裡的範例是將「當前用戶的地址(current_user.address)」的值填入欄位。
  • :label => '地址':命名欄位的標題。


Simple_form 還有一些可以探索的進階用法,像是利用 input_html: { class: 'CSS樣式'} 修改欄位樣式等等,這篇教程就不贅述了,有興趣的同學,歡迎移駕至我的搭擋 Jimmy Wang 的嘔心瀝血之作:

< Simple_form 進階用法:優化欄位設置(包含Model设定)>


  • 功能演示

大功告成!


  • 實際運用在作品中可以達到以下效果:




如果覺得這篇教程有幫助,歡迎至:J&A SELECT 的作品頁面 點下「支持TA」。你的寶貴一票,對我們是很大鼓勵和支持,也是我們持續分享的動力!:)

Comments

comments powered by Disqus