Home / Questions / 119857
Accepted
userStack
Asked: 2020-11-24 20:09:50 +0800 CST 2020-11-24 20:09:50 +0800 CST

用angularjs建立nodejs(expressjs)之间的通信

  • 772

我做了1个项目，分为frontend和backend，前端部分是用angularjs 1.x做的，后端部分是用nodejs express做的。

目前，我使用未与 Angular 合并的简单 html 测试后端部分。

为了运行前端部分，我用 gulp 来做：

gulp.task('web-server', function () {
    gulp.src('.')
      .pipe(server({
        livereload: false,
        directoryListing: false,
        open: true,
        log: 'debug',
        clientConsole: false,
        port: 8080,
        host: 'localhost',
        middleware: function (connect, opt) {return [historyApiFallback()];}
      }));
  });

对于后端部分：

app.listen(3000);

换句话说，这两个项目分别监听 8080 和 3000 端口，我的问题是，我怎样才能让这两个项目用一个命令运行？我认为他们应该都听同一个端口。

注意：项目在这里： https ://github.com/x-rw/decisionTree/tree/master/node_app

我的项目结构是： 在此处输入图像描述

我对结构感到困惑，应该有两个文件package.json和两个文件夹node_modules吗？

angularjs

2 Answers

  1. Best Answer

    如何使 2 个项目使用单个命令运行？我认为他们应该都听同一个端口。

    好吧，几乎所有情况下的答案都是：这取决于. 每个应用程序都有一个在我们设计应用程序架构时定义的结构。例如，当后端除了响应客户端之外没有其他通信时，通常会被封装在一个 API 中。相反，如果在维护状态的地方维护会话和任何类型的通信，则可以方便地执行单个应用程序。

    在您的情况下，您要做的是定义每个部分的功能。当使用、、等框架/库时，与后端的通信基于 AJAX 请求，这些请求不维护任何类型的状态。在这些情况下，我们通常会谈论使用 API并将系统分为客户端类型。例如，如果想法是拥有桌面、Web 和移动客户端，则可以方便地将它们分成特定的应用程序，其中所有客户端都具有特定的功能并与API通信以执行他们需要的操作。

    转到您的具体情况，如果不再有客户，我认为将它们放在一起没有问题。第一点是您正在使用dev serverGulp：不要这样做，它在生产中没有用。作为第二点，很好地构建您的应用程序。

    应用结构

    通常，具有标准结构的应用程序如下：

    src/
  routes/
  controllers/
  middlewares/
  views/
  helpers/
  config/
  ui/
    [ aquí va el contenido de tu frontend ]
    index.js

    通过这种方式，您将前端部分封装在单个目录中，并且您的捆绑器将对其进行操作，而忽略属于后端的其余目录。

    捆绑生成

    在此步骤中，您选择的捆绑器将用于生成编译后的 JavaScript 文件。请注意，仅当您在 React 中像往常一样使用 ES6+ 时才需要这样做，否则您不需要像 Gulp 或 Webpack 这样的打包程序。

    var gulp = require('gulp');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var plumber = require('gulp-plumber');

gulp.task('app', function() {
    return gulp.src(['src/ui/**/app.js', 'src/ui/**/*.module.js', 'src/ui/**/*.js'])
        .pipe(plumber())
            .pipe(concat('app.js', {newLine: ';'}))
            .pipe(ngAnnotate({add: true}))
        .pipe(plumber.stop())
        .pipe(gulp.dest('public/js/bundle.min.js'));
});

    前面的 Gulp 任务将遍历整个目录src/ui并生成一个包，该包无非就是所有代码一起并缩小以供使用。在index.html其中您只需要引用捆绑包：

    <script defer src="/js/bundle.min.js"></script>

    执行

    angularjs程序通常是SPA。也就是说，这种类型的应用程序的特点是只有一个入口点，JavaScript 代码将在其中注入以获取客户端路由。您需要的是放置一个与后端路由无关的全局路由：

    app
  .use('/api', apiRoutes)
  // indica que cualquier ruta que no sean las rutas /api/xxx renderizará el index.html
  .use('*', (req, res) => {
    // asumiendo que index.html está dentro de src/views/
    const path = join(__dirname, 'views', 'index.html');
    res.type('html');
    res.sendFile(path); // envía el index.html
  });

    重要的是通配符总是在后端路由之后，否则你总是会得到 HTML。

    部署

    如果您想无限期地运行您的应用程序，您可以创建一个守护程序并运行它。为此，您可以依靠PM2。此实用程序允许您创建守护程序并使它们无限期运行，您可以停止或重新启动它们以及将它们置于侦听模式，如果您使用 git 并通过git pull.

    PM2 配置文件是一个 JSON，如下所示：

    {
  "apps": [
    {
      "name": "nombre-del-proceso",
      "script": "./src/index.js", // archivo principal del proyecto
      "watch": true, // modo escucha true|false
      // puedes usar un puerto y añadir variables al path de acuerdo al entorno
      "env": {
        "PORT": 5000,
        "NODE_ENV": "development"
      },
      "env_production": {
        "PORT": 8000,
        "NODE_ENV": "production"
      }
    }
  ]
}

    要创建守护程序，您只需运行：

    pm2 start nombredelarchivo.json

    您可以在PM2文档中查看可用的命令和配置。

    • 4

  2. 您的问题的解决方案非常简单。Express 具有静态资源服务中间件，您可以使用该中间件将应用程序与 API 放在同一台服务器上。

    为此，建议您首先做一个build很大程度上取决于您创建项目的方式，但基本上包括连接和缩小您的脚本文件、样式以及将您的模板转换为 javascript 代码。您已经使用gulp并且在您的项目中有一个为此配置的任务。您可以运行npm run build或gulp build

    在您拥有所有文件并正确生成后html，在您的服务器上创建一个文件夹并将它们复制到那里，并使用与它们生成时完全相同的结构。jscss

    在您的 api 启动代码中，您编写类似这样的内容

    app.use(express.static('app'))

    我用app作为客户端应用程序提供服务的文件夹的名称，但它的名称可以是任何名称。

    您可以使用的另一种选择是配置反向代理，分别为两个应用程序提供服务并将所有请求转发到相应的应用程序，但是这种解决方案过于宽泛和复杂，所以我只建议您在实现第一个后尝试选项... 即使在开发模式下，这也可以帮助您测试您的应用程序，而无需执行此操作build。

    附带说明一下，一个节点应用程序可以有许多package.json. 这一切都取决于其用途，因为它通常用于向独立模块或应用程序发出信号。诸如lerna用于维护使用独立文件（通常与其对应的文件）来管理同一项目中的每个独立模块的monorepos之类的框架。了解组织项目结构的方式是独立的，这一点很重要package.jsonnode_modules您在网络上提供服务的方式。后者将确定您应该用于单一目的的服务器和/或端口的数量。拥有许多服务器也不错，因为它可以帮助您扩展应用程序。我认为在您的情况下，这是一个人为错误，因为从外观上看，客户端代码似乎被复制到服务器中，而没有执行build.

    • 2