ruby on rails

介绍 (Introduction)

If you are working with a Ruby on Rails project, your requirements may include some interactivity with the HTML generated by your view templates. If so, you have a few choices for how to implement this interactivity.

如果您正在使用Ruby on Rails项目，那么您的需求可能包括与视图模板生成HTML的交互性。 如果是这样，您可以选择几种方式来实现这种交互性。

For example, you could implement a JavaScript framework like React or Ember. If your requirements include handling state on the client side, or if you are concerned about performance issues associated with frequent queries to the server, then choosing one of these frameworks may make sense. Many Single Page Applications (SPAs) take this approach.

例如，您可以实现一个JavaScript框架，例如React或Ember 。 如果您的要求包括在客户端上处理状态，或者您担心与服务器频繁查询相关的性能问题，那么选择这些框架之一可能是有意义的。 许多单页应用程序(SPA)都采用这种方法。

However, there are several considerations to keep in mind when implementing a framework that manages state and frequent updates on the client side:

但是，在实现用于管理客户端状态和频繁更新的框架时，需要牢记一些注意事项：

1. It’s possible for loading and conversion requirements — things like parsing JavaScript, and fetching and converting JSON to HTML — to limit performance. 可能需要满足加载和转换要求(例如解析JavaScript以及将JSON提取并将其转换为HTML)来限制性能。
2. Commitment to a framework may involve writing more code than your particular use case requires, particularly if you are looking for small-scale JavaScript enhancements.对框架的承诺可能涉及编写超出特定用例要求的代码，特别是在您正在寻找小规模JavaScript增强功能的情况下。
3. State managed on both the client and server side can lead to a duplication of efforts, and increases the surface area for errors.在客户端和服务器端管理的状态可能导致工作重复，并增加了错误的表面积。

As an alternative, the team at Basecamp (the same team that wrote Rails) has created Stimulus.js, which they describe as “a modest JavaScript framework for the HTML you already have.” Stimulus is meant to enhance a modern Rails application by working with server-side generated HTML. State lives in the Document Object Model (DOM), and the framework offers standard ways of interacting with elements and events in the DOM. It works side by side with Turbolinks (included in Rails 5+ by default) to improve performance and load times with code that is limited and scoped to a clearly defined purpose.

作为替代方案， Basecamp的团队(与编写Rails的团队相同)创建了Stimulus.js ，他们将其描述为“用于现有HTML的适度JavaScript框架”。 Stimulus旨在通过使用服务器端生成HTML来增强现代的Rails应用程序。 状态存在于文档对象模型(DOM)中 ，并且该框架提供了与DOM中的元素和事件进行交互的标准方式。 它与Turbolinks (默认情况下包含在Rails 5+中)并肩工作，以限制代码的范围和明确定义的目的，从而提高性能和加载时间。

In this tutorial, you will install and use Stimulus to build on an existing Rails application that offers readers information about sharks. The application already has a model for handling shark data, but you will add a nested resource for posts about individual sharks, allowing users to build out a body of thoughts and opinions about sharks. This piece runs roughly parallel to How To Create Nested Resources for a Ruby on Rails Application, except that we will be using JavaScript to manipulate the position and appearance of posts on the page. We will also take a slightly different approach to building out the post model itself.

在本教程中，您将安装并使用Stimulus在现有的Rails应用程序上构建，该应用程序为读者提供有关鲨鱼的信息。 该应用程序已经有一个用于处理鲨鱼数据的模型，但是您将为有关单个鲨鱼的帖子添加一个嵌套资源，从而允许用户建立有关鲨鱼的思想和观点。 这段代码与如何为Ruby on Rails应用程序创建嵌套资源大致平行，除了我们将使用JavaScript来操纵页面上帖子的位置和外观外。 我们还将采用略有不同的方法来构建邮政模型本身。

先决条件 (Prerequisites)

To follow this tutorial, you will need:

要遵循本教程，您将需要：

• A local machine or development server running Ubuntu 18.04. Your development machine should have a non-root user with administrative privileges and a firewall configured with ufw. For instructions on how to set this up, see our Initial Server Setup with Ubuntu 18.04 tutorial.

  运行Ubuntu 18.04的本地计算机或开发服务器。 您的开发机器应具有具有管理特权的非root用户，以及使用ufw配置的防火墙。 有关如何进行此设置的说明，请参阅我们的《 Ubuntu 18.04初始服务器设置》教程。

