本教程旨在指导开发者如何在Ruby on Rails应用中将后端数据库数据传递给前端JavaScript。文章将详细介绍两种主要方法：利用HTML5 `data`属性进行小规模数据传输，以及使用Gon Gem处理大规模或复杂数据。通过示例代码和注意事项，帮助读者选择最适合其场景的数据传递策略，确保数据传输的效率和安全性。

将Rails数据库数据传递给JavaScript：策略与实践

在现代Web开发中，前端JavaScript经常需要与后端Ruby on Rails应用中的数据库数据进行交互，以实现动态的用户界面和丰富的功能。本文将探讨在Rails环境中将数据库数据安全、高效地传递给JavaScript的两种主要策略。

1. 使用HTML5 Data Attributes

对于少量或结构相对简单的数据，HTML5的 data 属性是一种直接且无需额外依赖的方法。你可以将序列化后的Ruby对象直接嵌入到HTML元素的 data-* 属性中，然后通过JavaScript进行读取和解析。

实现步骤：

  1. 在Rails视图中准备数据： 在 .html.erb 视图文件中，将Rails控制器中获取的数据（例如 @contents）转换为JSON格式，并赋值给一个HTML元素的 data-* 属性。

    

    <%= notice %>
    


    Contents
    


">

    说明：

    • json %> 会将 @contents 对象（例如一个Active Record集合或数组）序列化为JSON字符串。
    • jQuery 的 .data('contents') 方法会自动解析JSON字符串为JavaScript对象，无需手动 JSON.parse()。如果使用原生JavaScript，则需要 JSON.parse(element.dataset.contents)。

  2. 在JavaScript中访问数据： 一旦数据嵌入到HTML中，JavaScript就可以通过DOM操作来获取并使用这些数据。

    // 假设上述  元素已经存在于DOM中
// 使用 jQuery
var contentsHash = $('#contents').data('contents');
console.log(contentsHash[0].title); // 示例：访问第一个元素的标题

// 如果不使用 jQuery，使用原生 JavaScript
// const contentsElement = document.getElementById('contents');
// if (contentsElement) {
//     const contentsJsonString = contentsElement.dataset.contents;
//     const contentsArray = JSON.parse(contentsJsonString);
//     console.log(contentsArray[0].title);
// }

优点：

  • 简单直接： 无需额外Gem，易于理解和实现。
  • 适用于小型数据： 对于少量、静态的数据传输非常有效。

缺点：

  • 页面膨胀： 大量数据会导致HTML页面体积增大，影响加载性能。
  • 维护性： 将大量数据嵌入HTML可能使视图文件变得臃肿，降低可读性和维护性。
  • 数据类型限制： 主要适合JSON可序列化的数据。

2. 使用Gon Gem

对于需要传输大量数据、复杂数据结构，或者希望在JavaScript中访问Rails控制器或视图中定义的变量时，Gon Gem 提供了一个更优雅和强大的解决方案。它允许你在Rails控制器中定义变量，并在JavaScript中直接访问这些变量，就像它们是全局变量一样。

实现步骤：

  1. 安装Gon Gem： 将Gon Gem添加到你的 Gemfile 中，并运行 bundle install。

    # Gemfile
gem 'gon'
    bundle install

  2. 配置Gon： 在 application.html.erb 或其他布局文件中，包含Gon的JavaScript标签。通常放在

    标签的底部或 的顶部，确保在你的JavaScript代码之前加载。
    

  ...
  <%= javascript_importmap_tags %>
  
  <%= include_gon %> 


  ...

  3. 在Rails控制器中传递数据： 在你的控制器动作中，使用 gon. 对象来设置你希望传递给JavaScript的变量。

    # app/controllers/your_controller.rb
class YourController < ApplicationController
  def index
    @contents = Content.all # 假设 Content 是你的模型
    gon.contents = @contents.as_json # 将数据赋值给 gon 对象
    # gon.user_name = current_user.name # 也可以传递其他变量
  end
end

    说明：

    • as_json 方法比 to_json 更灵活，它允许你定义哪些属性应该被包含或排除。

  4. 在JavaScript中访问数据： 在你的JavaScript文件中，可以直接通过 gon 全局对象访问这些变量。

    // public/assets/your_script.js 或在  雄杰鑫电商资讯网 版权所有  鄂ICP备2024084503号