over 1 year ago

折腾了一天多,终于在商店中添加上了商品收藏功能!
现在把添加过程重新进行梳理,现写成一个完整教程,供大家参考。

step1: 执行命令
rails g model favorites user_id:integer product_id:integer
rake db:migrate

修改app/models/favorite.rb

class Favorite < ApplicationRecord
+    belongs_to :user
+    belongs_to :product
end

step2: 执行命令
rails g controller account::favorites

修改app/controllers/account/favorites_controller.rb

class Account::FavoritesController < ApplicationController
+    before_action :authenticate_user!
+
+    def index
+        @favorite_products = current_user.favorite_products.order('id DESC')
+    end
end

step3: 执行命令
rails g controller favorites

修改app/controllers/favorites_controller.rb

class FavoritesController < ApplicationController
+    before_action :authenticate_user!
+    before_action :set_product
+
+    def create
+        if Favorite.create(product: @product, user: current_user)
+            redirect_to :back, notice: "Product #{@product.title} has been favorited"
+        else
+            redirect_to :back, notice: "Something went wrong...favorite failed"
+        end
+    end
+
+    def destroy
+        Favorite.where(product: @product, user: current_user).first.destroy
+        redirect_to :back, alert: "Removed product #{@product.title} from favorite"
+    end
+
+    private
+
+    def set_product
+        @product = Product.find(params[:product_id] || params[:id])
+    end
end

step4: 建立联系

修改app/models/product.rb文件

class Product < ApplicationRecord
...
+ has_many :favorites
+ has_many :fans, through: :favorites, source: :user 
 end

修改app/models/user.rb文件

class User < ApplicationRecord
...
+  has_many :favorites
+  has_many :favorite_products, through: :favorites, source: :product
end

step5: 增加查看收藏页面
touch app/views/account/favorites/index.html.erb
增加以下内容

+<h2>My Favorite Products</h2>
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Remove Favorite</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @favorite_products.each do |p| %>
+      <tr>
+        <td>
+            <%= link_to product_path(p) do %>
+              <% if p.image.present? %>
+                <%= image_tag(p.image.thumb.url, class: "thumbnail") %>
+              <% else %>
+                <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
+              <% end %>
+            <% end %>
+            <%= p.title %> $ <%= p.price %></td>
+        <td><%= link_to("Unfavorite", favorite_path(p), method: :delete) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

step6: 增加栏位,可以跳转到收藏商品页面
在app/views/common/_navbar.html.erb文件中增加栏位 『My Favorites』

            <ul class="dropdown-menu">
              <% if current_user.admin? %>
              <li><%= link_to("Admin 选单", admin_products_path ) %></li>
              <% end %>
              <li> <%= link_to("个人订单列表", account_orders_path ) %> </li>
+                 <li><%= link_to("My Favorites", account_favorites_path) %></li>  
              <li> <%= link_to(content_tag(:i, "登出", class: 'fa fa-sign-out'), destroy_user_session_path, method: :delete) %></li>
            </ul></li>
            <% end %>

step7: 增加收藏商品按钮
在app/views/products/show.html.erb文件中增加

...
                  <%= link_to("Add to cart", add_to_cart_product_path(@product), :method => :post) %>
                  <% else %>
                  已销售一空,无法购买
                  <% end %>
                </button>

+                <% if current_user %>
+                    <% if current_user.favorites.where(product: @product).empty? %>
+                    <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span>
+                    <%= link_to("Favor", favorites_path(product_id: @product), method: :post) %>
+                    </button>
+                    <% else %>
+                    <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span>
+                    <%= link_to("Unfavor", favorite_path(@product), method: :delete) %>
+                    </button>
+                    <% end %>
+                <% else %>
+                      <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span>
+                      <%= link_to("Favor", favorites_path(product_id: @product), method: :post) %>
+                      </button>
+                <% end %>
...

step8:修改路由关系
修改config/routes.rb

Rails.application.routes.draw do
...
   namespace :account do
-   resources :orders
+   resources :orders, :favorites, only: [:index]
   end
+  resources :favorites, only: [:create, :destroy]
   
 end

参考教程: http://forum.qzy.camp/t/topic/507
感谢调试过程中,文志鹏同学的大力帮助!

最终效果:



感谢阅读这篇文章,如果您喜欢以上功能,欢迎为我的作品点赞鼓励!

“Lucky Dog”是我和隋璐同学一起制作的网站。这是一个萌宠出售平台,旨在为客户带去温暖的陪伴。如果你喜欢我们的网站,请投上您宝贵的一票。

https://fullstack.xinshengdaxue.com/works/203

← 20170218本周两最 适合小白的商店魔改教程1--增加商品评论功能 →
 
comments powered by Disqus