Together网站搭建之踩坑系列3

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

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

目录

• 给活动添加收藏功能，并使用Ajax进行优化
• 给活动Events添加分类筛选
• 添加省市自治区地址, 并实现热门城市筛选
• 添加时间筛选
• 添加评论区，并使用ajax优化
• 实作活动申请
• 在个人中心实作密码修改

正文

先上效果图：

如何实现？

• 新建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
  

大功告成！