vue.js - 将 SendGrid 与 Nuxt.js 一起使用

Question

这篇文章实际上不是一个问题。对于那些在 Nuxt.js 和 SendGrid 上苦苦挣扎的人来说，更像是对世界的帮助。我使用 stackoverflow 已经有很长时间了，所以也许现在轮到我开始帮助他人了。

在过去的 8 周里，我一直致力于 Nuxt.js WebApp 开发。Nuxt.js 对我来说是一个巨大的学习曲线和挑战，但我真的很喜欢使用这项技术。

我花了两天时间开发使用 SendGrid 发送表单。网上没有太多帮助，我一直在苦苦挣扎，但我做到了！所以也许有些人会发现我的帖子很有用。

这是我的表格：

<form 
                        v-show="!isSubmitted"
                        class="contact-us__form" 
                        @submit.prevent="validate">

                        <b-form-group :class="{'form-group--error': $v.name.$error}">

                            <b-form-input
                                id="name"
                                v-model.trim="$v.name.$model"
                                type="text"
                                placeholder="Full Name">
                            ></b-form-input>

                            <div class="error" v-if="!$v.name.required">Field is required</div>
                            <div class="error" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>

                        </b-form-group>
                        

                        <b-form-group :class="{'form-group--error': $v.phone.$error}">
                            <b-form-input
                                id="phone"
                                v-model.trim="$v.phone.$model"
                                type="number"
                                placeholder="Phone Number">
                            ></b-form-input>

                            <div class="error" v-if="!$v.phone.required">Field is required</div>

                        </b-form-group>
                        

                        <b-form-group :class="{'form-group--error': $v.email.$error}">
                            <b-form-input
                                id="email"
                                v-model.trim="$v.email.$model"
                                type="email"
                                placeholder="Email Address">
                            ></b-form-input>

                            <div class="error" v-if="!$v.email.required">Field is required</div>
                        </b-form-group>
                        

                        <div class="d-flex align-items-end">

                            <b-form-group :class="{'form-group--error': $v.message.$error}">
                                <b-form-textarea
                                    id="message"
                                    v-model.trim="$v.message.$model"
                                    type="text"
                                    placeholder="Message"
                                ></b-form-textarea>

                                <div class="error" v-if="!$v.message.required">Field is required</div>
                                <div class="error" v-if="!$v.message.minLength">Name must have at least {{$v.message.$params.minLength.min}} characters.</div>
                            </b-form-group>

                            <b-form-group>
                                <b-button 
                                    type="submit" 
                                    variant="secondary"
                                    v-html="'S'"
                                    :disabled="submitting" />
                            </b-form-group>
                        </div>
                    </form>

脚本：

    export default {
    mixins: [validationMixin],
    components: {
        subscribeBox
    },
    data() {
        return {
            map: bgMap,
            name: "",
            phone: "",
            email: "",
            message: "",
            submitting: false,
            isSubmitted: false,
            error: false,
        }
    },
    validations: {
        name: {
            required,
            minLength: minLength(4)
        },
        phone: {
            required,
        },
        email: {
            required,
            email
        },
        message: {
            required,
            minLength: minLength(5)
        }
    },
    methods: {
        validate() {
            if (this.$v.$invalid || this.$v.$error|| this.submitting) {
                this.$v.$touch();
                return
            }
            this.onSsubmit();
        },
        async onSsubmit() {
            this.submitting = true;
            this.error = false;

            try {
                await this.$axios.$post('/api/v1/send-email', {
                    name: this.name,
                    phone: this.phone,
                    email: this.email,
                    message: this.message,
                });
                this.submitting = false
                this.isSubmitted = true
                await new Promise(resolve => setTimeout(resolve, 2500))
            } catch(e) {
                this.submitting = false
                this.error = true
                console.error(e)
            }
        },

    },
}

nuxt.config.js

serverMiddleware: ['~/api/v1/send-email.js'],

api/v1/send-email.js （所有 API 密钥都放在 .env 文件中）

const express = require("express");
const bodyParser = require('body-parser')
const sgMail = require('@sendgrid/mail');

const app = express();

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

app.use(bodyParser.json())
app.post("/", (req, res) => {


    let msg = {
        to: req.body.email, // Change to your recipient
        from: '', // Change to your verified sender
        subject: 'Message from ' + req.body.name,
        text: 'telephone ' + req.body.phone + ', ' + 'message ' + req.body.message,
    }

    sgMail
        .send(msg)
        .then(() => {
            return res.status(200).json({ 'message': 'Email sent!' })
        })
        .catch((error) => {
            return res.status(400).json({ 'error': 'Opsss... Something went wrong ' + error })
        })

});

module.exports = {
    path: "/api/v1/send-email",
    handler: app
};

这个应用程序还没有完成，但代码工作 100%！我是 Nuxt.js 的新手，所以有些内容可能看起来不太好，但我也很高兴并乐于接受反馈和建议。

感谢您阅读我的帖子，祝您项目顺利！:)

标签： vue.jsnuxt.jssendgrid