看着Hotwire,你感到兴奋吗?你想学习它,但是总感觉它很复杂?不用担心,今天我们将介绍如何使用Ruby on Rails和Hotwire构建最简单的应用程序。通过学习本文,你将能够加深对Hotwire的理解。

第一步:启动Ruby on Rails应用程序

我们将从基础开始构建我们的应用程序。打开终端,输入以下命令:

“`

rails new hotwire-tutorial

“`

这将创建一个名为”hotwire-tutorial”的新的Ruby on Rails应用程序。

接下来,我们需要进入文件夹,输入以下命令:

“`

cd hotwire-tutorial

“`

这将进入到所创建的文件夹中。

第二步:生成用户模型

我们将创建一个简单的用户模型来演示如何使用Hotwire。

运行以下命令,生成应用程序的用户模型:

“`

rails generate model User name:string email:string

“`

这将生成一个名为”user”的模型,包含名字和电子邮件属性。

接下来,运行以下命令,将用户模型应用于数据库:

“`

rails db:migrate

“`

此命令将创建一个名为”user”的数据库表。

第三步:生成用户控制器

我们需要一个控制器来处理用户模型的请求。运行以下命令来生成用户控制器:

“`

rails generate controller Users

“`

这将生成一个名为”users”的控制器。

接下来,输入以下代码,打开控制器中的”index”操作:

“`

class UsersController < ApplicationController

def index

@users = User.all

end

end

“`

在这个操作中,我们从数据库中获取了所有的用户,然后将它们存储在实例变量@users中。

第四步:创建用户视图

我们将使用Hotwire来构建一个用户视图,显示所有用户的信息。首先,我们需要在Gemfile中添加以下行:

“`

gem ‘hotwire-rails’

“`

接下来,在你的视图文件夹中,创建一个名为”index.html.erb”的文件,在文件中输入以下代码:

“`

<%= turbo_stream_from 'users' %>

<% @users.each do |user| %>

<%= turbo_stream.append 'users', partial: 'user', locals: { user: user } %>

<% end %>

“`

在这个视图中,我们使用turbo_stream_from 和 turbo_stream.append 来呈现用户信息。turbo_stream_from 表示引用名为 “users” 的 Hotwire 流,并用此流在每个用户之后将局部模板渲染到 “users” 元素上。

最后,我们在视图文件夹中创建一个名为”_user.html.erb”的文件,输入以下代码:

“`

<%= user.name %> (<%= user.email %>)

“`

这是用户视图中的一个局部模板,用于显示用户的名字和电子邮件地址。

完成以上操作后,将以下代码添加到控制器中:

“`

def create

@user = User.create(user_params)

respond_to do |format|

if @user.save

format.html { redirect_to users_url, notice: ‘User was successfully created.’ }

format.turbo_stream { render turbo_stream: turbo_stream.append(‘users’, partial: ‘user’, locals: { user: @user }) }

else

format.html { render :new }

format.turbo_stream { render turbo_stream: turbo_stream.replace(‘users_new’, partial: ‘form’, locals: { user: @user }) }

end

end

end

“`

此操作将创建一个名为”create”的操作,用于从网页上插入新用户。

第五步:启动Hotwire

现在,我们将启动Hotwire并预览我们的应用程序。我们只需在终端中输入以下命令:

“`

rails server

“`

在浏览器中打开http://localhost:3000,你将看到一个显示所有用户信息的页面。此时,在表单中输入新用户信息,点击提交按钮,新用户将在不刷新页面的情况下添加到页面中。

结论

通过构建最简单的Hotwire和Ruby on Rails应用程序,我们可以学习Hotwire并深入了解它的工作原理。我们已经通过使用Hotwire构建应用程序的过程,深入了解了Hotwire的基本组成和各种构建步骤。希望你能够从中受益,开始使用Hotwire构建更复杂的应用程序!

详情参考

了解更多有趣的事情:https://blog.ds3783.com/