编程语言
首页 > 编程语言> > Rails 7(Turbo 和 Hotwire):类似于 Reddit 的嵌套评论

Rails 7(Turbo 和 Hotwire):类似于 Reddit 的嵌套评论

作者:互联网

Rails 的最新主要版本为其开发人员带来了他们一直希望的东西:在编程方面尽可能地远离 JavaScript。

撇开玩笑不谈,自从 Rails 7 发布以来,我一直很着迷,我希望我也能在这篇文章中传达这种印象,我将在这篇文章中重新追溯我开发博客应用程序的步骤 - drumrolls!
我知道,我知道,对于编写博客的 Ruby on Rails 开发人员来说,这是一个巨大的惊喜,但请坦白,因为在这个应用程序中,我将以嵌套评论的形式应用新鲜出炉的  Rails 魔法,所有的操作都是热连线和涡轮增压!

(注意:我不会深入了解 Turbo Frames 或 Turbo Streams 是什么,因为那里有很多解释得很好的文章都专注于此,在这里用我自己的话重写会增加太多开销这篇文章)

(TLDR;赶时间的人的GitHub 存储库)

一开始,有 Rails Generator!

事不宜迟,让我们直接创建一个新的 Rails 7 应用程序(您可以rails -v事先在终端中运行来检查您机器的 Rails 版本,只是为了确保您安装了正确的版本——或者根本没有安装任何版本):

轨道新嵌套评论

在这篇文章中,我将只关注评论,因此其他一切都将只是一些好的 ole'Rails。
因此,让我们继续,从nested_comments根目录开始,让我们打开一个新终端并生成一个Post带有标题和内容的简单脚手架:

rails 生成脚手架帖子标题:字符串内容:文本标题:字符串内容:文本

以及Comment一个引用Post它所属的模型、一个内容和一个引用,parent以防一条评论是对另一条评论的回复:

rails 生成模型 Comment post:references parent:references content:text帖子:引用父:引用内容:文本

现在,在我们走得太远并运行数据库迁移之前,我们需要更改评论的那个,因为parent除非我们指定我们正在引用哪个表,否则目前没有意义,而且我们需要从中删除null: false约束它也是,因为评论并不总是必须是对另一条评论的回复:

 CreateComments < ActiveRecord::Migration [ 7.0 ] 
  def  change
     create_table :comments  do | | 
      t.references :post , null:  false , foreign_key: { on_delete:  :cascade } 
      t.references :parent , foreign_key: { to_table:  :comments , on_delete:  :cascade } 
      t.text :content

       t.timestamps 
    end 
  end 
end

comment.rb应更改模型以匹配更新的迁移

class  Comment < ApplicationRecord
   belongs_to :post , inverse_of:  :comments
   belongs_to :parent ,可选:  true , class_name:  'Comment' , inverse_of:  :comments

   has_many :comments , foreign_key:  :parent_id , dependent:  :destroy , inverse_of:  :parent 
end

正如您可能已经belongs_to :post从上面的行中注意到的那样,我们还必须在post.rb模型中添加关系:

 Post < ApplicationRecord
   has_many :comments , inverse_of:  :post 
end

最后,我们可以运行rails db:migrate以更新我们辛勤工作的数据库。

(有趣的事实:你知道即使命令本身也是一个生成器吗?你可以在技术上生成一个非常好的应用程序,但不要引用我的话)rails new

热门、有线和涡轮化

现在我们有了“MVC”中的“M”,让我们关注“C”——控制器。

在尝试查看模板和控制器之前,我喜欢做的是打开rails c控制台并创建一些虚拟对象:

post = Post.create(title: 'A Post', content: 'some post content')title:  'A Post' , content:  '一些帖子内容' ) 
parent = Comment.create( post: post, content:  'a comment' ) 
reply = Comment.create( post: post, parent: parent, content:  'a reply' ) 
Comment.create( post: post, parent: reply, content:  '另一个回复' ) 

Comment.create( post: post, content:  '另一个评论' )

然后让我们将即将到来的端点添加到routes.rb

Rails.application.routes.draw do
  资源:帖子
  资源:评论
结束

评论#index

在该目录下,让我们为帖子的评论app/controllers创建一个comments_controller.rb带有操作的新目录。index

 CommentsController < ApplicationController
   before_action :set_post 

  def  index 
    @comments = @post .comments 
  end

   private 

  def  set_post 
    @post = Post.find_by( id: params[ :post_id ]) 
  end 
end

这对所有端点都有意义set_post,因为在我们处理评论的任何步骤中,它都来自帖子。

作为第一步,我们想要实现的是,在帖子下将所有评论都放在另一个下面(还没有嵌套……还!)。因此,让我们最终涡轮增压

标签:Rails,JavaScript,Comment,数据库,编写,
来源: