javascript - 如何使用 Vuejs 发送电子邮件?

标签 javascript forms email vue.js

如何使用 Vuejs2 发送电子邮件。我设法获取输入数据并将它们转换为 json,但我无法将它们发送到邮箱。

我寻找PHPMailer的一面但是面对PHP和Vue不要混用。

如何发送表单内容?

模板:

 <div class="JC-contact__form">
  <b-form @submit="onSubmit" v-if="show">

    <b-form-group class="JC-contact__form--lastName">
      <b-form-input type="text" v-model="form.lastName"> </b-form-input>
    </b-form-group>

    <b-form-group class="JC-contact__form--firstName">
      <b-form-input type="text" v-model="form.firstName"> </b-form-input>
    </b-form-group>

    <b-form-group>
      <b-form-input type="text" v-model="form.topic"> </b-form-input>
    </b-form-group>
    <b-form-group>
      <b-form-input type="email" v-model="form.email"></b-form-input>
    </b-form-group>

    <b-form-textarea v-model="form.text"></b-form-textarea>

    <b-button type="submit">Envoyer</b-button>
  </b-form>

</div>

脚本:

  export default {
    name: 'Contact',
    data () {
      return {
        form: {
          lastName: '',
          firstName: '',
          topic: '',
          email: '',
          text: ''
        },
        file: null,
        show: true
      }
    },
    methods: {
      onSubmit (evt) {
        evt.preventDefault();
        alert(JSON.stringify(this.form));
      },
      onReset (evt) {
        evt.preventDefault();
        /* Reset our form values */
        this.form.lastName = '';
        this.form.firstName = '';
        this.form.topic = '';
        this.form.email = '';
        this.form.text = '';
        /* Trick to reset/clear native browser form validation state */
        this.show = false;
        this.$nextTick(() => {
          this.show = true
        });
      }
    }
  }

最佳答案

直接从 Vue 发送邮件是不可能的,因为您需要某种服务器来处理邮件协议(protocol)。这永远不能直接从浏览器完成。我不熟悉 PHP,所以我无法帮助您。在节点中,您需要 nodemailer 包和一些 smtp 服务器来处理电子邮件,例如 Amazon Simple Email Server(或者您可以使用您的 gmail 帐户)。您还可以使用 axios 向 SendGrid 或 Mandrill 或类似的服务发送发布请求。他们会将您的请求转换为电子邮件,并将其发送到您在请求正文中指定的地址。

更多信息在这里:

https://sendgrid.com/docs/API_Reference/Web_API/mail.html

https://mandrillapp.com/api/docs/

关于javascript - 如何使用 Vuejs 发送电子邮件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49149550/

相关文章:

javascript - 如何 Jest 模拟文件夹中的所有文件

javascript - 促销代码链接到不同的页面

javascript - 防止表单提交和点击 keyup 事件处理程序不起作用

javascript - JavaScript 中公共(public)字段声明的意义是什么?

javascript - Node 回调中出现意外的 token 函数

javascript - 停止从 javascript 提交表单

html - gmail html电子邮件背景颜色

email - Mailkit如何发送和检查异步SMTP

php - 无法通过 Mandrill 发送 BCC 电子邮件(通过 Laravel)

javascript - 解析,通过ObjectID将数据设置给用户