9 months ago

作业要求: 实作“扣分”按钮、Topics按投票得分排序、新增“About”页面,并且放置一个回主页的位置链接。(详见 教材:3-13 加分题 & 下一步)。 感谢全栈营学员 Raionhiro & Yammy分享教程!!!


解决思路:

  1. 在 初级练习 3-9 让大家可以投票 中有 “加分” 按钮的实作教程,可以分析参考模仿;
  2. “排序”功能实在没头绪只能找 Google ,找到 参考教程: 初级练习加分题,解决根据投票分数来排序topics 分析模仿,配合着教材: 2-1 基础 Ruby 步骤9 帮助理解;
  3. 新增 “About” 页面,并添加一个可以 “回到主页” 的链接;(参考教材: 4-2 实作讨论群“新增”功能 3-10 新增后能够回到 topics 列表
  4. 实作并做好需要修复bug的准备;
  5. 测试成功上传作业。

具体步骤:

一、实作 “扣分” 按钮功能
  • 创建 “扣分” 按钮 ,修改 app/views/topics/index.html.erb
app/views/topics/index.html.erb
  <tbody>
    <% @topics.each do |topic| %>
      <tr>
        <td><%= link_to topic.title, topic %></td>
        <td><%= pluralize(topic.votes.count, "vote") %></td>
        <td><%= button_to '+1', upvote_topic_path(topic), method: :post %></td>
+       <td><%= button_to '-1', downvote_topic_path(topic), method: :post %></td>
        <td><%= link_to 'Delete', topic, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
  • 实作 “减分” 功能
1.加一个新的 controller action 来投票 “减分”,修改 app/controllers/topics_controller.rb ,在 def upvote 下面 添加几行代码:
app/controllers/topics_controller.rb
def downvote
  @topic = Topic.find(params[:id])
  @topic.votes.last.destroy
  redirect_to(topics_path)
end
2.给 “扣分” 操作加一个 route ,修改 config/routes.rb,在 post 'upvote' 下面 添加一行代码:
config/routes.rb
Rails.application.routes.draw do
  resources :topics do
    member do
      post 'upvote'
+     post 'downvote'
    end
  end
  root 'topics#index'
end

到这里,你可以访问 http://localhost:3000/topics 试一试 “扣分” 按钮,是否已经成功啦?


二、实作 “排序” 功能

修改 app/views/topics/index.html.erb ,找到 <tbody> 下的 <% @topics.each do |topic| %> 修改代码:

app/views/topics/index.html.erb
  <tbody>
-   <% @topics.each do |topic| %>
+   <% @topics.sort_by {|topic| -topic.votes.count}.each do |topic| %>
      <tr>
        <td><%= link_to topic.title, topic %></td>
        <td><%= pluralize(topic.votes.count, "vote") %></td>
        <td><%= button_to '+1', upvote_topic_path(topic), method: :post %></td>
        <td><%= button_to '-1', downvote_topic_path(topic), method: :post %></td>
        <td><%= link_to 'Delete', topic, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>

讲解:topic.votes.count 是按照投票总数从小到大排列,加一个 “-” ,就是相反的排序。


到这里,你可以访问 http://localhost:3000/topics 试一试 “排序” 功能,是否已经成功了呢?


三、新增 “About” 页面,并添加一个可以 “回到主页” 的链接
  • 新增 "About" 页面

在 终端机(Terminal) 中敲: touch app/views/topics/about.html.erb

Atom 修改 app/views/topics/about.html.erb

app/views/topics/about.html.erb
<h1>About</h1>
<p>Welcome to the About page!</p>
<%= link_to 'Back', topics_path %>
  • 在主页(index)增加一个 about 按钮 ,并设置跳转链接

修改 app/views/topics/index.html.erb

app/views/topics/index.html.erb
  
  <br>

  <%= link_to 'New Topic', new_topic_path %>

+ <br>

+ <%= link_to 'About', about_path %>

  • route.rb 中 , 将 about 按钮指向 about 页面

修改 config/route.rb ,添加一行代码:

config/route.rb
Rails.application.routes.draw do
  resources :topics do
    member do
      post 'upvote'
      post 'downvote'
    end
  end
  root 'topics#index'
+ get 'about' => 'topics#about'
end

  • app/controllers/topics_controller.rb 中增加 about method ,添加两行代码:
app/controllers/topics_controller.rb
  def upvote
    @topic = Topic.find(params[:id])
    @topic.votes.create
    redirect_to(topics_path)
  end

  def downvote
    @topic = Topic.find(params[:id])
    @topic.votes.last.destroy
    redirect_to(topics_path)
  end

+ def about
+ end
到这里, “About” 页面也已经做好啦!快访问 http://localhost:3000/topics 试试看吧!


四、Debug 阶段
这样是不是就已经完成了呢?其实,并没有!!!
在测试时发现:当投票减分低于0时会出 Bug !!!(参考教程: RailsBridge_初探Rails加分題

原因应该是扣分操作没有进行低于0的条件限制。

修改 app/controller/topics_controller.rb , 增加条件限制

app/controller/topics_controller.rb
  def downvote
    @topic = Topic.find(params[:id])
+  @topic.votes.last.destroy if @topic.votes.count > 0
    redirect_to(topics_path)
  end


到这里,这份作业才真正完成了,赶紧截图上传作业吧!!!

← [学习笔记08] Rails 初级练习 第三回 [学习笔记20]开启走向全栈工程师之路 →
 
comments powered by Disqus