购物商城商品页增加商品的评论功能

1.创建reviewmodel

rails g model review content:text user_id:integer product_id:integer

rake db:migrate

2.修改模型之间的关系

user.rb

has_many :reviews

product.rb

has_many :reviews

review.rb

belongs_to :product
belongs_to :user
validates :content, presence: true

2.修改config/routes.rb

resources :products do
    resources :reviews
end

3.创建review controller

rails g controler reviews

修改app/controller/review_controller.rb

before_action :anthenticate_user!

def new
    @product = Product.find(params[:product_id])
    @review = Review.new
end

def create
    @product = Product.find(params[:product_id])
  @review = Review.new(review_params)
  @review.user = current.user
  @review.product = @product
  
  if @review.save
    redirect_to  product_path(@product)
   else
     flash[:warning] = "你还没有发表评论！"
     redirect_to :product_path(@product)
   end
  end
  
  private
   
   def review_params
    params.require(:review).permit(:content) 
   end
  
end

整理app/controller/review_controller.rb代码如下：

before_action :anthenticate_user!
before_action :self_product

def new
    @review = Review.new
end

def create
  @review = Review.new(review_params)
  @review.user = current.user
  @review.product = @product
  
  if @review.save
    redirect_to  product_path(@product)
   else
     flash[:warning] = "你还没有发表评论！"
     redirect_to :product_path(@product)
   end
  end
  
  private
   
   def set_product
      @product = Product.find(params[:product_id])
   end
  
   def review_params
    params.require(:review).permit(:content) 
   end
  
end

4.修改app/controllers/products_controller.rb,让product的相关view能够引用@review，

def show
    @product = Product.find(params[:id])
    @reviews = Review.where(product_id: @product.id).order("created_at DESC")
    @review = Review.new
  end

修改app/views/products/show.html.erb

 <div class="tab-content">

          <!-- 商品详情区域 -->
          <div class="product-detail-box row tab-pane active" id="tab_default_1">
            <%= simple_format(@product.detail) %>
          </div>
          <!-- 以上为原有的-->
    <!-- 商品评论区域-->
          <div class="product-detail-box row tab-pane" id="tab_default_2">
            <%= simple_form_for ([@product, @review]) do |f| %>
              <div class="review-comment-form">
                <%= f.input :content, :label => "添加评论" %>
              </div>
              <div class="review-comment-button">
                <%= f.submit "提交", class: "btn btn-sm btn-default", data: {disable_with: "Submiting..."} %>
              </div>
            <% end %>
            <hr>
            <% if @reviews.blank? %>
              <p>这个商品还没有人评论，来为他添加一个吧！</p>
            <% else %>
              <% @reviews.each do |review| %>
                <div class="reviews">
                  <ul>
                    <li>
                      <div class="row">
                        <div class="col-sm-9 review-user-email"><%= review.user.email %></div>
                        <div class="col-sm-3"><%= review.created_at.strftime("%Y-%m-%d %H-%M-%S") %></div>
                      </div>
                      <div class="review-comment">
                        <%= review.content %>
                      </div>
                    </li>
                  </ul>
                  <div class="review-hr">
                    <hr>
                  </div>
                </div>
              <% end %>
            <% end %>
          </div>
          
    </div> 

更新商品评论区的css样式

// 商品品论区域样式
.review-comment-form {
  text-align: left;
  padding: 2em 2em;
}
.review-comment-button {
  text-align: left;
  padding: 0 2em;
  margin-top: -2em;
}
.reviews {
  text-align: left;
  li {
    list-style: none;
  }
}
.review-user-email {
  font-weight: bold;
}
.review-comment {
  margin: 1em auto;
}
.review-hr {
  padding: 0 3em;
}

结果如下：

image