By

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:增加controller reviews
    3. 2.3. Step 3:新增app/views/reviews/_review.html.erb
    4. 2.4. Step 4:将变更 commit 进去 git 里面。
  3. 3. 本章详解

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

目标

增加商品评论功能

步骤

Step 0:建立新分支

在终端执行

checkout -b story16```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
### Step 1:
在终端执行```rails g model review```。
打开db/migrate/20170610115551_create_reviews.rb
```ruby db/migrate/20170610115551_create_reviews.rb
class CreateReviews < ActiveRecord::Migration[5.0]
  def change
    create_table :reviews do |t|
      t.integer :product_id
      t.integer :user_id
      t.text :body
      
      t.timestamps
    end
  end
end

执行

db:migrate```。
1
2
3
4
5
6
7
8
打开app/models/review.rb
```ruby app/models/review.rb
class Review < ApplicationRecord
  validates :body, presence: true
  belongs_to :user
  belongs_to :product
end

打开app/models/user.rb

app/models/user.rb
1
2
  has_many :orders
+ has_many :reviews

打开app/models/product.rb

app/models/product.rb
1
2
  has_one :main_product_image, -> { order(weight: 'desc') },class_name: :ProductImage
+ has_many :reviews

打开config/routes.rb

config/routes.rb
1
2
3
4
5
6
7
8
  resources :products do
    member do
      post :add_to_cart
      put "like", to: "products#upvote"
      put "dislike", to: "products#downvote"
    end
+   resources :reviews
  end

Step 2:增加controller reviews

在终端执行

g controller reviews```。
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
 
 ```ruby app/controllers/reviews_controller.rb
 
class ReviewsController < ApplicationController
  before_action :authenticate_user!, only: [:create, :destroy]
  def create
    @product = Product.find(params[:product_id])
    @review = @product.reviews.new(review_params)
    @review.user = current_user
    if @review.save
      redirect_to product_path(@product), notice: '评论发布成功。'
    else
      redirect_to product_path(@product), notice: '请输入您的评论。'
    end
  end
  def destroy
    @product = Product.find(params[:product_id])
    @review = Review.find(params[:id])
    @review.destroy
    redirect_to product_path(@product), alert: "成功删除评论内容。"
  end
  private
  def review_params
    params.require(:review).permit(:body)
  end
end

Step 3:新增app/views/reviews/_review.html.erb

在终端执行

