服务器端和胖客户端 Web 应用程序的文件夹结构

Posted 2023-03-08

【中文标题】服务器端和胖客户端 Web 应用程序的文件夹结构

【英文标题】：Folder structure for both server side and thick client web app

【发布时间】：2013-05-20 18:00:53

【问题描述】：

目前我使用 Node.js 作为后端，使用 extjs 或主干作为客户端，我现在对文件夹结构完全感到困惑。

使用express我的文件夹结构如下

appname
  |--controllers
  |--models
  |  |--appmodel.js
  |--public
  |  |--css
  |  |--js // any client-side javascripts
  |--routes
  |  |--router.js
  |--views
  |  |--appview.ejs
  |--app.js

其中app.js 是入口点，它使用router.js 来处理视图的路由和呈现。如果它只是服务器端开发，这很好用。现在如果我想为客户端使用 ExtJS 或 Backbone，我应该如何组织我的代码？我应该将它添加到public 文件夹还是views？

appname
  |--controllers
  |  |--extbasedcontroller.js // correct location?
  |--models
  |  |--appmodel.js
  |  |--extbasedmodels.js // correct location?
  |--public
  |  |--css
  |  |--js
  |  |  |--extjs // extjs files
  |--routes
  |  |--router.js
  |--views
  |  |--appview.ejs
  |  |--extbasedview.ejs // correct location?
  |--app.js

如果是这种情况，我应该将我的 extjs 文件的模型放在哪里？如果我把它放在models 文件夹中，感觉就像我在一个文件夹中混合了客户端和服务器代码，这会令人困惑......

【参考方案1】：

在你的位置上，我会这样做：

appname
  |--ServerCode
  |  |--controllers
  |  |--models
  |  |  |--appmodel.js
  |  |--routes
  |  |  |--router.js
  |  |--views
  |  |  |--appview.ejs
  |  |--app.js
  |--public
  |  |--css
  |  |--js // any client-side javascripts
  |  |--models
  |  |--controllers
  |  |--...

主要思想是将公用文件夹放在服务器javascript范围之外文件。

在此处查看示例：https://github.com/madhums/node-express-mongoose-demo/

【讨论】：

我最终也使用了这个结构

那么你在使用 node.js 吗？如果是，有 2 个 mvc 模型，一个在服务器端，一个在客户端？

我对 Node.js 的体验是在服务器端编写 MVC 架构。并在客户端使用 MVVM 架构，以及 Angular.js 等框架

【参考方案2】：

只需将整个/webapp 放在/public 下，这样您就可以结束创建，例如，在/public/webapp/models 下的前端模型

appname
  |--models
  |  |--appmodel.js
  |--public
  |  |  |--webapp // extjs/backbone files
  |  |  |  |--models
  |  |  |  |--controllers
  |  |  |  |--css
  |  |  |  |--js
  |  |  |  |--img
  |  |  |  |--views
  |  |  |  |  |--appview.ejs
  |  |  |  |  |--extbasedview.ejs
  |--routes
  |  |--router.js
  |--app.js

【参考方案3】：

这是我建议的文件夹结构：

appname
  |--webapp
  |  |--img
  |  |--js
  |  |  |--controllers
  |  |  |  |--controller.js
  |  |  |--something.js
  |  |--css
  |  |--views
  |  |  |-- appview.ejs
  |  |--index
  |  |--404 etc.
  |--app.js
  |--package.json
  |--README
  |-- etc.

我认为它非常整洁且易于导航，因为所有服务器和 node_modules 的东西都在外面，而我需要的应用程序文件在“webapp”文件夹中。如果您确实需要一个名为“public”的文件夹（我不记得 express 是否需要），我认为您可以将“webapp”文件夹重命名为“public”，或者将“webapp”文件夹放入“public”中。我还建议使用 AngularJS 而不是 .ejs，但做你想做的事。 :)