• Node.js and npm installed on your local machine or development server. This tutorial uses Node.js version 10.16.3 and npm version 6.9.0. For guidance on installing Node.js and npm on Ubuntu 18.04, follow the instructions in the “Installing Using a PPA” section of How To Install Node.js on Ubuntu 18.04.

  安装在本地计算机或开发服务器上的Node.js和npm 。 本教程使用Node.js 10.16.3版和npm 6.9.0版。 有关在Ubuntu 18.04上安装Node.js和npm的指导，请遵循如何在Ubuntu 18.04上安装Node.js的“使用PPA安装”部分中的说明。

• Ruby, rbenv, and Rails installed on your local machine or development server, following Steps 1-4 in How To Install Ruby on Rails with rbenv on Ubuntu 18.04. This tutorial uses Ruby 2.5.1, rbenv 1.1.2, and Rails 5.2.3.

  遵循在Ubuntu 18.04上如何使用rbenv安装Ruby on Rails的 步骤1-4中的步骤 ，将Ruby， rbenv和Rails安装在本地计算机或开发服务器上 。 本教程使用Ruby 2.5.1 ，rbenv 1.1.2和Rails 5.2.3 。

• SQLite installed, and a basic shark information application created, following the directions in How To Build a Ruby on Rails Application.

  按照如何构建Ruby on Rails应用程序中的指示安装SQLite，并创建基本的shark信息应用程序 。

第1步-创建嵌套模型 (Step 1 — Creating a Nested Model)

Our first step will be to create a nested Post model, which we will associate with our existing Shark model. We will do this by creating Active Record associations between our models: posts will belong to particular sharks, and each shark can have multiple posts.

我们的第一步将是创建一个嵌套的Post 模型 ，将其与我们现有的Shark模型关联。 我们将通过在模型之间创建Active Record 关联来做到这一点：帖子将属于特定的鲨鱼，每个鲨鱼可以有多个帖子。

To get started, navigate to the sharkapp directory that you created for your Rails project in the prerequisites:

首先，在先决条件中导航到为Rails项目创建的sharkapp目录：

To create our Post model, we’ll use the rails generate command with the model generator. Type the following command to create the model:

要创建我们的Post模型，我们将在model生成器中使用rails generate命令。 键入以下命令来创建模型：

With body:text, we’re telling Rails to include a body field in the posts database table — the table that maps to the Post model. We’re also including the :references keyword, which sets up an association between the Shark and Post models. Specifically, this will ensure that a foreign key representing each shark entry in the sharks database is added to the posts database.

通过body:text ，我们告诉Rails在posts数据库表(映射到Post模型的表)中包含body字段。 我们还包括:references关键字，它在Shark和Post模型之间建立了关联。 具体来说，这将确保将代表sharks数据库中每个鲨鱼条目的外键添加到posts数据库。

Once you have run the command, you will see output confirming the resources that Rails has generated for the application. Before moving on, you can check your database migration file to look at the relationship that now exists between your models and database tables. Use the following command to look at the contents of the file, making sure to substitute the timestamp on your own migration file for what’s shown here:

运行命令后，将看到输出确认Rails为应用程序生成的资源。 在继续之前，您可以检查数据库迁移文件以查看模型与数据库表之间现在存在的关系。 使用以下命令查看文件的内容，并确保将您自己的迁移文件上的时间戳替换为此处显示的内容：

You will see the following output:

您将看到以下输出：

class CreatePosts < ActiveRecord::Migration[5.2]def changecreate_table :posts do |t|t.text :bodyt.references :shark, foreign_key: truet.timestampsendend
end

As you can see, the table includes a column for a shark foreign key. This key will take the form of model_name_id — in our case, shark_id.

如您所见，该表包括一个用于显示鲨鱼外键的列。 该密钥将采用model_name _id的形式，在本例中为shark _id 。

Rails has established the relationship between the models elsewhere as well. Take a look at the newly generated Post model with the following command:

Rails在其他地方也建立了模型之间的关系。 使用以下命令查看新生成的Post模型：

class Post < ApplicationRecordbelongs_to :shark
end

The belongs_to association sets up a relationship between models in which a single instance of the declaring model belongs to a single instance of the named model. In the case of our application, this means that a single post belongs to a single shark.

belongs_to关联在模型之间建立关系，在该模型中，声明模型的单个实例属于命名模型的单个实例。 在我们的应用程序中，这意味着单个职位属于单个鲨鱼。

Though Rails has already set the belongs_to association in our Post model, we will need to specify a has_many association in our Shark model as well in order for that relationship to function properly.

尽管Rails已经在我们的Post模型中设置了belongs_to关联，但我们仍需要在Shark模型中指定has_many关联，以使该关系正常运行。

To add the has_many association to the Shark model, open app/models/shark.rb using nano or your favorite editor:

要将has_many关联添加到Shark模型， app/models/shark.rb使用nano或您喜欢的编辑器打开app/models/shark.rb ：

Add the following line to the file to establish the relationship between sharks and posts:

将以下行添加到文件中，以建立鲨鱼和职位之间的关系：

class Shark < ApplicationRecordhas_many :postsvalidates :name, presence: true, uniqueness: truevalidates :facts, presence: true
end

One thing that is worth thinking about here is what happens to posts once a particular shark is deleted. We likely do not want the posts associated with a deleted shark persisting in the database. To ensure that any posts associated with a given shark are eliminated when that shark is deleted, we can include the dependent option with the association.

值得考虑的一件事是，删除特定的鲨鱼后帖子会发生什么。 我们可能不希望与已删除的鲨鱼相关的帖子保留在数据库中。 为了确保在删除该鲨鱼后删除与该鲨鱼相关的所有帖子，我们可以在该关联中包括dependent选项。

Add the following code to the file to ensure that the destroy action on a given shark deletes any associated posts:

将以下代码添加到文件中，以确保对给定鲨鱼的destroy动作将删除所有关联的帖子：

class Shark < ApplicationRecordhas_many :posts, dependent: :destroyvalidates :name, presence: true, uniqueness: truevalidates :facts, presence: true
end

Once you have finished making these changes, save and close the file. If you are working with nano, do this by pressing CTRL+X, Y, then ENTER.

完成这些更改后，保存并关闭文件。 如果您使用的是nano ，请按CTRL+X ， Y ，然后按ENTER 。

You now have a model generated for your posts, but you will also need a controller to coordinate between the data in your database and the HTML that’s generated and presented to users.

现在，您已经为帖子生成了一个模型，但是您还需要一个控制器来协调数据库中的数据与生成并呈现给用户HTML之间的关系。

第2步-为嵌套资源创建控制器 (Step 2 — Creating a Controller for a Nested Resource)

Creating a posts controller will involve setting a nested resource route in the application’s main routing file and creating the controller file itself to specify the methods we want associated with particular actions.

创建发布控制器将涉及在应用程序的主路由文件中设置嵌套资源路由，并创建控制器文件本身以指定我们想要与特定操作关联的方法。

To begin, open your config/routes.rb file to establish the relationship between your resourceful routes:

首先，打开config/routes.rb文件以建立资源丰富的路由之间的关系：

Currently, the file looks like this:

当前，文件如下所示：

Rails.application.routes.draw doresources :sharksroot 'sharks#index'# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

We want to create a dependent relationship relationship between shark and post resources. To do this, update your route declaration to make :sharks the parent of :posts. Update the code in the file to look like the following:

我们想要在鲨鱼和职位资源之间创建一个依赖关系 。 为此，请更新您的路线声明以使:sharks为:posts的父级。 更新文件中的代码，如下所示：

Rails.application.routes.draw doresources :sharks doresources :postsendroot 'sharks#index'# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Save and close the file when you are finished editing.

完成编辑后，保存并关闭文件。

Next, create a new file called app/controllers/posts_controller.rb for the controller:

接下来，为控制器创建一个名为app/controllers/posts_controller.rb的新文件：

In this file, we’ll define the methods that we will use to create and destroy individual posts. However, because this is a nested model, we’ll also want to create a local instance variable, @shark, that we can use to associate particular posts with specific sharks.

在此文件中，我们将定义用于创建和销毁单个帖子的方法。 但是，因为这是一个嵌套模型，所以我们还想创建一个本地实例变量@shark ，我们可以使用它来将特定帖子与特定鲨鱼相关联。

First, we can create the PostsController class itself, along with two private methods: get_shark, which will allow us to reference a particular shark, and post_params, which gives us access to user-submitted information by way of the params method.

首先，我们可以创建PostsController类本身，有两个沿private方法： get_shark ，这将使我们引用一个特定的鲨鱼，和post_params ，这让我们用的方式获得用户提交的信息PARAMS方法 。

Add the following code to the file:

将以下代码添加到文件中：

class PostsController < ApplicationControllerbefore_action :get_shark privatedef get_shark@shark = Shark.find(params[:shark_id])enddef post_paramsparams.require(:post).permit(:body, :shark_id)end
end

You now have methods to get the particular shark instances with which your posts will be associated, using the :shark_id key, and the data that users are inputting to create posts. Both of these objects will now be available for the methods you will define to handle creating and destroying posts.

现在，您可以使用:shark_id键以及用户输入的用于创建帖子的数据，来获取与您的帖子相关联的特定鲨鱼实例的方法。 这两个对象现在都可用于您定义的用于处理创建和销毁帖子的方法。

Next, above the private methods, add the following code to the file to define your create and destroy methods:

接下来，在private方法上方，将以下代码添加到文件中，以定义您的create和destroy方法：

. . .def create@post = @shark.posts.create(post_params)enddef destroy@post = @shark.posts.find(params[:id])@post.destroy   end
. . .

These methods associate @post instances with particular @shark instances, and use the collection methods that became available to us when we created the has_many association between sharks and posts. Methods such as find and create allow us to target the collection of posts associated with a particular shark.

这些方法将@post实例与特定的@shark实例相关联，并使用在我们创建鲨鱼和帖子之间的has_many关联时可用的收集方法 。 find和create使我们可以定位与特定鲨鱼相关的职位集合。

The finished file will look like this:

完成的文件将如下所示：

class PostsController < ApplicationControllerbefore_action :get_shark def create@post = @shark.posts.create(post_params)enddef destroy@post = @shark.posts.find(params[:id])@post.destroy   endprivatedef get_shark@shark = Shark.find(params[:shark_id])enddef post_paramsparams.require(:post).permit(:body, :shark_id)end
end

Save and close the file when you are finished editing.

完成编辑后，保存并关闭文件。

With your controller and model in place, you can begin thinking about your view templates and how you will organize your application’s generated HTML.

放置好控制器和模型后，您就可以开始考虑视图模板以及如何组织应用程序生成HTML。

第3步-用局部视图重组视图 (Step 3 — Reorganizing Views with Partials)

You have created a Post model and controller, so the last thing to think about from a Rails perspective will be the views that present and allow users to input information about sharks. Views are also the place where you will have a chance to build out interactivity with Stimulus.

您已经创建了Post模型和控制器，因此从Rails角度考虑的最后一件事是呈现的视图，并允许用户输入有关鲨鱼的信息。 视图也是您与Stimulus建立互动性的地方。

In this step, you will map out your views and partials, which will be the starting point for your work with Stimulus.

在此步骤中，您将绘制视图和局部视图，这将是您与Stimulus一起工作的起点。

The view that will act as the base for posts and all partials associated with posts is the sharks/show view.

用作帖子以及与帖子关联的所有部分的基础的视图是sharks/show视图。

Open the file:

打开文件：

Currently, the file looks like this:

当前，文件如下所示：

<p id="notice"><%= notice %></p><p><strong>Name:</strong><%= @shark.name %>
</p><p><strong>Facts:</strong><%= @shark.facts %>
</p><%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>

When we created our Post model, we opted not to generate views for our posts, since we will handle them through our sharks/show view. So in this view, the first thing we will address is how we will accept user input for new posts, and how we will present posts back to the user.

创建Post模型时，我们选择不生成帖子视图，因为我们将通过sharks/show视图处理它们。 因此，在此视图中，我们要解决的第一件事是我们如何接受用户对新帖子的输入，以及如何将帖子呈现给用户。

Note: For an alternative to this approach, please see How To Create Nested Resources for a Ruby on Rails Application, which sets up post views using the full range of Create, Read, Update, Delete (CRUD) methods defined in the posts controller. For a discussion of these methods and how they work, please see Step 3 of How To Build a Ruby on Rails Application.

注意：有关此方法的替代方法，请参见如何为Ruby on Rails应用程序创建嵌套资源 ，该方法使用在posts控制器中定义的全部Create，Read，Update，Delete (CRUD)方法来设置发布视图。 有关这些方法以及它们如何工作的讨论，请参见如何构建Ruby on Rails应用程序的 步骤3 。

Instead of building all of our functionality into this view, we will use partials — reusable templates that serve a particular function. We will create one partial for new posts, and another to control how posts are displayed back to the user. Throughout, we’ll be thinking about how and where we can use Stimulus to manipulate the appearance of posts on the page, since our goal is to control the presentation of posts with JavaScript.

与其将所有功能都构建到该视图中，我们将使用partials-用于特定功能的可重用模板。 我们将为新帖子创建一个部分，而另一部分将控制如何将帖子显示回用户。 在整个过程中，我们将考虑如何以及在何处使用Stimulus来操纵页面上帖子的外观，因为我们的目标是使用JavaScript控制帖子的显示。

First, below shark facts, add an <h2> header for posts and a line to render a partial called sharks/posts:

首先，在shark事实下方，添加<h2>标头作为帖子，并添加一行以显示部分名为sharks/posts ：

. . .
<p><strong>Facts:</strong><%= @shark.facts %>
</p><h2>Posts</h2>
<%= render 'sharks/posts' %>
. . .

This will render the partial with the form builder for new post objects.

这将使用表单构建器为新的post对象呈现部分。

Next, below the Edit and Back links, we will add a section to control the presentation of older posts on the page. Add the following lines to the file to render a partial called sharks/all:

接下来，在“ Edit和“ Back链接下方，我们将添加一个部分来控制页面上较旧帖子的显示。 sharks/all添加到文件中以渲染名为sharks/all的部分内容：

<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %><div><%= render 'sharks/all' %>
</div>

The <div> element will be useful when we start integrating Stimulus into this file.

当我们开始将刺激集成到此文件中时， <div>元素将很有用。

Once you are finished making these edits, save and close the file. With the changes you’ve made on the Rails side, you can now move on to installing and integrating Stimulus into your application.

完成这些编辑后，保存并关闭文件。 通过在Rails方面所做的更改，您现在可以继续安装Stimulus并将其集成到您的应用程序中。

第4步-安装刺激 (Step 4 — Installing Stimulus)

The first step in using Stimulus will be to install and configure our application to work with it. This will include making sure we have the correct dependencies, including the Yarn package manager and Webpacker, the gem that will allow us to work with the JavaScript pre-processor and bundler webpack. With these dependencies in place, we will be able to install Stimulus and use JavaScript to manipulate events and elements in the DOM.

使用Stimulus的第一步将是安装和配置我们的应用程序以使其与之配合使用。 这将包括确保我们具有正确的依赖关系，包括Yarn程序包管理器和Webpacker ，这是使我们能够与JavaScript预处理程序和捆绑程序webpack一起使用的宝石 。 有了这些依赖关系之后，我们将能够安装Stimulus并使用JavaScript来操纵DOM中的事件和元素。

Let’s begin by installing Yarn. First, update your package list:

让我们从安装Yarn开始。 首先，更新您的包裹清单：

Next, add the GPG key for the Debian Yarn repository:

接下来，为Debian Yarn存储库添加GPG密钥：

Add the repository to your APT sources:

将存储库添加到您的APT源：

Update the package database with the newly added Yarn packages:

使用新添加的Yarn软件包更新软件包数据库：

And finally, install Yarn:

最后，安装Yarn：

With yarn installed, you can move on to adding the webpacker gem to your project.

安装了yarn ，您可以继续将webpacker gem添加到您的项目中。

Open your project’s Gemfile, which lists the gem dependencies for your project:

打开项目的Gemfile，其中列出了项目的gem依赖关系：

Inside the file, you will see Turbolinks enabled by default:

在文件内部，您将看到默认情况下启用了Turbolink：

. . .
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
. . .

Turbolinks is designed to improve performance by optimizing page loads: instead of having link clicks navigate to a new page, Turbolinks intercepts these click events and makes the page request using Asynchronous JavaScript and HTML (AJAX). It then replaces the body of the current page and merges the contents of the <head> sections, while the JavaScript window and document objects and the <html> element persist between renders. This addresses one of the main causes of slow page load times: the reloading of CSS and JavaScript resources.

Turbolinks旨在通过优化页面负载来提高性能：Turbolinks不会拦截链接单击导航到新页面，而是拦截这些点击事件并使用异步JavaScript和HTML(AJAX)发出页面请求。 然后，它替换当前页面的正文并合并<head>部分的内容，而JavaScript window和document对象以及<html>元素在渲染之间保持不变。 这解决了页面加载时间慢的主要原因之一：CSS和JavaScript资源的重新加载。

