我正在使用服务器中间件处理来自联系人表单的POST。
问题是,我创建的中间件文件似乎没有运行。我使用VSCode添加了断点,它们不会在contact.js
中触发,但会在m11o1p(在VSCode中,我确保在适当的客户端/服务器端环境中添加断点)中触发。甚至我在contact.js
中的控制台日志信息也没有出现。就好像文件丢失了一样。
发生的是POST调用被发出并保持打开,没有响应。POST的属性和值都在那里。
我怀疑createTransport({sendmail: true})
会失败,因为我的开发系统上没有sendmail,但没有抛出错误。
你能看看我有没有遗漏什么吗?我只想在提交表单时发送一封电子邮件,但这似乎太难了!
我被ij0k1引导
已安装所有软件包。
这就是我如何设置的。。。nuxt.config.js
export default {
.
.
.
serverMiddleware: [
'~/api/contact'
],
.
.
.
}
pages/contact.vue
<template>
.
.
.
<form class="form-email row mx-0"
data-success="Thanks for your enquiry, we'll be in touch shortly."
data-error="Please fill in all fields correctly."
@submit.prevent="submitForm">
<div class="col-md-6 col-12 text-xl"> <label>Your Name:</label> <input v-model="name" type="text" name="name"
class="validate-required"> </div>
<div class="col-md-6 col-12 text-xl"> <label>Email Address:</label> <input v-model="email" type="email" name="email"
class="validate-required validate-email"> </div>
<div class="col-md-12 col-12 text-xl"> <label>Message:</label> <textarea v-model="message" rows="4" name="message"
class="validate-required"></textarea> </div>
<div class="col-md-5 col-lg-4 col-6"> <button type="submit" class="btn btn--primary type--uppercase">Submit</button> </div>
</form>
.
.
.
</template>
<script>
export default {
data () {
return {
name: '',
email: '',
message: ''
}
},
mounted() {
mr.documentReady($);
mr.windowLoad($);
},
methods: {
async submitForm () {
try {
await this.$axios.$post('', {
name: this.name,
email: this.email,
msg: this.message
});
await new Promise(resolve => setTimeout(resolve, 2500));
} catch (e) {
console.error(e);
}
}
}
}
</script>
api/contact.js
const express = require('express')
const nodemailer = require('nodemailer')
const validator = require('validator')
const xssFilters = require('xss-filters')
const app = express()
app.use(express.json())
app.get('/', function (req, res) {
res.status(405).json({ error: 'sorry!' })
})
app.post('/', function (req, res) {
const attributes = ['name', 'email', 'message'] // Our three form fields, all required
// Map each attribute name to the validated and sanitized equivalent (false if validation failed)
const sanitizedAttributes = attributes.map(n => validateAndSanitize(n, req.body[n]))
// True if some of the attributes new values are false -> validation failed
const someInvalid = sanitizedAttributes.some(r => !r)
if (someInvalid) {
// Throw a 422 with a neat error message if validation failed
return res.status(422).json({ 'error': 'Ugh.. That looks unprocessable!' })
}
sendMail(...sanitizedAttributes)
res.status(200).json({ 'message': 'OH YEAH' })
})
module.exports = {
path: '/api/contact',
handler: app
}
const validateAndSanitize = (key, value) => {
const rejectFunctions = {
name: v => v.length < 4,
email: v => !validator.isEmail(v),
message: v => v.length < 25
}
// If object has key and function returns false, return sanitized input. Else, return false
return rejectFunctions.hasOwnProperty(key) && !rejectFunctions[key](value) && xssFilters.inHTMLData(value)
}
const sendMail = (name, email, message) => {
console.info('Info: 🙂'
+'\n Contact page submission.'
+'\n Date: '+ new Date().toLocaleTimeString() +' '+ new Date().toLocaleDateString()
+'\n Name: '+ name
+'\n Email: '+ email
+'\n Message: '
+'\n'
+'\n'+ message
+'\n'
+'\n End of submission.'
+'\n');
let transporter = nodemailer.createTransport({
sendmail: true,
newline: 'unix',
path: '/usr/sbin/sendmail'
})
transporter.sendMail({
from: email,
to: 'mail@foobar.com',
subject: 'Foo Bar: Contact Form',
text: message
}, (err, info) => {
console.log(info.envelope);
console.log(info.messageId);
})
}
3条答案
按热度按时间c90pui9n1#
我最近发布了一个Nuxt.js module,允许通过路由和注入变量发送电子邮件。你可以这样使用它:
在
nuxt.config.js
文件中:在组件中使用它:
6ss1mwsb2#
您的路径不起作用,因为您没有调用正确的路径,在
serverMiddleware
中,您说/api/contact
指向contact.js
文件。这意味着
/api/contact
等于contact.js
的路由,因此,您应该调用:oo7oh9g93#
@曼尼尔在一次电话中亲切地向我指出,在我的
nuxt.config.js
中,我将环境设置为在0.0.0.0上加载,以便我可以从另一台机器访问它。我还需要使用相同的IP地址设置axios配置,这就是为什么它找不到
api/contact.js
的原因。我后来了解到,Nuxt2的默认脚手架,当包括axios时,是将其添加到
nuxt.config.js
以覆盖IP中的更改:抱歉,我应该在问题中发布我的完整
nuxt.config.js
,因为它与默认设置不同。