使用 SPA 框架(如 vue.js)创建很酷的网站,您可能会错过直接从 JavaScript 发送电子邮件。

有像EmailJS这样的解决方案专注于这个问题。但它们仅限于免费增值模式。

通过 REST-API 使用Airtable作为简单的数据库后端(请参阅 Carol 如何通过 Axios](https://dev.to/codeply/build-a-simple-crud-app-with-airtable-api-vue-vuetify-5565)访问 Airtable 的这篇精彩的[文章)我找到了在行创建时发送邮件的自动化操作。如果在表上创建新行,则可以发送邮件。

设置Airtable表

为此,我必须为这些消息设置一个附加表。我称它为ContactMessages:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HZBY4j-k--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/f6xyv9nkcibtz5gwictt.png)

创建自动化操作

现在您可以在此表上定义自动化操作:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ROqDEuGr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/m019koqckhqmwd5yy58r.png)

以_何时创建记录_作为触发器。对于现在的操作,我们可以添加_发送电子邮件_。接收者 (To) 的定义很重要。我使用固定的电子邮件将其隐藏在前端源中,但也可以通过 REST 服务传递它并将其作为表格的一个字段。

顺便说一句,不要忘记启用自动化任务:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zcNqN8e_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/9tgmzcao66etqjpg1zcj.png)

服务在 vue

现在我们扩展 vue 项目并添加一个新的服务contact.service.js:

import airtableBase from './airtable.service'
const TABLE_NAME = 'ContactMessages'

const contactService = {
  async send (item) {
    const data = {
      fields: item
    }

    // save the record
    const response = await airtableBase.post(`${TABLE_NAME}`, data)
    return {
      id: response.id,
      ...response.fields
    }
  }
}

export default contactService

进入全屏模式 退出全屏模式

将 Airtable 用于整个项目,有一个用于与 Airtable (token, base)airtable.service.js的基本连接的包装器:

import axios from 'axios'

const airtableBase = axios.create({
  baseURL: `https://api.airtable.com/v0/${process.env.VUE_APP_AIRTABLE_BASE}/`,
  headers: {
    Authorization: 'Bearer ' + process.env.VUE_APP_AIRTABLE_API_KEY,
    'Content-Type': 'application/json'
  }
})

export default airtableBase

进入全屏模式 退出全屏模式

有关如何通过 API 使用 Airtable 的详细信息,我想再次参考Carols post。

现在我们创建一个 vue 组件来发送联系信息:

<template>
  <div class="create-form">
    <b-form
      v-if="showForm"
      @submit="onSubmit"
    >
      <b-form-group
        label="Name"
      >
        <b-form-input
          v-model="contact.Name"
          type="text"
          placeholder="Name"
          required
        />
      </b-form-group>
      <b-form-group
        label="E-Mail"
      >
        <b-form-input
          v-model="contact.Email"
          type="email"
          placeholder="E-Mail"
          required
        />
      </b-form-group>
      <b-form-group label="Message">
        <b-form-textarea
          v-model="contact.Notes"
          rows="6"
          max-rows="24"
        />
      </b-form-group>

      <b-button
        type="submit"
        variant="primary"
        class="my-5"
      >
        Send
      </b-button>
    </b-form>
    <b-alert
      v-if="success"
      variant="success"
      class="my-5"
      show
    >
      Message was send sucessfully. Thanks for contacting us.
    </b-alert>
  </div>
</template>

<script>
import contactService from '@/services/contact.service'
export default {
  name: 'CreateForm',
  data () {
    return {
      contact: {},
      showForm: true,
      success: false
    }
  },
  methods: {
    onSubmit (event) {
      event.preventDefault()
      this.showForm = false
      contactService.send(this.contact).then(() => {
        this.success = true
      })
    }
  }
}
</script>

进入全屏模式 退出全屏模式

我使用BootstrapVue作为表单。这可以用任何其他表单代码替换。

简历

使用此解决方案,您可以为 vue 应用程序直接发送的邮件创建许多不同的模板和接收器。一些联系表格可以在几分钟内免费创建。

此解决方案目前缺少一件事:垃圾邮件保护。

您如何看待这个解决方案?

您对如何防范机器人有什么建议吗?当然有 Google 的 ReCaptcha,但我更喜欢免费的开源解决方案。