我怎么能用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
});
}
}
}
5条答案
按热度按时间5us2dqdw1#
从Vue直接发送邮件是不可能的,因为你需要某种服务器来处理邮件协议。这永远不可能直接从浏览器完成。我不熟悉PHP,所以我帮不了你。在节点中,你需要nodemailer包和一些smtp服务器来处理电子邮件,比如AmazonSimpleMailServer(或者你可以使用你的gmail帐户)你也可以使用axios发送一个post请求到SendGrid或者Mandrill或者类似的服务,他们会把你的请求转换成电子邮件,然后发送到你请求正文中指定的地址。
更多信息:
https://sendgrid.com/docs/API_Reference/Web_API/mail.html
https://mandrillapp.com/api/docs/
rsl1atfo2#
我是这样做的:
从服务器端发送邮件
PHP的
mail()
函数会很好地工作,这里没有什么花哨的。mail.php
**-此文件必须位于服务器上可访问的位置。请注意,头值必须可信(没有未经验证的用户提交值)。
将数据发送到邮件脚本
然后,VueJS应该向邮件脚本发送适当的数据:
这里,需要注意的是Axios的默认行为是发布JSON对象,但是这样做的话,PHP会收到一个空的
$_POST
值,因此在发布之前必须使用querystring
依赖项格式化数据。可以使用npm安装Querystring:
npm i querystring
ymzxtsji3#
ha5z0ras4#
你也可以使用EmailJS发送客户端电子邮件。它可以帮助你使用vuejs或任何其他客户端技术发送电子邮件,一旦你创建了一个帐户,创建了一个电子邮件模板,并使用VueJS触发电子邮件,就可以将EmailJS连接到支持的电子邮件服务之一。这里有一个链接到他们的文档https://www.emailjs.com/docs/examples/vuejs/
fivyi3re5#
您可以试试
mailjs
软件包。mailjs