将Express nodemailer与Angular连接

Question

我正在尝试制作联系表格，服务器端运行良好。但是我不知道如何将 Angular 连接到 html 表单并使用 Express 发送。任何人都将不胜感激任何帮助。

我的快递

router.get('/sendQuote', function(req, res) {
var data = req.query;
var mailOptions = {
    from: '[e-mail]', // sender address
    name: data.contactName,
    email: data.contactEmail,
    to: data.email, // list of receivers
    subject: "Request for a Quote from " + data.contactName, // Subject line
    text: data.contactMsg, // plaintext body
    html: '<p> email: ' + data.contactEmail + 
        '</p><p> phone: ' + data.contactPhone + '</p><br>' 
        +data.contactMsg // html body
};
console.log(mailOptions)
// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error);
    }
    console.log('Message sent: ' + info.response);
});

}）;

所以，我的 html：

<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
 <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
  <div class="form-group">
    <input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="contactName" required>
  </div>
  <div class="form-group">
    <input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
  </div>
  <div class="form-group">
    <input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
  </div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
  <div class="form-group">
    <textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
  </div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
    <input type="submit" class="btn btn-custom up form-button" value="Send Message">

主要问题就在这里，如何将Angular与HTML和Express粘合在一起。我可以发送电子邮件，但在姓名、电子邮件等字段中未定义。:

app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll', 
function($scope, $interval, $http, $location, $anchorScroll) {


  $scope.sendMail = function () {
    $scope.message = {};
    $http.get('/send/sendQuote', $scope.message).
       success(function(data, status, headers, config) {
         // $scope.message = data.message;
         console.log($scope.message)
      });
  }

}]）;

Answer 1

我认为您应该首先将此请求设为 POST 而不是 GET 请求。

router.post('/sendQuote', function(req, res) {
var data = req.body;
var mailOptions = {
    from: '[e-mail]', // sender address
    name: data.contactName,
    email: data.contactEmail,
    to: data.email, // list of receivers
    subject: "Request for a Quote from " + data.contactName, // Subject line
    text: data.contactMsg, // plaintext body
    html: '<p> email: ' + data.contactEmail + 
        '</p><p> phone: ' + data.contactPhone + '</p><br>' 
        +data.contactMsg // html body
};
console.log(mailOptions)
// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error);
    }
    console.log('Message sent: ' + info.response);
    res.send(200); // let the client know it sent ok.
});

现在，让我们来看看你的 Angular 代码。您似乎希望对象 $scope.message 保存您的表单字段数据。您应该在控制器的开头将其定义为一个对象。

app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll', 
function($scope, $interval, $http, $location, $anchorScroll) {
  $scope.message = {};
  $scope.sendMail = function () {
    //$scope.message = {}; -- this was clearing the object
    $http.post('/send/sendQuote', $scope.message).
       success(function(data, status, headers, config) {
         // you can clear $scope.message if you want here
         // $scope.message = data.message;
         console.log($scope.message)
      });
  }
}]);

HTML 有一个 ng 模型未绑定到消息对象：

<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
 <div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
  <div class="form-group">
    <input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="message.contactName" required>
  </div>
  <div class="form-group">
    <input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
  </div>
  <div class="form-group">
    <input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
  </div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
  <div class="form-group">
    <textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
  </div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
    <input type="submit" class="btn btn-custom up form-button" value="Send Message">