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 解决了