Nodejs, Express + Angular POST 404

Question

我正在开发我的MEAN堆栈（使用MySQL而非MongoDB，同时还使用EJS模板引擎）应用程序，但在向MySQL数据库提交数据时遇到问题。如标题所示，在控制台中我收到了'404'错误，我认为这表示post方法无法找到。如果我将该方法放在服务器文件中，则可以正常运行该post方法，但我会收到“无效的JSON”消息。

任何人对此发生的原因有任何想法吗？

我的当前代码列在下面。我是一个初学者，所以我真的很感激详细解释，因为这是学习哪里出错的最好方式。

服务器/应用：

> var express = require('express'); var path = require('path'); //var
> favicon = require('serve-favicon'); var logger = require('morgan');
> var cookieParser = require('cookie-parser'); var bodyParser =
> require('body-parser'); var http = require('http');
> 
> var mysql = require('mysql');
> 
> var app = express();
> 
> var port = 1337;
> 
> // view engine setup app.set('views', path.join(__dirname, 'views'));
> app.set('view engine', 'ejs');
> 
> // uncomment after placing your favicon in /public
> //app.use(favicon(__dirname + '/public/favicon.ico'));
> app.use(logger('dev')); app.use(bodyParser.json());
> app.use(bodyParser.urlencoded({ extended: false }));
> app.use(cookieParser());
> app.use(require('stylus').middleware(path.join(__dirname, 'public')));
> app.use(express.static(path.join(__dirname, 'public')));
> app.use('/bower_components', express.static(__dirname +
> '/bower_components'));
> 
> var clientRoute = require('./routes/clientConfig.js');
> 
> new clientRoute(app);
> 
> app.use(require('./server/Dao/clientDao.js'));
> 
> module.exports = app;
> 
> app.set('port', process.env.PORT || 1337);
> http.createServer(app).listen(app.get('port'), function () {
>     console.log('Express server listening on port ' + app.get('port')); });

Angular控制器：

> var clientModule = angular.module('clientModule', []);
> 
> clientModule.controller('clientController', ['$scope', '$http',
> function ($scope, $http) {
>     console.log("Hello world from controller");
>     
>     $scope.addClient = function () {
>         console.log($scope.client);
>         
>         $http.post('/createClient', $scope.client).success(function(response) {
>             console.log(response);
>         })
>     } }]);

服务器端发布（我不太清楚，但似乎与我的服务器文件夹没有关联）：

>  var express = require('express'); var router = express.Router(); var
> connectionProvider = require('../mysqlConnectionStringProvider.js');
> 
> router.post('/createClient', function (req, res) {
>     console.log(req.body); 
>     
>     var connection = connectionProvider.mysqlConnectionStringProvider.getMySqlConnection();
> 
>     var insertStatement = "INSERT INTO Clients SET?"
>     
>     var client = { 
>         clientName : req.body.client.clientName, // this should be req.body.client.clientName 
>         clientAddress : req.body.client.clientAddress // this should be req.body.client.clientAddress 
>     }
> 
>      
>     if (connection) {
>         connection.query(insertStatement, client, function (err, result) {
> 
>             if (err) {
>                 console.log(err);
>             }
> 
>             //console.log(result);
>         });
>     }
>     connectionProvider.mysqlConnectionStringProvider.closeMySqlConnection(connection);
> });
> 
> router.get('/createClient', function (req, res) {
>     
>     res.render('clients/createClient.ejs', {title : 'Add client'}); }) 
> 
> module.exports = router;

Html:

<% include ../layout %>

    <div class="container" ng-app="clientModule" ng-controller="clientController">
        <form class="navbar-form navbar-left" action="/createClient" method="post" name="formClient">
            <div class="row">
                <div class="form-group">

                    <label for="">Client name</label>
                    <input type="text" class="form-control" placeholder="Please enter client name" name="clientName" ng-model="client.clientName" style="width: 100%" required>

                </div>
            </div>
            <div>&nbsp;</div>
            <div class="row">
                <div class="form-group">

                    <label for="">Client address</label>
                    <input type="text" class="form-control" placeholder="Please enter client address" name="clientName" ng-model="client.clientAddress" style="width: 100%" required>
                    <p>{{client.clientAddress}}</p>

                </div>
            </div>
            <div>&nbsp;</div>

            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" ng-click="addClient()">Create client</button>
                </div>
            </div>
        </form>
    </div>

    <script src="./controllers/clients/clientController.js"></script>

非常感谢！

- Mick

---

这篇文章有问题。我收到了一个“404错误”的提示，这意味着该文章未被调用。我只是不知道出了什么错。抱歉解释得不够清楚，我已经编辑过我的文章了。 - Mick

我看到了一些拼写错误。在你的HTML中，你有ng-model="clients.clientName"，注意clients，而在你的控制器中，有console.log($scope.client);，注意client。还有，在$http.post('/createClient', $scope.createClient)中，你将函数createClient传递给服务器，但你想要传递的是$scope.client，但首先需要在HTML中进行更改，这应该可以解决“我收到一个显示'无效JSON'的消息”的问题。另外，我不确定app.exports应该做什么？我相信它应该是module.exports。 - Molda

要使用路由文件，请使用require('./routes/clientConfig.js')(app);，文件应该像这样：module.exports = function(app){ app.get(...);}不需要使用Router，当然Router也有其用途，但你不必使用它。我展示的是其中一种方法。 - Molda

感谢@Molda的指引！我已经在我的服务器文件中使'post'函数正常工作了。但是，我该如何让它在另一个文件夹中工作呢？我觉得我需要在那个文件中引用'app'，以便它知道如何运行'express'等等。但我不知道如何进行这种引用？ - Mick

当您单击addClient时，您的clientController中console.log($scope.client)的输出是什么？ - Molda

Answer 1

如果要使用另一个文件中的路由，可以按照以下步骤进行操作

routes/clientConfig.js

var express = require('express');
var router = express.Router();

router.get(...); 
router.post(...); 
router.put(...); 

module.exports = router;

server.js

...
app.use(require('./routes/clientConfig.js'));
...

- Molda