如何使用 Vuejs 发送电子邮件？
Posted
技术标签:
【中文标题】如何使用 Vuejs 发送电子邮件？【英文标题】：how to send an email with Vuejs? 【发布时间】：2018-08-15 09:58:33 【问题描述】：如何使用 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
);
【问题讨论】：
浏览器不发送邮件。服务器可以。你需要调用一些api来发送邮件。 您可能想看看EmailJS，它允许直接从 javascript 使用预构建的模板发送电子邮件 [披露 - 我是创建者之一] 【参考方案1】：直接从 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/
【讨论】：
【参考方案2】：我就是这样做的：
从服务器端发送邮件
PHP mail() 函数可以正常工作。这里没什么特别的。
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 值。因此，数据在发布之前必须使用querystringdependency 进行格式化。
Querystring 可以用 npm 安装：
npm i querystring
【讨论】：
【参考方案3】：<template>
<div class="request-a-callback-form">
<transition name="fade" mode="out-in">
<div v-if="sent">
<p>Thanks for contacting us, we will get back to you shortly...</p>
</div>
</transition>
<form v-on:submit="sendForm">
<input type="text" v-model="ContactForm.name" placeholder="Your Name">
<input type="text" v-model="ContactForm.email" placeholder="Email Address">
<input type="text" v-model="ContactForm.phone" placeholder="Phone Number">
<input type="text" v-model="ContactForm.subject" placeholder="Subject">
<textarea v-model="ContactForm.message" rows="8" cols="80" class="form-control">
</textarea>
<br>
<button data-text="submit" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<script>
export default
data()
return
sent: false,
ContactForm:
name : '',
email: '',
phone: '',
subject: '',
message: ''
,
methods:
sendForm(e)
e.preventDefault()
console.log(this.ContactForm)
this.$axios.post('api/mailserver.php',
querystring.stringify(this.ContactForm)).then(res =>
this.sent = true
)
</script>
Your php Server
<?php
// Allow from any origin
if(isset($_SERVER["HTTP_ORIGIN"]))
// You can decide if the origin in $_SERVER['HTTP_ORIGIN'] is something you want to
allow, or as we do here, just allow all
header("Access-Control-Allow-Origin: $_SERVER['HTTP_ORIGIN']");
else
//No HTTP_ORIGIN set, so we allow any. You can disallow if needed here
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 600"); // cache for 10 minutes
if($_SERVER["REQUEST_METHOD"] == "OPTIONS")
if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"]))
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT");
//Make
sure you remove those you do not want to support
if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]))
header("Access-Control-Allow-Headers:
$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']");
//Just exit with 200 OK with the above headers for OPTIONS method
exit(0);
//From here, handle the request as it is ok
if(!empty($_POST['name']))
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$message = "$message";
$to_email = '<email to be sent to>';
$subject = "$subject";
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
$headers[] = "From: <$email>";
mail($to_email, $subject, $message, implode("\r\n", $headers));
?>
【讨论】：
以上是关于如何使用 Vuejs 发送电子邮件？的主要内容，如果未能解决你的问题，请参考以下文章