over 1 year ago

step1: 执行命令
rails g scaffold comment product_id:integer:index body:text user:references --skip-stylesheets
rake db:migrate

step2. create connection
在app/models/product.rb文件中增加

+ has_many :comments, dependent: :destroy

在app/models/comment.rb文件中增加

+  belongs_to :user
+  belongs_to :product

step3. 修改路由表
修改config/routes.rb文件

Rails.application.routes.draw do
 +  resources :comments
 
    ...
    
        resources :products do
      member do
        post :add_to_cart
      end
 +    resources :comments
    end
        ...
end

step4.
修改app/controllers/comments_controller.rb文件内容为

class CommentsController < ApplicationController
  before_action :authenticate_user!
  before_action :set_comment, only: [:destroy]



  # POST /comments
  # POST /comments.json
  def create
      @product = Product.find(params[:product_id])
      @comment = @product.comments.new(comment_params)
      @comment.user = current_user

      respond_to do |format|
        if @comment.save
          format.html { redirect_to @product, notice: 'Comment was successfully created.' }
          format.json { render json: @comment, status: :created, location: @comment }
        else
          format.html { render action: "new" }
          format.json { render json: @comment.errors, status: :unprocessable_entity }
        end
      end
    end


  # DELETE /comments/1
  # DELETE /comments/1.json
  def destroy
    @comment.destroy

    respond_to do |format|
      format.html { redirect_to :back, notice: 'Comment was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_comment
      @comment = Comment.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def comment_params
      params.require(:comment).permit(:product_id, :body, :user_id)
    end
end

step5. 在商品展示部分增加评论栏
修改app/views/products/show.html.erb文件,增加以下内容

 +              <h3 class="comments_title">
 +                <%= @product.comments.count %> Comments
 +              </h3>
 +              <hr>
 +              <div id="comments">
 +                <%= render @product.comments%>
 +                <%= render "comments/form"%>
 +
 +              </div>

step6. touch app/views/comments/_comment.html.erb 添加以下内容

<div class="comments_wrapper clearfix">
        <div class="pull-left">
            <p class="lead"><%= comment.body %></p>
            <p><small>Submitted <strong><%= time_ago_in_words(comment.created_at) %> ago</strong> by <%= comment.user.email %></small></p>
      <hr>
        </div>

        <div class="btn btn-group pull-right">
            <% if comment.user == current_user -%>
                <%= link_to 'Delete', comment, method: :delete, data: { confirm: 'Are you sure?' }%>
            <% end %>
        </div>
    </div>

step7. touch app/views/comments/_form.html.erb,增加以下内容

<%= simple_form_for([@product, @product.comments.build]) do |f|%>

  <div class="field">
      <%= f.text_area :body, class: "form-control" %>
  </div>
  <%= f.submit "Add a comment", class: "btn btn-success" %>
<% end %>

最终效果

感谢阅读这篇文章,如果你喜欢以上功能,欢迎给我的作品点赞鼓励!
https://fullstack.xinshengdaxue.com/works/203

← 适合小白的商店魔改教程2--增加商品收藏功能 适合小白的商店魔改教程3--固定footer到页面底部 →
 
comments powered by Disqus