我的 angular.js/express/node 应用程序中的路由和发布请求问题答案

【问题标题】：Issue with route and post request in my angular.js/express/node app我的 angular.js/express/node 应用程序中的路由和发布请求问题
【发布时间】：2018-03-05 15:58:30
【问题描述】：

这是我的 Angular 控制器和我的帖子请求：

$http.post('/formDevis', $scope.formData).then(function(response) {
  if (response.data) {
    $('#successModal').modal();
    console.log(response);
  }
}, function(response) {
  $('#errorModal').modal();
});

这是我的文件“server.js”和我的快速配置：

var express = require('express');
var path = require('path');
var nodeMailer = require('nodemailer');
var bodyParser = require('body-parser');

var app = express();
var port = 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.post('/formDevis', function(req, res) {
  const devis = req.body;
  res.send('it work');
});

好的，如果我这样做了，我会收到回复，并且我的表格也会发布。问题在于我的应用程序中的几个网址。如果我直接在浏览器中输入，我无法访问我的网址。示例：如果我输入“my.com/users”，它会抛出一个错误。

我有一个文件“routes.js”，其中包含使用 uiRouter 的所有路由。而且我想，可能我必须将该文件与我的快速配置连接起来吗？

我尝试添加这个：

app.use(function(req, res) {
  res.sendFile(__dirname + '/public/index.html');
});

然后，我所有的路线都工作了，我可以直接在浏览器中访问它们。但另一方面，我的发布请求不再有效。作为回应，它会向我发送我的 index.html 文件。

我尝试了几件事，但都没有奏效。我是新来表达的，如果我的问题很愚蠢，很抱歉。可能是我错过了一些明显的东西！感谢您的帮助

【问题讨论】：

您不能从浏览器发送 post 请求，因为浏览器发送请求是为了向服务器发送请求。访问静态文件使用 express.static。 app.use('/', express.static('public'))
如果您想让人们更容易提供帮助，请提出一个更好的问题。这个问题对我来说不清楚:)
@thomann061 对不起，如果我不清楚。使用我的实际代码，我可以使用 express（和 nodemailer）将表单发送到电子邮件地址，但我的路线有问题。如果我直接在浏览器中输入我的 url，比如 'myapp.com/user' ，我无法获取我的页面。我添加了我在帖子底部记下的代码行，然后，我的 url 工作正常，但我打破了我对表单的帖子请求。（对不起我的英语！我希望它更清楚，我不确定）

标签： angularjs express post routes

【解决方案1】：

这会将公共目录作为静态文件提供（未声明虚拟根）：

app.use(express.static(path.join(__dirname, 'public')));

因此，如果您有以下文件夹结构public/index.html，您可以访问这样的页面 - localhost:3000/index.html

public/css/styles.css 也是如此，您可以像这样访问该文件 - localhost:3000/css/styles.css

现在这很好，但如果你想改变路线怎么办？

为静态文件定义虚拟根目录：

app.use('/', function(req, res) {
  res.sendFile(__dirname + '/public/index.html');
});

app.use('/users', function(req, res) {
  res.sendFile(__dirname + '/public/users.html');
});

来源：Serving static files in express

【讨论】：

【解决方案2】：

感谢您的帮助@thomann061，但这对我不起作用。我认为我的问题一开始就不够清楚。

我有一个文件“routes.js”，其中包含使用 uiRouter 的所有路由。对于我的应用程序中的一个视图，我有多个文件 html（一个用于导航栏，几个用于主要内容，一个用于页脚......）。

 routing.config(($stateProvider, $urlRouterProvider, $locationProvider, $translateProvider) => {
  $locationProvider.html5Mode(true);
  $urlRouterProvider.otherwise('/');
  $stateProvider.state('home', {
    url: '/',
    views: {
      'nav@': {
        templateUrl: 'templates/nav.html',
        controller: 'NavController'
      },
      'content@': {
        templateUrl: 'templates/content/acceuil/acceuil.html',
        controller: 'TranslateController'
      },
      'clients@home': {
        templateUrl: 'templates/content/acceuil/clients.html',
        controller: 'ClientsController'
      },
      'top-footer@': {
        templateUrl: 'templates/footer/top-footer.html'
      },
      'footer@': {
        templateUrl: 'templates/footer/footer.html'
      }
    }
  }).state('devis', {
    url: '/devis',
    views: {
      'nav@': {
        templateUrl: 'templates/nav.html',
        controller: 'NavController'
      },
      'content@': {
        templateUrl: 'templates/content/devis/devis.html',
        controller: 'DevisController'
      },
      'cgv@devis': {
        templateUrl: 'templates/content/devis/cgv.html'
      },
      'success@devis': {
        templateUrl: 'templates/content/devis/success.html'
      },
      'error@devis': {
        templateUrl: 'templates/content/devis/error.html'
      },
      'top-footer@': {
        templateUrl: 'templates/footer/top-footer.html'
      },
      'footer@': {
        templateUrl: 'templates/footer/footer.html'
      }
    }
    });

然后，我将这行代码添加到我的“server.js”中：

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.get('*', function(req, res) {
  res.sendFile(__dirname + '/public/index.html');
});

app.post('/formDevis', function(req, res) {
  const devis = req.body;
  res.send('it work');
});

像这样，它对我、我的所有路线和我的发布请求都有效。

【讨论】：