Vue和laravel应用程序从vue发送电子邮件到laravel不工作

我需要你的帮助。我尝试了一切，但没有什么对我有用，我不知道为什么。
这是我的vue app.js

import './bootstrap';

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import NavLink from './Components/NavLink.vue';
import HomeView from './Views/HomeView.vue';
import ReferencesView from './Views/ReferencesView.vue';
import BlogView from './Views/BlogView.vue';

const routes = [
    { path: '/', component: HomeView },
    { path: '/references', component: ReferencesView },
    { path: '/blog', component: BlogView },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

createApp(App)
    .use(router)
    .component('NavLink', NavLink)
    .mount("#app")

这里是我的路线web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::view('/{any}', 'app')
    ->where('any', '.*');

这是我在php中应用视图

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>ًApplication</title>
    @vite('resources/css/app.css')
</head>

<body>
    <div id="app"></div>
    @vite('resources/js/app.js')
</body>

</html>

我的vue组件

<template>
    <section id="contact-us" class="contact">
        <h1 class="title title-contact">Contact Us</h1>
        <div class="contact-all-wrapper">
        <h2 class="subtitle">Write Us</h2>
        <div class="contact-us-box">
            <div class="submit-form">
                <div class="form-box">
                    <div class="form-border">
                        <form class="form-container">
                            <div class="form-wrapper">
                                <div class="user-box">
                                    <input
                                    id="name-input"
                                    type="name"
                                    v-model="name"
                                    invalid-feedback="Name is require"
                                    :state="nameState"
                                    required="">
                                    <label label-for="name-input">Full name</label>
                                </div>
                                <div class="user-box">
                                    <input type="text"
                                    v-model="phone"
                                    label="Phone number"
                                    required="">
                                    <label>Phone number</label>
                                </div>
                            </div>
                            <div class="form-wrapper">
                                <div class="user-box">
                                    <input type="email"
                                    v-model="email"
                                    label="Email"
                                    required="">
                                    <label>Email</label>
                                </div>
                                <div class="user-box">
                                    <input type="text"
                                    v-model="creation"
                                    label="Type of creation"
                                    required="">
                                    <label>Type of creation</label>
                                </div>
                            </div>
                        </form>
                        <div class="user-box mess">
                            <input type="text"
                            v-model="message"
                            label="Message"
                            required="">
                            <label>Message</label>
                        </div>
                    </div>
                </div>

                <div class="control btn-wrapper">
                    <button class="button is-link submit-btn" @click="handleSubmit">Submit</button>
                </div>
            </div>
            <div class="contact-container">
                <h2 class="subtitle">Contact information</h2>
                <ul class="contact-wrapper">
                    <li class="contact-item">
                        <div class="contact-icon-wrapper">
                            <img src="../../assets/mail-icon.svg" alt="" class="contact-icon">
                        </div>
                        <a href="" class="contact-link">[email protected]</a>
                    </li>
                    <li class="contact-item">
                        <div class="contact-icon-wrapper">
                            <img src="../../assets/phone-icon.svg" alt="" class="contact-icon">
                        </div>
                        <a href="" class="contact-link">+421 907 151 118</a>
                    </li>
                    <li class="contact-item">
                        <div class="contact-icon-wrapper">
                            <img src="../../assets/nav-icon.svg" alt="" class="contact-icon">
                        </div>
                        <a href="" class="contact-link">Ružová dolina 25, 821 08 BA</a>
                    </li>
                    <li class="contact-item">
                        <div class="contact-icon-wrapper">
                            <img src="../../assets/job-icon.svg" alt="" class="contact-icon">
                        </div>
                        <a href="" class="contact-link">Milionplus s.r.o.</a>
                    </li>
                    <li class="contact-item">
                        <div class="contact-icon-wrapper">
                            <img src="../../assets/link-icon.svg" alt="" class="contact-icon">
                        </div>
                        <a href="" class="contact-link">IG & FB</a>
                    </li>
                </ul>
            </div>
        </div>
        </div>
    </section>
</template>

<script>

export default {
    data() {
        return {
            nameState: '',
            formData: {
                name: '',
                phone: '',
                email: '',
                creation: '',
                message: '',
            },
            name: '',
            phone: '',
            email: '',
            creation: '',
            message: '',
        }
    },
    methods: {
        /*checkFormValidity() {
            const valid = this.$refs.form.checkValidity()
            this.nameState = valid
            return valid
        },*/
        resetValue() {
            this.name = '',
            this.phone = '',
            this.email = '',
            this.creation = '',
            this.message = ''
        },
        handleSubmit() {
            /*localStorage.setItem('mail', JSON.stringify(this.formData));*/
            axios.post('/api/send-email', this.formData,
                ).then(res => {
                console.log(res.data.message);
            }).catch(e => {
                console.log(e);
            })
            this.resetValue()
        }
    },
    /*mounted() {

        if (localStorage.getItem('mail'))
            this.mail = JSON.parse(localStorage.getItem('mail'));
        console.log(this.mail);
    }*/
}

</script>

<style lang="scss">

@import '../../css/variables.scss';

.contact {
    background-color: $darkGray;
    margin: 0 -3em;
    padding: 0 3em 3em 3em;
}

.title-contact {
    color: $white;
    margin-top: 1.5em;
    padding-top: 1.5em;
}

.contact-us-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.form-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.form-box {
    display: flex;
    flex-direction: column;
    width: 130%;
    padding: 0.3em;
    background-image: linear-gradient(to right, rgba(42,239,186,1) 0%, rgba(28,197,244,1) 100%);
    border-radius: 30px;
    display: block;
    z-index: 2;
}

.form-border {
    margin: 0em;
    align-items: center;
    background: $darkGray;
    border-radius: 25px;
}

.form-wrapper {
    width: 100%;
    margin: 1em;
}

.user-box {
    position: relative;
    width: 100%;
}

.mess {
    width: 95%;
    margin: 1em;
    margin-bottom: 0;
}

.user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}

