rubyonrails突进-alert提示系统

大致效果,外观上还需要修改

只要点开后,再次刷新这个数字就没了

思路

总体思路是:

  1. 先把后台做出一个提示系统,搞成数组形式,然后加一个字段『unread』区分true还是false;
  2. 再按照购物车模式后台做个获取当前用户的提示列表,并提供一个post接口可以标记已读;
  3. 最后前端使用bootstrap-popover来实现样式。

后端

生成notification的方法太多了,就不说了,只说渲染部分。

后端的controller需要给前端把 @notifications 这个变量提供出来放到application_controller里面去。

  before_action :get_notification

  # 获取提示系统

  def get_notification
    @notifications ||= Notification.where(recipient: current_user).unread
    # @notifications = current_user.notifications.unread

  end

另外需要提供一个ajax接口可以post获得标记已读,notifications_controller中

  # 标记为已读

  def mark_as_read
    @notifications = Notification.where(recipient: current_user).unread
    @notifications.update_all(read_at: Time.zone.now)
    render json: { success: true }
  end

然后路由提供出来

  # f783-站内通知

  resources :notifications do
    collection do
      post :mark_as_read
    end
  end

前端

直接使用 - Popover
http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

首先需要在bootstrap中引入这个js (依赖Tooltip!)
为了方便和简单,我直接把全站的bootstrapjs都包进来(注意写完这个就不要在引别的bootstrapjs了)

//= require bootstrap

然后在页面上就可以这样写了

        <li id='btn-notification' type="button" class="btn  btn-secondary text-uppercase flat animation pull-right"
                data-container="body" data-toggle="popover" data-placement="bottom"
                data-content="

                <!-- 插入的html触发码 -->
                <% if @notifications.present? %>
                  <% @notifications.each do |n| %>
                    <p><%= n.actor.user_name %>回复了
                      <a href=<%= account_question_path(n.notifiable) %>><%= n.notifiable.content %></a>
                    </p>
                  <% end %>
                <% else %>
                  <p>没有新的消息</p>
                <% end %>

                ">
            <i class="fa fa-bell-o fa-2x" aria-hidden="true">

              <% if @notifications.present? %>
                <kbd>
                <%= @notifications.count %>
                </kbd>
              <% end %>

            </i>
        </li>

然后我把这个data-content允许html格式,并且做一个js可以ajax-post给后台用于标记已读即可

<script>
$(function (){
  // 绑定触发条件

  $("#btn-notification").popover({
            trigger:'click', //触发方式

            html: true, // 为true的话,data-content里就能放html代码了

        });

  // 标记已读

  $('#btn-notification').on('shown.bs.popover', function () {
        $.ajax({
        url: '<%= mark_as_read_notifications_path %>',
        type: 'POST',
        dataType: 'json',
        data: {'read': 'true'},
      })
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  })
  //



});
</script>