TheOdinProject Rails表单与认证项目实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00659/article/details/148416426

TheOdinProject Rails表单与认证项目实战指南

curriculum TheOdinProject/curriculum: The Odin Project 是一个免费的在线编程学习平台，这个仓库是其课程大纲和教材资源库，涵盖了Web开发相关的多种技术栈，如HTML、CSS、JavaScript以及Ruby on Rails等。项目地址: https://gitcode.com/gh_mirrors/cu/curriculum

前言

在Rails开发中，表单是与用户交互的重要组件。本文将带你深入理解Rails表单的工作原理，从最基础的HTML表单开始，逐步过渡到Rails提供的各种表单辅助方法。

项目准备

后端设置

创建名为"re-former"的Rails应用
建立User模型，包含:username、:email和:password字段
为每个字段添加存在性验证
配置路由，仅包含:new和:create动作
创建UsersController并实现空白的#new和#create方法

纯HTML表单实现

基础表单构建

<form action="/users" method="post" accept-charset="UTF-8" data-turbo="false">
  <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
  
  <label for="username">Username:</label>
  <input type="text" id="username" name="user[username]">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="user[email]">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="user[password]">
  
  <input type="submit" value="Submit">
</form>

关键点解析

CSRF保护：Rails默认启用CSRF保护，需要手动添加authenticity_token
参数嵌套：使用name="user[username]"格式实现参数嵌套
Turbo处理：通过data-turbo="false"禁用Turbo以观察原始表单提交行为

控制器处理

用户创建逻辑

def create
  @user = User.new(user_params)

  if @user.save
    redirect_to new_user_path
  else
    render :new, status: :unprocessable_entity
  end
end

private

def user_params
  params.require(:user).permit(:username, :email, :password)
end

参数处理要点

强参数：使用require和permit方法确保参数安全
错误处理：保存失败时重新渲染表单并保留用户输入
状态码：使用:unprocessable_entity状态码表示验证失败

Rails表单辅助方法

form_tag实现

<%= form_tag users_path do %>
  <%= label_tag :username, "Your user name here" %>
  <%= text_field_tag 'user[username]', @user.username %>
  
  <%= label_tag :email %>
  <%= email_field_tag 'user[email]', @user.email, placeholder: "example@example.com" %>
  
  <%= label_tag :password %>
  <%= password_field_tag 'user[password]' %>
  
  <%= submit_tag "Submit" %>
<% end %>

form_with实现

<%= form_with model: @user do |form| %>
  <%= form.label :username, "Your user name here" %>
  <%= form.text_field :username %>
  
  <%= form.label :email %>
  <%= form.email_field :email, placeholder: "example@example.com" %>
  
  <%= form.label :password %>
  <%= form.password_field :password %>
  
  <%= form.submit %>
<% end %>

辅助方法对比

| 特性 | form_tag | form_with | |---------------|----------------|-----------------| | 模型绑定 | 无 | 自动绑定 | | 路由推断 | 需手动指定 | 自动推断 | | 字段命名 | 需手动嵌套 | 自动嵌套 | | HTTP方法 | 需手动指定 | 根据模型状态自动设置 |

编辑功能实现

控制器调整

def edit
  @user = User.find(params[:id])
end

def update
  @user = User.find(params[:id])
  
  if @user.update(user_params)
    redirect_to edit_user_path(@user)
  else
    render :edit, status: :unprocessable_entity
  end
end

表单复用

form_with会根据@user是否持久化自动决定使用POST还是PATCH方法，无需手动配置。

错误处理

显示验证错误

<% if @user.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
    <ul>
      <% @user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>