使用 Nodemailer 在 Angular 中创建联系表单
Creating a contact form in Angular with Nodemailer
我正在尝试为我的站点创建联系表单。我使用的是 MEAN 堆栈,因此 nodemailer 模块似乎很适合使用。
我创建了一个端点 '/api/contact'
,它接受 POST 请求并使用该请求中的数据发送邮件。
然后我的 angular 应用程序中有一个表单,该表单在提交时调用一个生成 http 的函数。
希望这听起来是正确的。顺便说一句,我一直在使用 Yeoman angular-fullstack 生成器,所以我的代码遵循该结构。
当应用程序在我的控制台中加载时,我看到了 500 错误代码,然后当我查看日志时,我看到在读取我的 from
和 body
属性时出错=46=].
这是我的代码:
app.js
...
var express = require('express');
---
// Setup server
var app = express();
var server = require('http').createServer(app);
require('./config/express')(app);
require('./routes')(app);
// Start server
server.listen(config.port, config.ip, function () {
console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});
// Expose app
exports = module.exports = app;
routes.js
module.exports = function(app) {
// Insert routes below
app.use('/api/contact', require('./api/contact'));
...
./api/contact/index.js
var express = require('express');
var controller = require('./contact.controller');
var router = express.Router();
router.post('/', controller.send);
module.exports = router;
./api/contact/contact.controller.js
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: //removed
pass: //removed
}
});
exports.send = function(req,res){
var mailOptions = {
to: //removed - my email address,
subject: 'New request on lumbajack from ',
from: req.data.from,
html: req.data.body
};
transporter.sendMail(mailOptions, function(err, info){
if (err) {
console.log(err);
}else{
console.log('Message sent: ' + info.response);
}
});
}
然后在客户端,我的angular控制器
angular.module('lumbajackApp')
.controller('MainCtrl', ['$http', function ($http) {
var ctrl = this;
ctrl.emailData = {
from: '',
name: '',
body: ''
};
ctrl.postMail = function (data) {
$http.post('/api/contact', data);
};
}]);
最后是我的 HTML
<form ng-submit="main.postMail(main.emailData)" novalidate>
<input type="text" ng-model="main.emailData.from">
<input type="text" ng-model="main.emailData.name">
<input type="text" ng-model="main.emailData.body">
<input type="submit" value="Submit">
</form>
谢谢大家。尝试执行控制台日志并且可以看到数据没有被传递,此外,端点在页面加载而不是提交时被命中。
通过更改 angular 代码以立即停止正在调用的函数来解决,然后必须在 post 调用和 res.end() 声明中添加响应!
您在服务器控制器中缺少回调。我重写了下面的一些代码
(server/api/contact/contact.controller.js)
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: me@gmail.com, // your email here
pass: xxxxxxx // your password here
}
});
exports.send = function(req,res){
var htmlContent = '<p>Name: ' + req.body.name + '</p>' +
'<p>Email: ' + req.body.email + '</p>' +
'<p>Message: ' + req.body.message + '</p>';
var mailOptions = {
to: 'me@gmail.com', // your email here
subject: 'New message',
from: req.body.name + ' <' + req.body.email + '>',
sender: req.body.email,
html: htmlContent
};
transporter.sendMail(mailOptions, function(err, info){
if (err) {
console.log(err);
}else{
console.log('Message sent: ' + info.response);
return res.json(201, info);
}
});
}
然后在您的 Angular 控制器中:(client/app/main/main.controller.js)
'use strict';
angular.module('myApp')
.controller('MainCtrl', function ($scope, $http) {
$scope.postData = {};
$scope.postMail = function (contact) {
// Check form validation
if ($scope.contactForm.$invalid === true) {
return
}
// wrap all your input values in $scope.postData
$scope.postData = angular.copy(contact);
$http.post('/api/contact', $scope.postData)
.success(function(data) {
// Show success message
})
.error(function(data) {
// Show error message
});
};
});
您的表单将如下所示:(在 client/app/main/main.html)
<form name="contactForm" novalidate>
<input type="text" name="name" ng-model="contact.name" placeholder="Your name" required>
<input type="email" name="email" ng-model="contact.email" placeholder="Your email" required>
<textarea name="message" ng-model="contact.message" placeholder="Your message" required>{{message}}</textarea>
<button type="submit" ng-click="postMail(contact)">Send</button>
</form>
我正在尝试为我的站点创建联系表单。我使用的是 MEAN 堆栈,因此 nodemailer 模块似乎很适合使用。
我创建了一个端点 '/api/contact'
,它接受 POST 请求并使用该请求中的数据发送邮件。
然后我的 angular 应用程序中有一个表单,该表单在提交时调用一个生成 http 的函数。
希望这听起来是正确的。顺便说一句,我一直在使用 Yeoman angular-fullstack 生成器,所以我的代码遵循该结构。
当应用程序在我的控制台中加载时,我看到了 500 错误代码,然后当我查看日志时,我看到在读取我的 from
和 body
属性时出错=46=].
这是我的代码:
app.js
...
var express = require('express');
---
// Setup server
var app = express();
var server = require('http').createServer(app);
require('./config/express')(app);
require('./routes')(app);
// Start server
server.listen(config.port, config.ip, function () {
console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});
// Expose app
exports = module.exports = app;
routes.js
module.exports = function(app) {
// Insert routes below
app.use('/api/contact', require('./api/contact'));
...
./api/contact/index.js
var express = require('express');
var controller = require('./contact.controller');
var router = express.Router();
router.post('/', controller.send);
module.exports = router;
./api/contact/contact.controller.js
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: //removed
pass: //removed
}
});
exports.send = function(req,res){
var mailOptions = {
to: //removed - my email address,
subject: 'New request on lumbajack from ',
from: req.data.from,
html: req.data.body
};
transporter.sendMail(mailOptions, function(err, info){
if (err) {
console.log(err);
}else{
console.log('Message sent: ' + info.response);
}
});
}
然后在客户端,我的angular控制器
angular.module('lumbajackApp')
.controller('MainCtrl', ['$http', function ($http) {
var ctrl = this;
ctrl.emailData = {
from: '',
name: '',
body: ''
};
ctrl.postMail = function (data) {
$http.post('/api/contact', data);
};
}]);
最后是我的 HTML
<form ng-submit="main.postMail(main.emailData)" novalidate>
<input type="text" ng-model="main.emailData.from">
<input type="text" ng-model="main.emailData.name">
<input type="text" ng-model="main.emailData.body">
<input type="submit" value="Submit">
</form>
谢谢大家。尝试执行控制台日志并且可以看到数据没有被传递,此外,端点在页面加载而不是提交时被命中。
通过更改 angular 代码以立即停止正在调用的函数来解决,然后必须在 post 调用和 res.end() 声明中添加响应!
您在服务器控制器中缺少回调。我重写了下面的一些代码
(server/api/contact/contact.controller.js)
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: me@gmail.com, // your email here
pass: xxxxxxx // your password here
}
});
exports.send = function(req,res){
var htmlContent = '<p>Name: ' + req.body.name + '</p>' +
'<p>Email: ' + req.body.email + '</p>' +
'<p>Message: ' + req.body.message + '</p>';
var mailOptions = {
to: 'me@gmail.com', // your email here
subject: 'New message',
from: req.body.name + ' <' + req.body.email + '>',
sender: req.body.email,
html: htmlContent
};
transporter.sendMail(mailOptions, function(err, info){
if (err) {
console.log(err);
}else{
console.log('Message sent: ' + info.response);
return res.json(201, info);
}
});
}
然后在您的 Angular 控制器中:(client/app/main/main.controller.js)
'use strict';
angular.module('myApp')
.controller('MainCtrl', function ($scope, $http) {
$scope.postData = {};
$scope.postMail = function (contact) {
// Check form validation
if ($scope.contactForm.$invalid === true) {
return
}
// wrap all your input values in $scope.postData
$scope.postData = angular.copy(contact);
$http.post('/api/contact', $scope.postData)
.success(function(data) {
// Show success message
})
.error(function(data) {
// Show error message
});
};
});
您的表单将如下所示:(在 client/app/main/main.html)
<form name="contactForm" novalidate>
<input type="text" name="name" ng-model="contact.name" placeholder="Your name" required>
<input type="email" name="email" ng-model="contact.email" placeholder="Your email" required>
<textarea name="message" ng-model="contact.message" placeholder="Your message" required>{{message}}</textarea>
<button type="submit" ng-click="postMail(contact)">Send</button>
</form>