【Ruby on Rails全栈课程】4.1 点赞功能

1、功能描述：

（1）一个用户对同一帖子只能点赞一次，点击第二次是取消赞
（2）用户不刷新页面的时候，点赞时当前页面相应贴子的点赞数+1，图标变成fa-thumbs-up，取消赞时当前页面相应帖子的点赞数-1，图标变成fa-thumbs-o-up，不受其他用户同时点赞操作的影响，这需要js来控制。
C、用户必须登录才能给帖子点赞。没有登录的话，点赞需要提醒登录。(在3.10章第3节已经实现了 if @current_user)

2、创建thumbs表来保存点赞信息，表结构如下:

字段名	字段说明	字段类型	备注
account_id	用户id	integer	必填
post_id	帖子id	integer	必填
is_thumb	点赞状态	boolean	必填

3、执行命令创建thumbs表格

#产生映射文件
/vagrant/data_symtem$ rails g model thumb account_id:integer post_id:integer is_thumb:boolean
#系统返回信息
    create    db/migrate/20181031104807_create_thumbs.rb
    create    app/models/thumb.rb
    invoke    test_unit
    create      test/models/thumb_test.rb
    create      test/fixtures/thumbs.yml
#将映射文件映射到数据库
/vagrant/data_symtem$ rake db:migrate
#系统返回信息
 == 20181031104807 CreateThumbs: migrating =====================================
 -- create_table(:thumbs)
   -> 0.0137s
 == 20181031104807 CreateThumbs: migrated (0.0153s) ============================

4、在routes.rb文件中添加路由，来指定点击点赞按钮，调用的action以及定义要传递给action的参数

 get 'posts/create_thumb/:post_id/:is_thumb' => 'posts#create_thumb'

代码解析：

• get 'posts/create_thumb/:post_id/:is_thumb' => 'posts#create_thumb'
  后面跟的/:post_id/:is_thumb是通过链接跳转传递的参数，在routes中定义参数，在views中给参数赋值，最后可在controller中通过param[:post_id]取出参数

5、在posts_controller.rb文件中添加方法create_thumb

def create_thumb
  post_id = params[:post_id]
  is_thumb = params[:is_thumb]
  account_id = @current_user.id
  thumb = Thumb.find_or_create_by(account_id:account_id,post_id:post_id)
  if is_thumb == "0"
    thumb.is_thumb = false
  elsif is_thumb == "1"
    thumb.is_thumb = true
  end
  thumb.save
end

代码解析：

• is_thumb = params[:is_thumb]
  :is_thumb是通过/posts/create_thumb/:post_id/:is_thumb链接传递过来的参数，is_thumb为0代表取消点赞，为1代表点赞

• thumb = Thumb.find_or_create_by(account_id:account_id,post_id:post_id)
  假设account_id为1，post_id为3，此行代码的意思是查找Thumb表中是否有account_id为1，post_id为3对应的数据，有的话，直接查找出来，没有的话，就创建一个account_id为1，post_id为3的thumb数据。

6、编辑app/models/post.rb文件中get_thumbs、get_thumb_info方法，用来获取帖子的点赞数，以及判断当然用户是否给该帖子点过赞

#获取点赞数
def get_thumbs
  num = Thumb.where(post_id:self.id,is_thumb:true).count
end

#获取此用户是否给该帖子点过赞，默认为未点过
def get_thumb_info(account_id)
  thumb = Thumb.find_by(post_id:self.id,account_id:account_id)
  boolean = false
  if thumb && thumb.is_thumb
    boolean = true
  end
end

代码解析：

• num = Thumb.where(post_id:self.id,is_thumb:true).count
  代码中的self代表当前调用该方法的实例对象，这里的self指的是Post对象

7、编辑views/home/index.html.erb文件，在最下面加上js方法

当点击点赞<a>标签，会调用js方法praiseReplay(oldTotal)，oldTotal代表点赞<a>标签。
如果oldTotal中的class元素为fa fa-thumbs-up(已点赞图标),说明当前用户已给该贴点过赞了,本次点击是需要将赞取消,将class元素换成fa fa-thumbs-o-up(未点赞图标)，将oldTotal里面的内容innerHTML(即当前点赞数)减1，将href元素中传递的is_thumb参数换成0，这样在页面点赞数减1之后，后台数据库中的数据会和页面同步。

<script type="text/javascript">
  function praiseReplay(oldTotal){
    if(oldTotal.className == "fa fa-thumbs-up")
    {
      oldTotal.className = "fa fa-thumbs-o-up";
      var oldValue = oldTotal.innerHTML;
      oldTotal.innerHTML = " " + (parseInt(oldValue) - 1);
      href = oldTotal.href
      oldTotal.href = href.substring(0, href.length - 1) + "0"
    }
    else
    {
      oldTotal.className = "fa fa-thumbs-up";
      var oldValue = oldTotal.innerHTML;
      oldTotal.innerHTML = " " + (parseInt(oldValue) + 1);
      href = oldTotal.href
      oldTotal.href = href.substring(0, href.length - 1) + "1"
    }
  }
</script>

8、编辑views/home/index.html.erb文件，调用js方法

<!--原代码-->
<a data-remote="true" href="#" id="reduce" class="fa fa-thumbs-up">
<!--改为-->
<a data-remote="true" href="/posts/create_thumb/<%= p.id %>/0" id="reduce" class="fa fa-thumbs-up" onclick="praiseReplay(this)">

<!--原代码-->
<a data-remote="true" href="#" id="increase" class="fa fa-thumbs-o-up">
<!--改为-->
<a data-remote="true" href="/posts/create_thumb/<%= p.id %>/1" id="increase" class="fa fa-thumbs-o-up" onclick="praiseReplay(this)">

代码解析：

• <a data-remote="true" href="/posts/create_thumb/<%= p.id %>/0" id="reduce" class="fa fa-thumbs-up" onclick="praiseReplay(this)">
  当a标签中同时有href、onclick两个元素时，先执行onclick中的方法，再执行a标签，所以这句代码的意思为：先执行onclick中的praiseReplay方法，将页面上的赞数减1（此时数据库里面的数据还没变），然后在通过a标签链接找到posts_controller中的create_thumb方法，通过 /<%= p.id %>/0 这两个参数找到Thumb表中的对应数据，将这条数据的is_thumb字段改为false