0
点赞
收藏
分享

微信扫一扫

【Ruby on Rails全栈课程】4.5 评论功能实现(四)--创建评论、另一种传参方式


1、在routes.rb文件中添加路径

post 'posts/create_comment' => 'posts#create_comment'

post和get的区别:
GET和POST是HTTP请求的两种基本方法,
GET一般用于获取数据的,POST一般用于提交数据。

2、在posts_controller.rb文件中添加create_comment方法

def create_comment
end

3、修改views/posts/show_posts.html.erb文件。

将评论框的提交链接改成​​"/posts/create_comment”​​​,并通过​​<input type="hidden">​​提交post_id、as_type两个参数。

<!-- 评论框的内容 -->
<!-- 修改了url链接 -->
<%= form_for Comment.new,url: "/posts/create_comment" do |f| %>
<div class="comment-form" name="co-point" id="co-point">
<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>
<!-- 加上了下面这两行 -->
<input type="hidden" name="post_id" value="<%=@post.id%>">
<input type="hidden" name="as_type" value="0">
</div>
<% end %>

代码解析:

  • <input type="hidden" name="post_id" value="<%=@post.id%>">​​
    这是html的知识,我们大体讲解一下,在实际项目中,会常用到。
    在from表单中,点击submit提交按钮,input里面的内容会从服务器提交到后台,我们之前讲过,在ruby on rails中,获取从浏览器传过来数据的格式是params哈希格式,input标签中name元素的值作为哈希的键,value元素的值作为哈希的值。比如上面这句代码传递到后台时(假设@post.id的值为5),数据的格式就是{:post_id => 5 },然后我们在controller对应action中通过​params[:post_id]​就可以取到@post.id的值,为5。

views页面往controller传递参数的方式有两种:
这两种方式我们在项目中都应用过了,现在我们来举例总结一下:
举例:从前端往后台传递@post.id的值
A、通过我们本章应用的方式,通过form表单中​​​<input type="hidden" name="post_id" value="<%=@post.id%>">​​​的方式来提交参数。
B、通过链接传递参数,在本章的例子中,routes.rb文件中定义的路由需要改成​​​post 'posts/create_comment/:post_id' => 'posts#create_comment'​​​,然后form_for后面的链接也需要给链接加上参数​​<%= form_for Comment.new,url: "/posts/create_comment/<%=@post.id%>" do |f| %>​​ 这两种方式实现的效果是一样的。在实际项目中,推荐用第一种方式。

4、回复框代码完善
(1)修改partial文件views/posts/_show_posts.html.erb,回复框的提交链接也改成​​"/posts/create_comment”​​​,并且通过​​<input type="hidden">​​提交post_id、as_type、comment_id三个参数,通过js提交re_reply_id一个参数。

<!-- 回复框的内容 -->
<!-- 修改了url链接 -->
<%= form_for Comment.new,url: "/posts/create_comment" do |f| %>
<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>
<!-- 加上了下面这三行 -->
<input type="hidden" name="comment_id" value="<%=comment.id%>">
<input type="hidden" name="post_id" value="<%=comment.post_id%>">
<input type="hidden" name="as_type" value="1">
</div>
<% end %>

(2)完善show_posts.html.erb文件中的js方法outIn()

//参考代码,无需粘贴
//coReply.style.display = "block";
coReply.innerHTML = coReply.innerHTML + "<input type='hidden' name='re_reply_id' value='" + reply_id +"'>"
//参考代码,无需粘贴
//coA.innerHTML = "取消回复";

代码解析:
这句代码的意思为在coReply(代表回复框对象)中,添加代码"<input type='hidden' name='re_reply_id' value='" + reply_id +"'>",用来提交reply_id,也就是当前回复的Comment对象的id。
你可能会问,为什么我们不直接在回复框form表单中直接添加这句代码,而是通过js方法来添加呢?
这是因为回复框写在​<% @reply.limit(2).each do |re| %> <%end%>​循环的外面(views/posts/_show_posts.html.erb文件中),所以我们在form表单中获取不到当前Comment对象的id,只能通过js来获取被回复的Comment对象的id,然后用js将​<input type="hidden”>​语句插入到回复框标签中。

5、重启项目,刷新帖子详情页面,我们看一下提交评论框和回复框传递到后台的参数。
(1)在评论框中随便填写信息,点击评论框右侧的评论按钮,可以在终端返回日志中找到客户端提交给服务器的参数,如下所示:

Parameters: {"utf8"=>"✓","authenticity_token"=>"Nsy7IOf1Lj8QBRINx+9LDyOLp4bbONZnRtq3UvcK2P9OqZFb49armaL4HO7w==", "comment"=>"你好", "post_id"=>"1", "as_type"=>"0”}

其中comment为评论内容、post_id为当前评论帖子的id、as_type为评论的类型(0代表帖子的评论,1代表评论的回复)

(2)点击一下回复,出现回复框,再点击回复框随便填写信息,点击右侧的回复按钮,可以在终端返回日志中找到客户端提交给服务器的参数,如下所示:

Parameters: {"utf8"=>"✓", "authenticity_token"=>"CaJ9s4+n9fciGfb/48OzuyB639dUOijpYGRgoZJh43map9yVwvVMHIvWd/Cek7r6g==", "comment"=>"", "comment_id"=>"37", "post_id"=>"1", "as_type"=>"1", "re_reply_id"=>"37"}

其中comment为评论内容、comment_id为此回复所属as_type为0的评论id,post_id为当前评论帖子的id、as_type为评论的类型(0代表帖子的评论,1代表评论的回复)re_reply_id为被回复的as_type为1的评论的id

6、在controller中,完善create_comment方法

def create_comment
#将客户端提交的参数保存到变量中
as_type = params[:as_type].to_i
content = params[:comment]
post_id = params[:post_id]
#先判断当前是否有用户登录,没有登录需要提示登录
if @current_user.blank?
flash.notice = "您还未登录,请先登录!"
redirect_to "/posts/show_posts/#{post_id}"
#再判断评论内容是否为空,内容为空,提示并且返回到帖子详情页面
elsif content.blank?
flash.notice = "评论内容不能为空"
redirect_to "/posts/show_posts/#{post_id}"
else
#as_type参数为0时,说明是帖子的评论
if as_type == 0
#创建评论
boolean_0 = Comment.create(status:0,account_id:@current_user.id,as_type:as_type,content:content,post_id:post_id)
if boolean_0
flash.notice = "评论成功"
else
flash.notice = "评论失败,请重新评论"
end
#重定向到帖子详情页面
redirect_to "/posts/show_posts/#{post_id}"
#as_type参数为1时,说明是评论下面的回复
elsif as_type == 1
comment_id = params[:comment_id]
re_reply_id = params[:re_reply_id]
boolean_1 = Comment.create(status:0,account_id:@current_user.id,as_type:as_type,content:content,post_id:post_id,re_comment_id:comment_id,re_reply_id:re_reply_id)
if boolean_1
flash.notice = "回复成功"
else
flash.notice = "回复失败,请重新回复"
end
redirect_to "/posts/show_posts/#{post_id}"
end
end
end

【Ruby on Rails全栈课程】4.5 评论功能实现(四)--创建评论、另一种传参方式_服务器


举报

相关推荐

0 条评论