By

文章目录
  1. 1. 「从零开始做购物网站」第23章 开发个人中心和默认收货地址
    1. 1.1. 目标
    2. 1.2. 步骤
      1. 1.2.1. Step 0:建立新分支
      2. 1.2.2. Step 2:新增app/views/account/users/edit.html.erb
      3. 1.2.3. Step 3:
      4. 1.2.4. Step 4:将变更 commit 进去 git 里面。
    3. 1.3. 本章详解

「从零开始做购物网站」第23章 开发个人中心和默认收货地址

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

开发个人中心和默认收货地址

步骤

Step 0:建立新分支

在终端执行

checkout -b story17```。
1
2
3
4
5
6
7
8
9
10
11
### Step 1: 用户中心开发
在终端执行```rails g migration add_more_columns_to_user```。
```ruby  db/migrate/20170610122123_add_more_columns_to_user.rb
class AddMoreColumnsToUser < ActiveRecord::Migration[5.0]
  def change
    add_column :users, :name, :string
    add_column :users, :address, :string
  end
end

在终端执行

db:migrate```。
1
2
3
4
5
6
7
8
打开 config/routes.rb
```ruby config/routes.rb
  namespace :account do
+   resources :users
    resources :orders
  end

在终端执行

g controller account::users```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
打开app/controllers/account/users_controller.rb
```ruby 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 2:新增app/views/account/users/edit.html.erb

在终端执行

app/views/account/users/```。
1
2
3
4
5
6
7
8
9
10
11
12
在终端执行```touch app/views/account/users/edit.html.erb```。
打开 app/views/account/users/edit.html.erb
```ruby 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 %>

打开app/views/common/_navbar.html.erb

app/views/common/_navbar.html.erb
1
2
3
4
5
 <li role="separator" class="divider"></li>
 <li>
-   <a href="#">个人信息</a>
+   <%= link_to("用户中心", edit_account_user_path(current_user)) %>
 </li>

完成上述步骤后，用户就可以个人资料进行修改了。

Step 3:

最后改造 checkout.html.erb，让表单自动读取用户资料。

打开app/views/carts/checkout.html.erb

app/views/carts/checkout.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div class="row">
   <div class="col-md-12">
    <h2> 购物明细 </h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th width="80%">商品明细</th>
          <th>单价</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <% current_cart.cart_items.each do |cart_item| %>
          <tr>
            <td>
              <%= link_to(cart_item.product.title, product_path(cart_item.product)) %>
            </td>
            <td>
              <%= cart_item.product.price %>
            </td>
            <td>
              <%= cart_item.quantity %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
    <div class="total clearfix">
      <span class="pull-right">
        总计 <%= render_cart_total_price(current_cart) %> CNY
      </span>
    </div>
    <hr>
    <h2> 订单信息 </h2>
    <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>
  </div>
</div>

Step 4:将变更 commit 进去 git 里面。

1
2
3
4
5
6
git add .
git commit -m "完成个人中心和默认收货地址开发"
git push origin story17
git checkout master
git merge story17
git push origin master

本章详解

努力更新中，上班族请理解。。。。。

本章参考：http://anndo-blog.logdown.com/posts/1869450。

文章目录
  1. 1. 「从零开始做购物网站」第23章 开发个人中心和默认收货地址
    1. 1.1. 目标
    2. 1.2. 步骤
      1. 1.2.1. Step 0:建立新分支
      2. 1.2.2. Step 2:新增app/views/account/users/edit.html.erb
      3. 1.2.3. Step 3:
      4. 1.2.4. Step 4:将变更 commit 进去 git 里面。
    3. 1.3. 本章详解