Angular Nodemailer 应用程序和路由未链接到表单提交 /POST
Angular with Nodemailer app & routes not linking on form submit /POST
我已经一年多没有使用 Node/Express 所以我有点生疏了。我遵循了许多其他示例来设置 Angular 表单以发送 /POST 请求,然后使用 nodemailer sendMail() 方法。当我在表单上单击提交时,没有任何反应,但是 Angular 控制器收到 200 响应。
server.js:
var express = require('express');
var app = express();
var port = 9000;
var apiRoutes = require('./app/routes.js');
var nodemailer = require('nodemailer');
var fs = require('fs');
var bodyParser = require('body-parser');
var safeKey = JSON.parse(fs.readFileSync('./safekey.json', 'utf-8'));
var transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: safeKey.emailUser + '@gmail.com',
pass: safeKey.emailPass
}
});
// set up our express application
app.use(express.static(__dirname + '/public/'));
app.use('/node_modules', express.static(__dirname + '/node_modules/'));
app.use('/scripts', express.static(__dirname + '/public/scripts/'));
app.use('/css', express.static(__dirname + '/public/css/'));
app.use('/html', express.static(__dirname + '/public/html'));
app.use('/img', express.static(__dirname + '/public/img'));
app.use('/fonts', express.static(__dirname + '/public/fonts'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.all('/*', function (req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname + '/public/html' });
});
app.use('/', apiRoutes);
app.post('/contact', function (req, res) {
console.log('hi, inside POST of /api/sendcontact');
var data = req.body;
var mailOptions = {
from: data.email,
to: 'myemail@gmail.com',
subject: '[LITSCO CONTACT FORM] Email sent by ' + data.name,
text: data.message
};
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
console.log(error);
res.json({ error: 'Email not sent' });
} else {
console.log('Message sent: ' + info.response);
console.log('Data:' + data.contactName);
res.json({ success: 'Email has been sent.' });
}
});
});
app.listen(port);
console.log('Up and running on Port: ' + port);
我决定不将 post 包含在我的 router.js 文件中。
Angular 控制器:
$scope.contactData = {
phone: '',
email: '',
name: '',
company: '',
message: ''
};
$scope.postData = {};
$scope.postMail = function (contact) {
// wrap all your input values in $scope.postData
$scope.postData = angular.copy(contact);
var req = {
method: 'POST',
url: '/contact',
headers: {
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
},
data: $scope.postData
};
$http(req)
.then(function successCallback(response) {
console.log('success');
//do something after success
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
console.log('error');
//do something after error
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
HTML
<form class="col s12" ng-submit="postMail(contactData)">
<div class="row">
<div class="input-field col s12 m6">
<input id="icon_prefix" type="text" ng-model="contactData.name">
</div>
<div class="input-field col s12 m6">
<input id="icon_telephone" type="tel" class="validate" ng-model="contactData.phone">
</div>
<div class="input-field col s12 m6">
<input id="icon_email" type="email" class="validate" ng-model="contactData.email">
</div>
<div class="input-field col s12 m6">
<input id="icon_business" type="tel" ng-model="contactData.company">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea" ng-model="contactData.message"></textarea>
</div>
</div>
<div class="row right">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
</button>
</div>
</form>
per @Rnice4christ app.all("/*".)
覆盖了 post,因此更改为 app.get
解决了
我已经一年多没有使用 Node/Express 所以我有点生疏了。我遵循了许多其他示例来设置 Angular 表单以发送 /POST 请求,然后使用 nodemailer sendMail() 方法。当我在表单上单击提交时,没有任何反应,但是 Angular 控制器收到 200 响应。
server.js:
var express = require('express');
var app = express();
var port = 9000;
var apiRoutes = require('./app/routes.js');
var nodemailer = require('nodemailer');
var fs = require('fs');
var bodyParser = require('body-parser');
var safeKey = JSON.parse(fs.readFileSync('./safekey.json', 'utf-8'));
var transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: safeKey.emailUser + '@gmail.com',
pass: safeKey.emailPass
}
});
// set up our express application
app.use(express.static(__dirname + '/public/'));
app.use('/node_modules', express.static(__dirname + '/node_modules/'));
app.use('/scripts', express.static(__dirname + '/public/scripts/'));
app.use('/css', express.static(__dirname + '/public/css/'));
app.use('/html', express.static(__dirname + '/public/html'));
app.use('/img', express.static(__dirname + '/public/img'));
app.use('/fonts', express.static(__dirname + '/public/fonts'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.all('/*', function (req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname + '/public/html' });
});
app.use('/', apiRoutes);
app.post('/contact', function (req, res) {
console.log('hi, inside POST of /api/sendcontact');
var data = req.body;
var mailOptions = {
from: data.email,
to: 'myemail@gmail.com',
subject: '[LITSCO CONTACT FORM] Email sent by ' + data.name,
text: data.message
};
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
console.log(error);
res.json({ error: 'Email not sent' });
} else {
console.log('Message sent: ' + info.response);
console.log('Data:' + data.contactName);
res.json({ success: 'Email has been sent.' });
}
});
});
app.listen(port);
console.log('Up and running on Port: ' + port);
我决定不将 post 包含在我的 router.js 文件中。
Angular 控制器:
$scope.contactData = {
phone: '',
email: '',
name: '',
company: '',
message: ''
};
$scope.postData = {};
$scope.postMail = function (contact) {
// wrap all your input values in $scope.postData
$scope.postData = angular.copy(contact);
var req = {
method: 'POST',
url: '/contact',
headers: {
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
},
data: $scope.postData
};
$http(req)
.then(function successCallback(response) {
console.log('success');
//do something after success
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
console.log('error');
//do something after error
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
HTML
<form class="col s12" ng-submit="postMail(contactData)">
<div class="row">
<div class="input-field col s12 m6">
<input id="icon_prefix" type="text" ng-model="contactData.name">
</div>
<div class="input-field col s12 m6">
<input id="icon_telephone" type="tel" class="validate" ng-model="contactData.phone">
</div>
<div class="input-field col s12 m6">
<input id="icon_email" type="email" class="validate" ng-model="contactData.email">
</div>
<div class="input-field col s12 m6">
<input id="icon_business" type="tel" ng-model="contactData.company">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea" ng-model="contactData.message"></textarea>
</div>
</div>
<div class="row right">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
</button>
</div>
</form>
per @Rnice4christ app.all("/*".)
覆盖了 post,因此更改为 app.get
解决了