使用 Angular 连接 Express nodemailer

Question

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

我的快递

router.get('/sendQuote', function(req, res) {

var data = req.query;

var mailOptions = {
    from: 'planacte@gmail.com', // 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: 'planacte@gmail.com', // 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-model 没有绑定到消息对象：

<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">

使用 Angular 连接 Express nodemailer

Connect Express nodemailer with Angular

forms

express

angularjs

nodemailer