如何发送电子邮件与Vuejs？

Question

如何发送包含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
        });
      }
    }
  }

Answer 1

我就是这样做的：

从服务器端发送邮件

PHPmail()函数将正常工作。这里没什么特别的。

mail.php- 该文件必须位于您的服务器上可访问的位置。

<?php

$name = "Undefined name";

if(isset($_POST['name'])){
    $name = $_POST['name'];
}

$message = "<p>Hi!</p>";
$message .= "<p>Wazaaaaa $name</p>";

$to_email = 'dest@mail.com';
$subject = 'Mail subject';
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
$headers[] = 'From: Biloo <noreply@ydomain.com>';

mail($to_email, $subject, $message, implode("\r\n", $headers));

?>

请注意，标头值必须是可信的（没有未经验证的用户提交的值）。

将数据发送到邮件脚本

然后 VueJS 应该将适当的数据发送到邮件脚本：

components/Mail.vue

<template>
   <div>
      <transition name="fade" mode="out-in">
          <div v-if="sent">
              <p>Thanks</p>
          </div>
      </transition>
      </div>
      <div v-if="!sent" class="formGroup">
          <b-form @submit="onSubmit">
              <b-form-input
                  id="input-name"
                  v-model="form.name"
                  type="text"
                  required
                  placeholder="Name"
              />
              <b-button type="submit">
                  Contact
              </b-button>
          </b-form>
      </div>
   </div>
</template>

<script>
const querystring = require("querystring");

export default {
    data() {
        return {
          sent: false,
          form: {
              name: ""
          }
        };
    },
    methods: {
      onSubmit(e) {
          e.preventDefault();
          this.$axios
             .post(
                 "https://theServer.com/mail.php",
                  querystring.stringify(this.form)
             )
             .then(res => {
                 this.sent = true;
             });
      }
    }
};
</script>

这里，需要注意的是，Axios 的默认行为是发布 JSON 对象。然而，这样做，PHP 将收到一个空$_POST值。querystring因此，在发布数据之前，必须使用依赖项对数据进行格式化。

查询字符串可以通过 npm 安装：

npm i querystring

Answer 2

无法直接从Vue发送邮件,因为您需要某种服务器来处理邮件协议.这绝不能直接从浏览器完成.我不熟悉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/