Question

我正在关注MEAN堆栈的教程，我希望有一个干净的文件夹结构。我已经阅读了很多文章，说文件夹为应用程序的每个（让我们称之为）模块与views / models / controllers / etc ..组合在一起。

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

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

根
- 视图
- 模型
- 路由
- 公共

到目前为止，我有一个带角度控制器的主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堆栈遵循不同的方法，它们不再具有单独的服务器端文件夹和客户端文件夹。现在分离是在模块级别

tuples

您可以看到每个模块都有客户端，服务器和测试文件夹。有关详细信息，请查看最新的。

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 -->

MEAN堆栈的文件夹结构

3 个答案: