具有 React 前端和 Express 后端的项目的适当目录结构

Question

我目前正在开发一个网络应用程序。我在前端使用 React 和 Vite，在后端使用 Express。

即将开发的应用程序将连接到 Oracle 数据库，总体思路是一个管理系统，其中包括多个用户角色，每个角色都有自己的交互视图。它将投入生产，我还没有决定在哪里部署它。

我希望得到有关我的文件夹结构的反馈和提示以及我应该深入研究的任何其他考虑因素。我当前的文件夹结构如下所示：

|   .gitignore
|   package-lock.json
|   package.json
|   README.md
|
+---client
|   |   eslint.config.js
|   |   index.html
|   |   package-lock.json
|   |   package.json
|   |   vite.config.js
|   |
|   +---public
|   |       vite.svg
|   |
|   \---src
|       |   App.css
|       |   App.jsx
|       |   index.css
|       |   main.jsx
|       |
|       \---assets
|               react.svg
|
\---server
    |   eslint.config.mjs
    |   package-lock.json
    |   package.json
    |   server.js
    |
    \---routes
            api.js

Answer 1

您的文件夹结构看起来不错，但您可以为您的应用程序使用一些常见的结构。由于您将服务器端和客户端都放在一处，因此请将它们视为单独的存储库，因为这将简化您的思考过程。

现在，对于服务器端，您可以使用 MVC（模型视图控制器）架构来定义您的 api。模型将包含所有模式，视图将包含路由逻辑和链接，控制器将包含业务逻辑。服务器的文件夹结构如下所示

\---server
    |   eslint.config.mjs
    |   package-lock.json
    |   package.json
    |   server.js
    |
    \---routes
            api.js
    \---models
            schema1.js
            schema2.js
    \---views
            view1.js
            view2.js
    \---controllers
            controller1.js
            controller2.js

对于客户端文件夹，您可以选择创建基于支柱的架构（为每个大功能创建一个文件夹，其中包含单独的组件、容器和视图，也可以选择全局组件、容器和视图文件夹并在其中创建功能文件夹，我更喜欢第一个。

+---client
|   |   eslint.config.js
|   |   index.html
|   |   package-lock.json
|   |   package.json
|   |   vite.config.js
|   |
|   +---public
|   |       vite.svg
|   |
|   \---src
|       |   App.css
|       |   App.jsx
|       |   index.css
|       |   main.jsx
|       |
|       \---assets
|               react.svg
|       |
|       \---shared
|               Components
|       \---Featre1
|               Components