Together网站搭建之踩坑系列3

写在前面

这是功能实现的第二篇,扯一扯如何添加分类筛选功能

完整作品源码及效果,看这里作品网站, 作品源码

目录

正文

先上效果图:

如何实现?

  • 新建model category

    rails g model category name:string
    rake db:migrate
    
  • 在event中新增category的栏位

    rails g migration add_category_id_to_event category_id:integer
    rake db:migrate
    
  • 建立category和event的关系,在event.rb中添加

    belongs_to :categroy
    

    category.rb中添加:

    has_many :events
    
  • 在event的new ,edit中添加如下:

    <%= select_tag(:category_id, options_for_select(@categories), :prompt => "类别") %>
    

    如果是simple_form格式,可添加如下:

      <div class="form-group">
        <%= f.association :category %>
      </div>
    
  • events_controller.rb中,将category_id添加到params白名单中:

      def event_params
        params.require(:event).permit(:title, ......, :category_id)
      end
    
  • 为方便后续部署到heroku,可在seeds文档中新建category。在seeds.rb中添加如下代码:

    # Category部分
    Category.delete_all
    
    Category.create!(id:1, name: "音乐")
    Category.create!(id:2, name: "户外")
    Category.create!(id:3, name: "约厨")
    Category.create!(id:4, name: "交友")
    Category.create!(id:5, name: "读书")
    Category.create!(id:6, name: "游戏")
    
  • 在event 的index页面显示分类列表,在event的index.html.erb中添加如下代码:

    <div class="btn-group">
        <%= link_to "全部", events_path, :class => "btn btn-default btn-group #{(params[:category].blank?)? "active" : ""}"%>
        <% Category.all.each do |c| %>
          <%= link_to c.name, events_path(category: c), :class => "btn btn-default btn-group #{(params[:category] == c)? "active" : "" }"%>
        <% end %>
    </div>
    
  • 用上scope,在event.rb中加入以下代码:

    scope :by_category, ->(c){where( :category_id => c )}
    
  • 修改events_controller.rb,修改index部分:

      def index
        @events = Event.order("created_at DESC")
        if params[:category].present?
          @events = @events.by_category(params[:category]).order("created_at DESC")
        end
      end
    

大功告成!