Question

我正在尝试为我的网站创建一个联系表单。我正在使用MEAN堆栈，因此nodemailer模块似乎有意义使用。

我创建了一个端点'/api/contact'，接受POST请求并使用该请求上的数据发送邮件。

然后我在我的角度应用程序中有一个表单，在提交时会调用一个创建http的函数。

希望这听起来很正确。另外，我一直在使用Yeoman angular-fullstack生成器，因此我的代码遵循该结构。

当应用程序加载到我的控制台时，我看到500错误代码，然后当我查看日志时，我看到我在contact.controller中读取from和body属性时出错

这是我的代码：

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 /接触/ index.js

var express = require('express');
var controller = require('./contact.controller');

var router = express.Router();

router.post('/', controller.send);

module.exports = router;

./ API /接触/ 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.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>

Answer 1

您错过了服务器控制器中的回调。我重写了下面的一些代码

（服务器/ API /接触/ 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>

Answer 2

谢谢你们。尝试执行控制台日志并且可以看到数据没有被传递，此外，端点被点击页面加载而不是提交。

通过更改角度代码来解决以立即停止调用的函数，然后必须在post调用和res.end（）声明中添加响应！

使用Nodemailer在Angular中创建联系表单

2 个答案: