服务器端和厚客户机web应用程序的文件夹结构

Currently I am using Node.js for the backend and either extjs or backbone for the client and I am now completely confused on the folder structure.

目前我正在使用Node。后端和extjs或客户端主干的js，现在我完全搞不清文件夹结构了。

Using express my folder structure is as follow

使用express my文件夹结构如下所示

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

where app.js is the point of entry and it uses router.js to handle routing and rendering of the views. This works fine if it is only server-side development. Now if I want to use ExtJS or Backbone for the client, how should I organize my code? Should I add it to public folder or views?

js是入口点，它使用的是路由器。用于处理视图的路由和呈现。如果仅是服务器端开发，那么这种方法很有效。现在，如果我想为客户端使用ExtJS或主干，我应该如何组织我的代码呢?我应该将它添加到公共文件夹或视图中吗?

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

If this is the case, where should I put the model for my extjs files? If I put it in models folder it feels like I'm mixing up client and server code in one folder and it's going to be confusing...

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

3 个解决方案

#1

In your place, I would do that way:

在你的地方，我会这样做:

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

The main idea is to place public folder outside of the scope of your server javascript files.

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

See an example here: https://github.com/madhums/node-express-mongoose-demo/

请参见这里的示例:https://github.com/madhums/node-express-mongoose-demo/

#2

Just put the whole /webapp under /public so you'll end creating, for instance, frontend's models under /public/webapp/models

把整个/webapp放在/public下面，这样你就可以结束创建，例如，frontend的模型在/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

Heres my suggested folder structure:

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

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

I think its very tidy and easy to navigate in, because all the server and node_modules stuff is outside and the files I need for the application is in the "webapp" folder. If you really need a folder called "public" (I cant remember if express needs one or not) I think you can just rename the "webapp" folder to "public", or drop the "webapp" folder inside "public". I would also recommend using AngularJS instead of .ejs, but do what you want to do. :)

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

#1