.user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}

.user-box input:focus ~ label,
.user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
}

.btn-wrapper {
    width: 130%;
    margin: 1em 0;
    display: flex;
    justify-content: center;
}

.submit-btn {
    border-radius: 18px;
    color: $whiteSmoked;
    background: rgb(42,239,186);
    background: -moz-linear-gradient(90deg, rgba(42,239,186,1) 0%, rgba(28,197,244,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(42,239,186,1) 0%, rgba(28,197,244,1) 100%);
    background: linear-gradient(90deg, rgba(42,239,186,1) 0%, rgba(28,197,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2aefba",endColorstr="#1cc5f4",GradientType=1);
}

.contact-container {
    width: 31%;
    position: relative;
    top: -5.3em;
}

.contact-item {
    display: flex;
    margin: 0.5em 0;
    width: 100%;
}

.contact-icon-wrapper {
    width: 20%;
}

.contact-icon {
    width: 48px;
}

.contact-link {
    width: 100%;
    padding: 0.2em;

    &:visited {
        color: $whiteSmoked;
    }
}

</style>

我的API路由

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});*/

Route::post('/send-email', [MailController::class, 'sendEmail']);

还有我的控制器

<?php

namespace App\Http\Controllers;

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

class MailController extends Controller
{
    protected $formData;
    public function sendEmail(Request $request)
    {
        try {
            $formData = $request->all();
            

        // Send the email
        Mail::to('36b5a50a992317')
            ->send(new YourEmailMailable($formData));

        return response()->json(['message' => 'Email sent successfully']);
    } catch (\Exception $e) {
        return response()->json(['error' => 'Email could not be sent. Please try again.']);
    }
    }
}

和邮件文件与查看邮件

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class YourEmailMailable extends Mailable
{
    use Queueable, SerializesModels;

    public $formData; // Add a public property to hold the form data

    /**
     * Create a new message instance.
     *
     * @param  array  $formData
     * @return void
     */
    public function __construct(array $formData)
    {
        $this->formData = $formData; // Pass form data to the class
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this
            ->from('[email protected]') // Sender's email address
            ->subject('Contact Form Submission') // Email subject
            ->view('emails.contact') // Blade view for email content
            ->with([
                'name' => $this->formData['name'], // Pass form data to the view
                'email' => $this->formData['email'],
                'message' => $this->formData['message'],
            ]);
    }
}

查看邮件文件

<!DOCTYPE html>
<html>

<head>
    <title>Contact Form Submission</title>
</head>

<body>
    <p><strong>Name:</strong> {{ $name }}</p>
    <p><strong>Email:</strong> {{ $email }}</p>
    <p><strong>Message:</strong> {{ $message }}</p>
</body>

</html>

现在我不知道为什么，但每次我试图发送一个axios后请求完成，但在laravel从邮件控制器捕捉捕捉部分。我尝试了一切，但我不知道为什么它不工作。我还为我的邮件提供商API正确设置了我的env文件。
你能帮我吗
谢谢

Vue和laravel应用程序从vue发送电子邮件到laravel不工作

1条答案

相关问题

热门标签

最新问答