使用Rails Serializer通过has_many关系渲染数据。
#javascript #react #ruby #rails

您是否曾经需要获取单个模型数据,还需要该模型与其他模型的关系中包含的数据?

使用Rails作为后端API服务器,我们可以在要渲染的数据中磨练并发送到我们的前端应用程序。说我们有以下关系:
用户:

  has_many :comments
    has_many :posted_pets, :class_name => "Pet", :foreign_key => "user_id"
    has_many :pets, through: :comments

宠物:

  belongs_to :user
    has_many :comments, dependent: :delete_all
    has_many :users, through: :comments

评论:

    belongs_to :user
    belongs_to :pet

这些关系确定用户使用别名有许多宠物,并且有许多属于宠物的评论。

应用程序的前端我们的需求是,我们想显示一个带有评论列表的宠物,单个评论将显示评论用户用户名,如下:

Image description

我们的第一个任务是渲染PET模型数据,但我们想确定要渲染到应用程序前端的内容。为此,我们使用序列化器。要使用Rails创建一个序列化器,我们需要在终端rails g serializer pet中包括以下内容。您会注意到序列化器“宠物”的名称是单数的。这遵循适当的命名约定,以确保将此序列化器用作“ PET”模型的默认序列化器。让我们看一下现在生成的“宠物”的序列化器。

Image description

序列化器允许我们控制将渲染到前端的属性。假设我们有一个发现的地址属性,我们不想在应用程序的前端显示。我们可以在序列化器中排除此属性,以防止数据呈现。

Image description

现在,当我们获取PET模型数据时,正在使用此序列化器。这是控制器将数据渲染到前端应用程序的瞥见。

   def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet,
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

但是,我们没有完成。回顾我们的前端图像,我们可以看到我们需要与宠物相关的注释数据。我们已经在模型中建立了关系,但是现在我们可以利用序列化器在渲染时包含关联的数据。喜欢:

Image description

现在,我们获得了宠物数据以及与宠物相关的所有注释数据。我们可以在这里停下来,但可以说我们还想控制我们呈现为前端的评论数据。为此,我们使用我们的rails g serializer comment为注释模型创建了另一个序列化器。让我们看看下面的外观:

Image description

利用此序列化器,我们仅在呈现数据时仅包括每个注释“:id”和“:body”。我们的宠物控制器不需要其他语法:

   def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet,
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

我们拥有宠物数据和评论数据,但是现在我们需要发布评论用户名的用户。为此,我们必须在控制器中包含更多语法,因为AMS或活动模型序列化器无法呈现深嵌套的数据。

一个简单的解决方案是“包括:”我们的宠物控制器中的数据这样:


    def show
        pet = Pet.find_by(id: params[:id])
        if pet
            render json: pet, include: ['comments', 'comments.user']
        else
            render json: {error: "Pet not found"}, status: :not_found 
        end 
    end

建立关系并利用AMS,我们最终可以将以下数据渲染到我们的前端:

Image description

多么惊人的功能!我希望这能帮助您了解更多有关AMS的信息。