如何通过Rails、JS及HTML按钮实现邮件发送并整合现有代码？

你现有的代码已经完成了邮件器、预览视图和前端交互的基础部分，但缺失了路由配置和控制器触发逻辑，这是导致各部分无法联动的核心原因。以下是完整的整合步骤：

1. 添加路由规则 #

打开config/routes.rb，添加处理邮件发送和预览页面的路由：

# 处理邮件发送的POST请求
post '/send_email', to: 'home#send_email'
# 对应JS中打开的预览页面路由
get '/mail', to: 'home#mail_preview'
# 设置根路由指向显示按钮的页面
root 'home#index'

2. 实现控制器逻辑 #

如果还没有Home控制器，先通过命令生成：

rails generate controller Home index

然后打开app/controllers/home_controller.rb，添加邮件发送和预览的动作：

class HomeController < ApplicationController
  def index
    # 根页面，用于显示发送邮件的按钮
  end

  def send_email
    # 触发邮件发送
    ContactMailer.contact.deliver_now
    # 返回成功状态码，让前端判断请求成功
    head :ok
  end

  def mail_preview
    # 渲染你已有的contact.html.erb预览页面
    render 'contact'
  end
end

3. 调整前端表单与JS #

把表单的目标路由改成刚才配置的/send_email，同时补充网络错误捕获：

<%= form_tag '/send_email', class: "send-email" do %>
  <%= submit_tag "Click to Send Email", style: "margin: 10px; padding: 10px" %>
<% end %>

<script>
document.querySelector(".send-email").onsubmit = function(e) {
  e.preventDefault()

  fetch(e.target.action, {
    method: "POST",
    headers: {
      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
    }
  }).then(function(response) {
    if (response.ok) {
      window.open('/mail', '_blank')
    } else {
      console.error('邮件发送失败:', response)
    }
  }).catch(function(error) {
    console.error('请求出错:', error)
  });
}
</script>

4. 配置开发环境邮件发送 #

开发环境默认不会实际发送邮件，你可以选择两种方式：

方式一：用SMTP实际发送（以Gmail为例） #

打开config/environments/development.rb，添加SMTP配置：

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  address: 'smtp.gmail.com',
  port: 587,
  domain: 'gmail.com',
  user_name: '你的Gmail邮箱地址',
  password: '你的Gmail应用专用密码', # 需开启两步验证后创建
  authentication: 'plain',
  enable_starttls_auto: true
}
config.action_mailer.perform_deliveries = true

方式二：用letter_opener预览邮件（推荐开发用） #

1. 在Gemfile中添加：

gem 'letter_opener', group: :development

2. 执行bundle install
3. 修改config/environments/development.rb：

config.action_mailer.delivery_method = :letter_opener
config.action_mailer.perform_deliveries = true

这样发送邮件时会自动打开浏览器显示邮件预览，无需实际发送到邮箱。

5. 测试功能 #

启动Rails服务器：

rails s

访问http://localhost:3000，点击发送按钮：

• 检查浏览器控制台是否有错误
• 确认邮件发送成功（或letter_opener打开预览）
• 验证/mail页面正常显示

内容的提问来源于stack exchange，提问作者bilel abdelmoula