【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.rbcreate    app/models/thumb.rbinvoke    test_unitcreate      test/models/thumb_test.rbcreate      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_thumbpost_id = params[:post_id]is_thumb = params[:is_thumb]account_id = @current_user.idthumb = Thumb.find_or_create_by(account_id:account_id,post_id:post_id)if is_thumb == "0"thumb.is_thumb = falseelsif is_thumb == "1"thumb.is_thumb = trueendthumb.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_thumbsnum = 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 = falseif thumb && thumb.is_thumbboolean = trueend
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.hrefoldTotal.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.hrefoldTotal.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

【Ruby on Rails全栈课程】4.1 点赞功能相关推荐

【Ruby on Rails全栈课程】3.1 宠物之家论坛管理系统介绍
学完第二章之后,我们就要开始写项目啦.我们对ruby的了解仅仅还是数组.字符串这些零散的知识,现在通过项目来把这些知识串起来,学习这些知识在实际项目中的应用. 本章学习建议: (1)一个完整的项目不仅 ...
【Ruby on Rails全栈课程】4.3 评论功能实现（二）--创建帖子详情页面
1.完善样式,用来显示帖子详情以及评论信息等,编辑app/assets/stylesheets/posts.scss文件,在原有代码下面添加代码: .head {font-size: 18px;fon ...
【Ruby on Rails全栈课程】3.5 注册功能
注册页面成功显示之后,我们开始实现注册功能~~ 1.功能描述 (1)注册时需要填写信息:用户名.邮箱.密码.确认密码.选择角色 (2)用户角色分为普通用户.管理员.超级管理员,后期方便对用户进行权限管 ...
Bootstrap实战练习---Web全栈课程体系(表格+巨幕)
Bootstrap实战练习-Web全栈课程体系(表格+巨幕) 原网页效果图连接我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> ...
Day29 PythonWeb全栈课程课堂内容
Day29 PythonWeb全栈课程课堂内容 1.Redis 前言介绍 1.1 磁盘和内存的介绍 1.2 Redis背景 1.3 Redis发展历史 1.4 Redis 是什么? 1.5 Redis ...
Day7 PythonWeb全栈课程课堂内容
文章目录 1. 黏包 2. HTTP 3. 查看HTTP协议的通信过程 4. 静态web服务器 1. 黏包当发送网络数据时,tcp协议会根据Nagle算法将时间间隔短,数据量小的多个数据包打包成一个 ...
【Web全栈课程5】jsonp简单使用
jsonp 由于安全原因(过于开放),使用在减少,可以用来跨域以百度的一个请求举例,说明如何使用jsonp: "https://sp0.baidu.com/5a1Fazu8AA54nxGk ...
python 全栈开发，Day82(点赞和踩灭,用户评论)
一.点赞和踩灭样式先来做样式,修改article_detail.html,增加div_digg的div {% extends "base.html" %}{% block co ...
合肥python培训-合肥Python测试开发全栈核心课程
从初级的手工测试到.顶端的测试开发,大家都希望能不断的进行技术的提升,而就目前的现状而言,在企业内部不愿意花费成本去进行高级人才的培养,企业更愿意花高薪招聘高级技术人才,而我们希望能够在工作中不断提升 ...

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

1、功能描述：

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

3、执行命令创建thumbs表格

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

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

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

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

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

【Ruby on Rails全栈课程】4.1 点赞功能相关推荐

最新文章

热门文章