MEAN 堆栈的文件夹结构

Question

我正在学习关于 MEAN 堆栈的教程，我希望有一个干净的文件夹结构可以使用。我读过很多文章，说应用程序的每个（我们称之为）模块都有一个文件夹，其中视图/模型/控制器/等..组合在一起。

我喜欢这种方法并且我已经开始这样做了，但是我需要一些帮助。

现在，我的目录结构如下所示：

• 根
  • 观看次数
  • 型号
  • 路线
  • 公开

到目前为止，我有一个带有角度控制器的主 index 视图，所以我所做的是，在 public 下创建一个新文件夹并将其命名为 index

任何带星号的都是文件夹 (*)

• 根*
  • 公开*
    • 索引*
      • index.ejs
      • 角度*
        • indexController.js
        • someService.js
      • 款式*
        • someCss.Css
      • javascript*
        • 一些 jQuery 或 js 文件
    • 假设的其他视图文件夹*
      • otherIndex.ejs
      • 角度*
        • otherController.js
        • someService.js
      • 款式*
        • someCss.Css
      • javascript*
        • 一些 jQuery 或 js 文件

第一个问题是，到目前为止这还好吗？所有这些都属于公用文件夹吗？

我的第二个与后端有关。我开始构建一些模型，教程说将它们放在models 文件夹中。但是，我宁愿将模型与它们各自的“模块”一起保留，所以我宁愿将索引模型放在索引视图所在的文件夹中。可能在索引下创建一个名为models 的新文件夹并将其添加到那里：

• 根*
  • 公开*
    • 索引*
      • index.ejs
      • 角度*
        • indexController.js
        • someService.js
      • 款式*
        • someCss.Css
      • javascript*
        • 一些 jQuery 或 js 文件
      • 型号*
        • someModel.js

但这似乎不是放置模型文件的正确位置，因为这是公共文件夹，而模型是后端代码。对我正在做的事情有更好的方法吗？还是应该将模型放在主模型文件夹中？只是让前端按“模块”分组，而所有模型都放在模型文件夹中？

Answer 1

新的 MEAN js 堆栈采用不同的方法，它们不再具有单独的服务器端文件夹和客户端文件夹。现在分离是在模块级别

您可以看到每个模块都有客户端、服务器和测试文件夹。欲了解更多信息，您可以查看他们最新的repository。

Answer 2

我想出了自己的结构。这在一个项目期间帮助了我。 每个* 标记一个文件夹。

app 文件夹用于后端，public 用于前端。

• 根*
  • 应用程序*
    • 控制器*
      • main.controller.js
    • 型号*
      • user.model.js
    • 路线*
      • user.route.js
    • 测试*
      • user.test.js
    • 观看次数*
      • 404.html
  • 资产*
    • 插件*
    • external_libraries*
  • bower_components*
  • 配置*
    • db.js
  • node_modules*
  • 公开*
    • 控制器*
      • main.controller.js
    • 模块*
      • main.module.js
    • 服务
      • main.service.js
    • 查看次数
      • user.html
      • home.html
      • index.html
  • bower.json
  • package.json
  • server.js

Answer 3

我在尝试编写 MEAN 堆栈时遇到了同样的问题。此外，我使用的是我自己的愚蠢结构。

- backend
------ api
----------- controllers
----------- middleware
----------- models
----------- routes
------ node_modules
------ app.js / package.json - package-lock.json / server.js

- frontend <!-- angular frontend-->
----------- angular components

我研究了一段时间。我发现this link 非常有用，我按照链接上显示的结构进行操作。

- app               <!-- holds all our files for node components (models, routes) -->
----- models
---------- todo.js  <!-- defines the todo model -->
----- routes.js     <!-- all routes will be handled here -->

- config            <!-- all our configuration will be here -->
----- database.js

- public            <!-- holds all our files for our frontend angular application -->
----- core.js       <!-- all angular code for our app -->
----- index.html    <!-- main view -->

- package.json      <!-- npm configuration to install dependencies/modules -->
- server.js         <!-- Node configuration -->