We get Turbolinks by default in our Gemfile, but we will need to add the webpacker gem so that we can install and use Stimulus. Below the turbolinks gem, add webpacker:

默认情况下，我们在Gemfile中获得Turbolinks，但是我们将需要添加webpacker gem，以便我们可以安装和使用Stimulus。 在turbolinks gem下方，添加webpacker ：

. . .
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
gem 'webpacker', '~> 4.x'
. . .

Save and close the file when you are finished.

完成后保存并关闭文件。

Next, add the gem to your project’s bundle with the bundle command:

接下来，使用bundle命令将gem添加到项目的bundle中：

This will generate a new Gemfile.lock file — the definitive record of gems and versions for your project.

这将生成一个新的Gemfile.lock文件-项目的gem和版本的Gemfile.lock记录。

Next, install the gem in the context of your bundle with the following bundle exec command:

接下来，使用以下bundle exec命令在包的上下文中安装gem：

Once the installation is complete, we will need to make one small adjustment to our application’s content security file. This is due to the fact that we are working with Rails 5.2+, which is a Content Security Policy (CSP) restricted environment, meaning that the only scripts allowed in the application must be from trusted sources.

安装完成后，我们将需要对应用程序的内容安全文件进行一些小的调整。 这是由于我们正在使用Rails 5.2+的事实，Rails 5.2+是受内容安全策略(CSP)限制的环境，这意味着应用程序中允许的唯一脚本必须来自受信任的来源。

Open config/initializers/content_security_policy.rb, which is the default file Rails gives us for defining application-wide security policies:

打开config/initializers/content_security_policy.rb ，这是Rails为我们定义应用程序范围的安全策略提供的默认文件：

Add the following lines to the bottom of the file to allow webpack-dev-server — the server that serves our application’s webpack bundle — as an allowed origin:

在文件底部添加以下几行，以允许webpack-dev-server (服务于我们的应用程序的webpack软件包的服务器)作为允许的来源：

. . .
Rails.application.config.content_security_policy do |policy|policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
end

This will ensure that the webpacker-dev-server is recognized as a trusted asset source.

这将确保webpacker-dev-server被识别为可信资产来源。

Save and close the file when you are finished making this change.

完成更改后，保存并关闭文件。

By installing webpacker, you created two new directories in your project’s app directory, the directory where your main application code is located. The new parent directory, app/javascript, will be where your project’s JavaScript code will live, and it will have the following structure:

通过安装webpacker ，您在项目的app目录中创建了两个新目录，这是您的主要应用程序代码所在的目录。 新的父目录app/javascript将是项目JavaScript代码所在的目录，并且具有以下结构：

├── javascript
│   ├── controllers
│   │   ├── hello_controller.js
│   │   └── index.js
│   └── packs
│       └── application.js

The app/javascript directory will contain two child directories: app/javascript/packs, which will have your webpack entry points, and app/javascript/controllers, where you will define your Stimulus controllers. The bundle exec command that we just used will create the app/javascript/packs directory, but we will need to install Stimulus for the app/javascript/controllers directory to be autogenerated.

app/javascript目录将包含两个子目录： app/javascript/packs (将具有您的webpack入口点)和app/javascript/controllers (将在其中定义Stimulus 控制器) 。 我们刚刚使用的bundle exec命令将创建app/javascript/packs目录，但是我们需要安装Stimulus才能自动生成app/javascript/controllers目录。

With webpacker installed, we can now install Stimulus with the following command:

安装了webpacker ，我们现在可以使用以下命令安装Stimulus：

You will see output like the following, indicating that the installation was successful:

您将看到类似以下的输出，表明安装成功：

. . .
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ stimulus@1.1.1
info All dependencies
├─ @stimulus/core@1.1.1
├─ @stimulus/multimap@1.1.1
├─ @stimulus/mutation-observers@1.1.1
├─ @stimulus/webpack-helpers@1.1.1
└─ stimulus@1.1.1
Done in 8.30s.
Webpacker now supports Stimulus.js 												


											
ruby on rails_如何将刺激添加到Ruby on Rails应用程序相关推荐
	

								
ruby on rails_如何在Ruby on Rails应用中用Vue.js替换jQuery
		
