看着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/