向 Rails 应用程序添加 JavaScript 资源

添加控制器

1. 请按 Ctrl 两次并开始键入 controller。 在调用的列表中，选择 rails generate controller 并按 Enter。

   

2. 在调用的 添加新控制器 对话框中，将控制器名称设置为 Welcome ，并添加一个名为 index的操作。 点击 确定。

   

3. RubyMine 将创建一个控制器、视图及其他几个文件。 此过程将显示在 Run 工具窗口中。 在此窗口中，点击 index.html.erb 文件。

   

4. 要将应用程序的首页设置为 index ，请打开 config/routes.rb 文件，并在 Rails.application.routes.draw do ... end 块中添加以下行：

   root 'welcome#index'

   了解更多信息，请参见 Setting the Application Home Page。

更新视图

首先，需要在视图中添加一个按钮。 JavaScript 代码将通过默认的 Rails JavaScript 设置单独关联。

1. 打开 app/views/home/index.html.erb 文件。

2. 请添加以下代码：

   <h1>Hello, Rails!</h1> <button id="greet-user-button">Hello!</button>

   除了 h1 标记中的现有 static 文本外，视图文件现在还包含一个具有特定标识符、将被 JavaScript 使用的按钮元素。

添加 JavaScript 处理程序

现在，创建一个用于处理按钮点击的 JavaScript 文件。

1. 在 Project 视图中， Alt+1 ，选择 app/javascript 目录。

2. 按 Alt+Insert 并选择 JavaScript 文件。

   

3. 指定文件名称（hello ），然后按 Enter。

   

4. 在创建的 hello.js 文件中，添加以下代码：

   const button = document.getElementById("greet-user-button") if (button) { button.addEventListener("click", () => { alert("Hello!, JavaScript!") }) }

   在该脚本中：

   • 通过标识符查找按钮。

   • 添加点击处理程序，使其显示警告并将消息日志输出到控制台。

5. 为了让该文件在应用程序中可用，请打开 app/javascript/application.js 并添加：

   import "hello"

6. 请确保应用程序布局包含 JavaScript 资源。 打开 app/views/layouts/application.html.erb 并确认其包含：

   < %= javascript_importmap_tags %>

7. 打开 config/importmap.rb 文件并添加以下行：

   pin "hello"

启动网络服务器

要查看我们的应用程序运行效果，您需要启动 Web 服务器。

1. 按 Ctrl 两次并开始键入 开发。

2. 选择 开发 运行配置并按 Enter。

   

3. RubyMine 将展示准备运行应用程序的过程。

   

4. 在浏览器中打开 http://127.0.0.1:3000 。 然后点击 您好! 按钮即可看到警告。