ruby on rails by Igor Petrov 通过伊戈尔·彼得罗夫(Igor Petrov) 如何在Ruby on Rails应用中用Vue.js替换jQuery (How to repl ...
		
						
ruby on rails_最终的中级Ruby on Rails教程：让我们创建一个完整的应用程序！
		
ruby on rails 由Domantas G (By Domantas G) There are plenty tutorials online which show how to create ...
		
						
framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序
		
framer x使用教程 The web is vast and it's full of static websites and apps. But just because those apps  ...
		
						
chrome添加来自其他网站的扩展程序
		
chrome添加来自其他网站的扩展程序 原文网址:http://support.google.com/chrome_webstore/bin/answer.py?hl=zh-Hans&answ ...
		
						
bluemix java_Bluemix 基础：将 SQL 数据库添加到您的 Java 应用程序中
		
概述 学习如何在 Bluemix 上创建一个 SQL 数据库,并将其添加到您的 Java Web 应用程序中.探索一个数据驱动.动态生成的网络商店,该商店会根据当前库存水平来改变外观.使用基于 Web ...
		
						
将JSON功能添加到您的GWT应用程序中
		
JSON简介 在Web应用程序上工作时,总是会出现客户端-服务器数据交换的问题. 在此问题上有多种方法,其中许多使用XML进行交换. 执行此任务的一种不太知名的格式是JSON. JSON(JavaSc ...
		
						
如何在 SQL Server 2005 故障转移群集中添加或删除节点（安装程序）
		
如何在 SQL Server 2005 故障转移群集中添加或删除节点(安装程序) 使用此过程管理 Microsoft SQL Server 2005 故障转移群集实例中的节点. 重要提示: 若要更新或 ...
		
						
Ruby On Rails-2.0.2源代码分析（1）-Rails的启动
		
前言 本文主要是针对Ruby On Rails 2.0.2的源代码进行分析,学习与研究.所使用的工具是NetBean 6.1 Beta,WEBRick,SciTE,ruby-debug-base(0. ...
		
						
解决WINDOWS无法打开“添加打印机”，本地后台打印程序服务没有运行
		
刚装好Windows 7发现HP还没提供1020PLUS的打印机驱动,无法使用打印机,于是想系统会不会带了打印机驱动呢?所以进入添加打印机,点击添加打印机却发现如下提示:解决WINDOWS无法打开&q ...
		
		

					
最新文章
	

						
C++11多线程中std::call_once的使用
		
						
hibernate延迟加载(get和load的区别)
		
						
linux/unix系统编程手册11-15
		
						
delphi查找对话框
		
						
vuejs mvvm图解
		
						
SpringCloud feign 的三种超时时间配置
		
						
车窗上为啥总有一些小黑点？没想到居然藏着大作用！
		
						
io密集型和cpu密集型_和小胖一起理解CPU负载和利用率
		
						
OpenCV学习笔记（四）：XML,YAML(.txt,.doc)文件读写操作
		
						
mysql 存储过程死循环的关闭
		
						
php分页代码简单实现原理,php分页类之PHP分页原理+代码实现
		
						
CSS 字体单位大小对照换算表
		
						
申报软件著作权时，怎样快捷计算源代码行数
		
						
猿辅导（实习800/天）面试算法题详解
		
						
python计算圆锥体积和表面积_圆锥体积公式和表面积
		
						
Bundle-Adjustment并行求解器
		
						
再见python你好julia_再见 Python 2，你好 Python 3
		
						
vuze自动关机插件
		
						
COGNOS安装笔记
		
						
Apollo Cyber RT学习手册(基于Ubuntu18.04、Apollo 6.0_edu)
		
		
	

热门文章
	

									
如何开始创业（催生全美最大孵化器YC的文章）
			
						
java自由职业者_自由职业者的7个重要技巧
			
						
深度学习100问之深入理解Vanishing/Exploding Gradient（梯度消失/爆炸）
			
						
JavaScript-- 基础知识面试题
			
						
考研计算机专业英语面试自我介绍,计算机研究生面试英文自我介绍
			
						
软件构造-Reading 1：静态检查
			
						
兼容所有浏览器的Web打印控件的设计方案
			
						
ucenter用户中心头像修改,不使用自带方法，不使用flash 转
			
						
ACM题目和培养训练！！！
			
						
Premiere室内背景场景MG动画PR素材MOGRT Vol.2