【Ruby on Rails全栈课程】4.4 评论功能实现(三)--分页(插件Kaminari)

简介: 1、实现分页功能我们需要使用“kaminari”插件,我们先来安装一下(1)粘贴下面代码到Gemfile文件中

1、实现分页功能我们需要使用“kaminari”插件,我们先来安装一下


(1)粘贴下面代码到Gemfile文件中


gem 'kaminari'


(2)运行bundle install安装gem


/vagrant/data_system$ bundle install
#系统返回信息
Fetching gem metadata from [https://rubygems.org/](https://rubygems.org/)...........
Fetching gem metadata from [https://rubygems.org/](https://rubygems.org/)..
Fetching kaminari-core 1.1.1
Installing kaminari-core 1.1.1
Fetching kaminari-actionview 1.1.1
Installing kaminari-actionview 1.1.1
Fetching kaminari-activerecord 1.1.1
Installing kaminari-activerecord 1.1.1
Fetching kaminari 1.1.1
Installing kaminari 1.1.1
Bundle complete! 18 Gemfile dependencies, 82 gems now installed.

2、修改posts_controller.rb文件中的show_posts方法,将要分页的对象集合加上.page(params[:page]).per(10),其中10代表每页显示10条


#原代码
@comments = Comment.where(post_id:post_id,as_type:0).order(updated_at: :desc)
#改为
@comments = Comment.where(post_id:post_id,as_type:0).order(updated_at: :desc).page(params[:page]).per(10)


3、新建partial文件views/posts/_show_posts.html.erb,将show_posts.html.erb中需要分页的内容(即@comments遍历里面的内容)分离到partial文件_show_posts.html.erb中


<% @comments.each do |comment| %>
  <div class="reply clearfix">
    <div class="avatar">
      <!-- get_account_name方法在comment.rb文件中已经定义,用来获取评论者的用户名 -->
      <a><%= comment.get_account_name %></a>
    </div>
    <div class="body">
      <!-- 评论status为0时代表正常显示,不为0是代表已经被删除,被删除的评论需要显示为「该评论已删除」 -->
      <span id="content_<%= comment.id %>">
      <% if comment.status == 0 %>
        <div><%= comment.content %></div>
      <% else %>
        <div class="delete-content">该评论已删除</div>
      <% end %>
      </span>
      <div class="time_right">
        <!-- 获取评论的创建时间 -->
        <%= comment.get_created_at %>
        <!-- 已被删除的帖子不显示回复链接 -->
        <span id="time_<%= comment.id %>">
        <% if comment.status == 0 %>
          <a id="reply<%= comment.id %>" onclick="outIn(<%=comment.id%>,<%=comment.id%>)">回复</a>
        <% end %>
        </span>
      </div>
      <div id="reply_page_<%= comment.id %>">
        <!-- 可以通过re_comment_id字段找到,这个评论下面所有的回复 -->
        <% @reply = Comment.where(re_comment_id:comment.id,as_type:1) %>
        <!-- 我们只默认展示两条回复,需要查看更多回复,需要点击查看更多回复
        @reply.limit(2)的意思是只选择查询结果的前两条数据 -->
        <% @reply.limit(2).each do |re| %>
          <div class="re-reply">  
            <a><%= re.get_account_name %></a>
            <!-- 如果回复的是评论的回复,该回复用户名后面需要跟被回复用户的用户名,re_reply_id字段保存被回复用户的id;如果直接回复评论,那么回复用户名后面直接跟回复内容,re_reply_id字段为空。-->
            <% if re.re_reply_id.blank? %>
              :
            <% else %>
              回复 <a><%= Comment.find(re.re_reply_id).get_account_name %></a> :
            <% end %>
            <span id="content_<%= re.id %>">
            <% if re.status == 0 %>
              <span><%= re.content %></span>
            <% else %>
              <span class="delete-content">该评论已删除</span>
            <% end %>
            </span>
            <div class="time_right">
              <%= re.get_created_at %>
              <span id="time_<%= re.id %>">
              <% if re.status == 0 %>
                <!-- outIn方法控制回复框,当客户点击回复按钮,出现回复框,
              回复变成取消回复,点击取消回复,回复框收起 -->
                <a id="reply<%= re.id %>" onclick="outIn(<%= comment.id %>,<%=re.id%>)"> 回复</a>
              <% end %>
              </span>
            </div>
          </div>
        <% end %>
      </div>
      <!-- 当该评论的回复大于两条时,下面会有「查看更多回复」的链接,点击会查看到更多回复
    主要通过js的控制点击查看更多回复,后面会讲到 -->
      <% if @reply.count > 2 %>
        <a id="spread-out" name="1" data-remote="true" href="#">更多<%= @reply.count - 2 %>条回复 ↓</a>
      <% end %>
    </div>
    <!-- 回复框的内容 -->
    <%= form_for Comment.new,url: "#" do |f| %>
      <!-- 给每个评论的回复框的id都加上comment.id,这样每个评论都有唯一的id,这样才能通过js控制回复框出现在相应的评论下 -->
      <div class="comment-form reply-from" id="co-reply<%= comment.id %>" style="display:none;">
        <input type="text" name="comment" placeholder="写下你的回复..." class="comment-text">
        <div class="comment-submit">
          <input type="submit" value="回复" class="submit-issue-button btn btn-primary">
        </div>
      </div>
    <% end %>
  </div>
  <%end%>


4、在partial文件_show_posts.html.erb文件的底部加上下面代码,会在页面上显示分页的样式。


<div class="dataTables_paginate">
  <%= paginate @comments,:remote => true %>
</div>  


代码解析:


<%= paginate @comments,:remote => true %>


其中@comments为需要分页的对象集合


其中:remote => true,是实现ajax,这样点击分页的时候,会调用对应方法的js.erb模板,实现局部刷新。


5、修改views/posts/show_posts.html.erb文件,在刚刚分类出partial文件的代码位置添加render,加载partial文件


<%= render :partial => "/posts/show_posts"%>


6、创建views/posts/show_posts.js.erb文件,粘贴下列代码。


$("#data_content").html('<%= j render "/posts/show_posts" %>');


代码解析:


每次点击分页的时候,都会调用这个show_posts.js.erb文件,文件会加载某一页的内容。


这句代码的意思为,在id为”data_content”的标签中,加载partial文件_show_posts.html.erb里面的内容。


render前面的 j 是escape_javascript的缩写,意思是为javascript片段去掉字符串中的回车符,单引号,双引号


7、创建config/locales/zh_CN.yml文件,添加下面代码,将项目中对应的英文自动转换成中文


zh-CN:
  views:
    pagination:
      first: "首页"
      last: "尾页"
      previous: "上一页"
      next: "下一页"
      truncate: "..."


代码解析:


first: "首页"


表示views文件夹中,class元素为pagination标签包含的内容中,如果为「first」自动显示为「首页」


8、在 Rails 项目的 config/application.rb 文件中写上下面代码,将默认语言设为中文,就大功告成了~


config.i18n.default_locale = :'zh-CN'


实现分页功能总结:


A、先安装gem插件kaminari,在配置文件中配置好对应的配置。


B、在controller文件中将要分页的集合后面添加.page(params[:page]).per(n)


C、将html.erb文件中需要分页的对象集合的部分提取到partial文件中,并且在partial文件的后面加上分页代码<%= paginate @comments,:remote => true %>


D、最后创建同名js.erb文件,写上加载partial文件的代码。

分页功能就完成了~~


分页功能参考:

https://github.com/kaminari/kaminari



目录
相关文章
|
3月前
|
前端开发 测试技术 数据库
使用Ruby on Rails进行快速Web开发的技术探索
【8月更文挑战第12天】Ruby on Rails以其高效、灵活和易于维护的特点,成为了快速Web开发领域的佼佼者。通过遵循Rails的约定和最佳实践,开发者可以更加专注于业务逻辑的实现,快速构建出高质量的Web应用。当然,正如任何技术框架一样,Rails也有其适用场景和局限性,开发者需要根据项目需求和个人偏好做出合适的选择。
|
3月前
|
前端开发 测试技术 API
揭秘Ruby on Rails的神秘力量:如何让你的Web应用飞起来?
【8月更文挑战第31天】Ruby on Rails(简称RoR)是一个基于Ruby语言的开源Web应用框架,自2005年发布以来,因简洁的语法、强大的功能和高效的开发效率而广受好评。RoR采用MVC架构,提高代码可读性和可维护性,拥有庞大的社区和丰富的库支持。本文通过示例代码展示其强大之处,并介绍RoR的核心概念与最佳实践,帮助开发者更高效地构建Web应用。
42 0
|
3月前
|
前端开发 API C++
在Ruby世界中寻找你的Web框架灵魂伴侣:Rails vs Sinatra
【8月更文挑战第31天】在Ruby的世界里,选择Web框架如同挑选衣物,需根据场合和需求。Rails与Sinatra是两大热门框架,前者以其“约定优于配置”理念和全面的功能成为企业级应用的首选;后者则以轻量级和灵活性著称,适用于快速原型开发和小规模应用。通过对比两者特性,如Rails的MVC架构与Sinatra的简洁API,我们可以看到它们各有所长。选择合适的框架,如同找到旅途中的最佳伙伴,让开发之路更加顺畅愉悦。这场探索之旅教会我们,没有绝对的好坏,只有最适合的选择。
34 0
|
3月前
|
安全 前端开发 数据安全/隐私保护
如何在Ruby on Rails中打造坚不可摧的OAuth认证机制
【8月更文挑战第31天】在构建现代Web应用时,认证与授权至关重要。本文介绍如何在Ruby on Rails中实现OAuth认证,通过使用`omniauth`和`devise` gems简化流程。首先安装并配置相关gem,接着在`User`模型中处理OAuth回调,最后设置路由及控制器完成登录流程。借助OAuth,用户可使用第三方服务安全地进行身份验证,提升应用安全性与用户体验。随着OAuth标准的演进,这一机制将在Rails项目中得到更广泛应用。
48 0
|
4月前
|
SQL 安全 数据库
Ruby on Rails 数据库迁移操作深度解析
【7月更文挑战第19天】Rails 的数据库迁移功能是一个强大的工具,它帮助开发者以版本控制的方式管理数据库结构的变更。通过遵循最佳实践,并合理利用 Rails 提供的迁移命令和方法,我们可以更加高效、安全地管理数据库结构,确保应用的稳定性和可扩展性。
|
6月前
|
Ruby
|
6月前
|
Ruby
|
6月前
|
JSON 数据格式 Ruby
|
6月前
|
调度 Ruby
|
6月前
|
存储 JSON 数据格式