如何发送包含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
});
}
}
}
答案 0 :(得分：4)
无法直接从Vue发送邮件，因为您需要某种服务器来处理邮件协议。这绝不能直接从浏览器完成。我不熟悉PHP，所以我无法帮助你。在节点中，您需要nodemailer包和一些smtp服务器来处理电子邮件，如Amazon Simple Email Server（或者您可以使用您的Gmail帐户）。你还可以做的是使用axios向SendGrid或Mandrill或类似的服务发送一个帖子请求。他们会将您的请求转换为电子邮件并将其发送到您请求正文中指定的地址。
更多信息：
答案 1 :(得分：0)
这是我的做法：
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值。因此，数据在发布之前必须使用querystring依赖性进行格式化。
查询字符串可以通过npm安装：
npm i querystring
答案 2 :(得分：0)
<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));
?>