Vue 2 + Laravel 7实现Vue组件联系表单邮件发送步骤咨询

1. 后端配置邮件服务 #

先在 Laravel 的 .env 文件中配置邮件驱动（以 SMTP 为例，适配大多数邮箱服务商）：

MAIL_MAILER=smtp
MAIL_HOST=smtp.xxx.com # 替换为对应邮箱的SMTP地址，如smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your-email@xxx.com # 发件人邮箱
MAIL_PASSWORD=your-app-password # 邮箱授权码/应用专用密码
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your-email@xxx.com
MAIL_FROM_NAME="${APP_NAME}"

可通过临时路由测试邮件配置是否生效，确保能正常发送邮件。

2. 创建邮件处理类 #

执行 Artisan 命令生成专属邮件类：

php artisan make:mail ContactFormMail

编辑 app/Mail/ContactFormMail.php，接收前端传递的表单数据并绑定邮件视图：

<?php

namespace App\Mail;

use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class ContactFormMail extends Mailable
{
    use SerializesModels;

    public $formData;

    public function __construct($formData)
    {
        $this->formData = $formData;
    }

    public function build()
    {
        return $this->subject('新的联系表单提交')
                    ->view('emails.contact-form');
    }
}

3. 编写邮件内容视图 #

在 resources/views/emails 目录下创建 contact-form.blade.php，渲染邮件的HTML内容（后端使用Blade不影响前端Vue逻辑）：

<h1>新的联系表单提交</h1>
<p><strong>姓名:</strong> {{ $formData['name'] }}</p>
<p><strong>邮箱:</strong> {{ $formData['email'] }}</p>
<p><strong>留言:</strong> {{ $formData['message'] }}</p>
<p><strong>选择的服务:</strong> 
    @if(!empty($formData['services']))
        {{ implode(', ', $formData['services']) }}
    @else
        无
    @endif
</p>

这里通过 implode 将复选框的数组值转为字符串展示。

4. 后端API路由配置 #

在 routes/api.php 中添加POST路由，处理前端表单请求：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Mail\ContactFormMail;

Route::post('/contact', function (Request $request) {
    // 验证表单数据
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email',
        'message' => 'required|string',
        'services' => 'nullable|array',
        'services.*' => 'string'
    ]);

    // 发送邮件
    Mail::to('your-target-email@xxx.com') // 替换为接收邮件的邮箱
        ->send(new ContactFormMail($validated));

    return response()->json(['message' => '邮件发送成功'], 200);
});

若想避免请求阻塞，可将 send 替换为 queue，需先配置Laravel队列驱动。

5. 前端Vue组件实现 #

在Vue组件中完成表单数据绑定（含复选框数组绑定），并通过axios发送请求：

<template>
  <form @submit.prevent="submitForm" class="contact-form">
    <div>
      <label>姓名:</label>
      <input type="text" v-model="form.name" required>
    </div>
    <div>
      <label>邮箱:</label>
      <input type="email" v-model="form.email" required>
    </div>
    <div>
      <label>留言:</label>
      <textarea v-model="form.message" required></textarea>
    </div>
    <div>
      <label>选择需要的服务:</label>
      <div>
        <input type="checkbox" id="web" value="网站开发" v-model="form.services">
        <label for="web">网站开发</label>
      </div>
      <div>
        <input type="checkbox" id="app" value="APP开发" v-model="form.services">
        <label for="app">APP开发</label>
      </div>
      <div>
        <input type="checkbox" id="design" value="UI设计" v-model="form.services">
        <label for="design">UI设计</label>
      </div>
    </div>
    <button type="submit" :disabled="isSubmitting">发送</button>
    <p v-if="message" :class="{ error: isError }">{{ message }}</p>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        message: '',
        services: []
      },
      isSubmitting: false,
      message: '',
      isError: false
    }
  },
  methods: {
    async submitForm() {
      this.isSubmitting = true
      this.message = ''
      this.isError = false
      try {
        const response = await axios.post('/api/contact', this.form)
        this.message = response.data.message
        // 重置表单
        this.form = { name: '', email: '', message: '', services: [] }
      } catch (error) {
        this.isError = true
        this.message = error.response?.data?.message || '邮件发送失败，请稍后重试'
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped>
.contact-form div { margin-bottom: 1rem; }
.message { margin-top: 1rem; }
.error { color: #dc3545; }
</style>

6. 跨域配置（前后端分离场景） #

若前端Vue项目与Laravel后端部署在不同域名，需处理CORS问题：

1. 安装CORS扩展包：

composer require barryvdh/laravel-cors

2. 在 config/app.php 的 providers 中添加：

Barryvdh\Cors\ServiceProvider::class,

3. 发布配置文件并编辑 config/cors.php：

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://your-vue-domain.com'], // 替换为前端域名
    'allowed_headers' => ['*'],
    'supports_credentials' => false,
];

4. 在 app/Http/Kernel.php 的 middlewareGroups 中给 api 组添加：

\Barryvdh\Cors\HandleCors::class,

测试验证 #

启动Laravel后端服务（php artisan serve）和Vue前端服务（npm run serve），填写表单并提交，检查接收邮箱是否收到邮件，同时前端会展示对应提示。

内容的提问来源于stack exchange，提问作者Ivan Baragone