app/views/reviews/_review.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
```ruby app/views/reviews/_review.html.erb
<div class="pull-left">
    <p ><%= review.body %></p>
</div>
<br>
<div class="pull-right">
    <p>
      <small>Submitted
          <strong><%= time_ago_in_words(review.created_at) %>
              ago</strong>
              by
              <%= review.user.email %>
      </small>
    </p>
</div>
<br>
<br>
<div class="review-delete">
    <% if review.user == current_user %>
      <%= link_to("Delete", product_review_path(@product, review), method: :delete, data: {
        confirm: "Are you sure?"},class: "btn btn-sm pull-right") %>
    <% end %>
    <br>
    <hr>
</div>

touch app/views/reviews/_form.html.erb

app/views/reviews/_form.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
<%= simple_form_for([@product, @product.reviews.build]) do |f|%>
  <div class="field">
      <%= f.text_area :body, class: "form-control", label: "添加评论" %>
  </div>
  <br>
   <div class="reviews-form">
     <%= f.submit "我要评论", class: "btn btn-danger pull-right" %>
   </div>
<% end %>

打开app/views/products/show.html.erb，代码修改成如下内容

app/views/products/show.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<div class="row">
  <div class="col-lg-12">
    <ol class="breadcrumb">
      <li><a href="<%= root_path %>">所有宝贝</a></li>
      <li class="active"><%= @product.category.parent.title %></li>
      <li><a href="<%= category_path @product.category %>"><%= @product.category.title %></a></li>
      <li class="active"><%= @product.title %></li>
    </ol>
    <!-- Start of product card -->
    <div class="preview col-md-7 " style="">
      <% @product.product_images.each do |product_image| %>
        <div class="col-xs-6 col-md-6">
          <a href="#" class="thumbnail detail">
            <%= image_tag product_image.image.url %>
          </a>
        </div>
      <% end %>
    </div>
    <div class="preview col-md-5 " style="">
      <h1><%= @product.title %></h1>
      <ul class="list-unstyled">
        <li>商品编号: <%= @product.uuid %></li>
        <li>库存: <%= @product.quantity %></li>
      </ul>
      <h4><span class="msrp">原价: ¥<%= @product.msrp %></span></h4>
      <h3><strong>现价: ¥<%= @product.price %></strong> </h3>
      <p>购买: <input type="text" name="quantity" value="1" />件</p>
      <%= link_to like_product_path(@product), method: :put do %>
        <div class="pi-thumbs-up">
          赞（<%= @product.get_upvotes.size %>）
        </div>
      <% end %>
      <div class="pull-right">
         <% if @product.quantity.present? && @product.quantity > 0 %>
            <%= link_to("加入购物车", add_to_cart_product_path(@product), method: :post,
                        class: "btn btn-lg btn-danger") %>
         <% else %>
           已销售一空，无法购买
         <% end %>
      </div>
    </div>
  </div>
  <!-- End of product card -->
  <!-- Start of product description & reviews -->
  <div class="col-md-8">
    <div class="tabs" >
      <div class="tabbable-panel">
        <div class="tabbable-line">
          <ul class="nav nav-tabs">
            <li role="presentation" class="active">
              <a href="#tab_default_1" data-toggle="tab">宝贝详情</a>
            </li>
            <li>
              <a href="#tab_default_2" data-toggle="tab">宝贝评价(<%= @product.reviews.count %>) </a>
            </li>
          </ul>
          <br />
          <div class="tab-content">
            <div class="tab-pane active" id="tab_default_1">
               <p class="product-description"><%= @product.description.html_safe %></p>
               <p class="product-description2 text-center">产品展示</p>
                <!--商品大图展示 -->
               <div class="row">
                 <% @product.product_images.each do |product_image| %>
                   <div class="col-xs-12 col-md-12 product-show-detail">
                       <%= image_tag product_image.image.url(:big) %>
                   </div>
                 <% end %>
               </div>
               <div class="faq">
                 <p class="faq-title text-center">常见问题</p>
                 <p class="question">使用什么快递发货？</p>
                 <p class="answer">伴客默认使用顺丰快递发货，配送范围覆盖全国大部分地区（港澳台地区除外）。</p>
                 <p class="question">如何申请退货？</p>
                 <p class="answer">
                   1.自收到商品之日起7日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；<br />
                   2.退货流程：<br />
                   确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；<br />
                   3.因MONSOON产生的退货，如质量问题，退货邮费由MONSOON承担，退款完成后钱款将沿原渠道返还。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。<br />
                 </p>
                 <p class="question">如何开具发票？</p>
                 <p class="answer">如需开具普通发票，请在下单时联系客服办理，我们将虽货物一起快递给您；</p>
               </div>
            </div><!-- End of tab_default_1 -->
            <div class="tab-pane" id="tab_default_2">
                <div class="row">
                  <div class="col-sm-12 ">
                    <h4>
                      <%= @product.reviews.count %> Reviews
                    </h4>
                    <hr>
                    <div >
                      <%= render @product.reviews%>
                      <%= render "reviews/form"%>
                    </div>
                  </div>
                </div>
              </div><!-- End of tab_default_2 -->
            </div><!-- End of tab-content -->
          </div><!-- End of tabbable-line -->
        </div><!-- End of tabbable-panel -->
      </div><!-- End of tabs -->
    </div><!-- End of product description & reviews -->
</div><!-- End of product show page -->

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

1
2
3
4
5
6
git add .
git commit -m "完成商品评论功能"
git push origin story16
git checkout master
git merge story16
git push origin master

本章详解

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

文章目录
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 2:增加controller reviews
    3. 2.3. Step 3:新增app/views/reviews/_review.html.erb
    4. 2.4. Step 4:将变更 commit 进去 git 里面。
  3. 3. 本章详解