Spring Boot 通用项目结构图

project-root
├── .gitignore                 # Git 忽略文件配置
├── pom.xml / build.gradle     # Maven 或 Gradle 构建文件
├── README.md                  # 项目说明文档
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── company
│   │   │           └── projectname  # 根包名
│   │   │               ├── ProjectNameApplication.java # 启动类
│   │   │               │
│   │   │               ├── common           # 【通用模块】：存放全局共用的类
│   │   │               │   ├── api          # 通用 API 响应结构 (Result, ResultCode)
│   │   │               │   ├── constant     # 全局常量
│   │   │               │   ├── exception    # 自定义异常类
│   │   │               │   └── util         # 通用工具类 (DateUtil, StringUtil)
│   │   │               │
│   │   │               ├── config           # 【配置模块】：存放 @Configuration 类
│   │   │               │   ├── SwaggerConfig.java   # 接口文档配置
│   │   │               │   ├── WebMvcConfig.java    # 跨域、拦截器配置
│   │   │               │   ├── MyBatisPlusConfig.java
│   │   │               │   └── RedisConfig.java
│   │   │               │
│   │   │               ├── controller       # 【控制层】：处理 HTTP 请求
│   │   │               │   └── UserController.java
│   │   │               │
│   │   │               ├── service          # 【业务逻辑层】
│   │   │               │   ├── UserService.java        # Service 接口
│   │   │               │   └── impl                    # Service 实现
│   │   │               │       └── UserServiceImpl.java
│   │   │               │
│   │   │               ├── mapper / repository # 【数据访问层】：MyBatis Mapper 或 JPA Repository
│   │   │               │   └── UserMapper.java
│   │   │               │
│   │   │               ├── model            # 【数据模型层】
│   │   │               │   ├── entity       # 数据库实体 (对应数据库表)
│   │   │               │   │   └── User.java
│   │   │               │   ├── dto          # Data Transfer Object (前端 -> 后端传输对象)
│   │   │               │   │   └── UserLoginDTO.java
│   │   │               │   ├── vo           # View Object (后端 -> 前端展示对象)
│   │   │               │   │   └── UserProfileVO.java
│   │   │               │   └── query        # 查询参数对象 (用于复杂搜索)
│   │   │               │       └── UserSearchQuery.java
│   │   │               │
│   │   │               ├── handler          # 【全局处理器】
│   │   │               │   └── GlobalExceptionHandler.java # 全局异常拦截
│   │   │               │
│   │   │               ├── aspect           # 【切面模块】：AOP 相关 (日志、权限)
│   │   │               │   └── LogAspect.java
│   │   │               │
│   │   │               ├── component        # 【组件模块】：非业务逻辑的独立功能组件
│   │   │               │   └── FileUploader.java
│   │   │               │
│   │   │               └── job              # 【定时任务】：存放 @Scheduled 任务
│   │   │
│   │   └── resources
│   │       ├── application.yml      # 主配置文件
│   │       ├── application-dev.yml  # 开发环境配置
│   │       ├── application-prod.yml # 生产环境配置
│   │       ├── logback-spring.xml   # 日志配置
│   │       ├── mapper               # MyBatis XML 文件 (如果是 MyBatis)
│   │       │   └── UserMapper.xml
│   │       ├── static               # 静态资源 (css, js, images - 前后端分离通常不需要)
│   │       └── templates            # 模板文件 (Thymeleaf 等 - 前后端分离通常不需要)
│   │
│   └── test                         # 测试代码
│       └── java
│           └── com...
└── target / build                   # 编译输出目录

前端通用项目结构图 (Vue 3 / React)

project-frontend
├── .env.development          # 开发环境配置 (API地址等)
├── .env.production           # 生产环境配置
├── package.json              # 依赖管理
├── vite.config.ts (or js)    # 构建工具配置 (代理跨域、打包配置)
├── index.html                # 入口 HTML
├── public                    # 纯静态资源 (不经过打包处理，如 favicon)
│
├── src
│   ├── main.ts (or index.tsx) # 【入口文件】：挂载 Vue/React 实例
│   ├── App.vue (or App.tsx)   # 根组件
│   │
│   ├── api                    # 【接口层】：统一管理与后端的 HTTP 请求
│   │   ├── user.ts            # 对应后端的 UserController
│   │   └── order.ts           # 对应后端的 OrderController
│   │
│   ├── assets                 # 【静态资源】：图片、字体、全局样式
│   │   ├── images
│   │   ├── icons              # svg 图标
│   │   └── styles             # 全局 css/scss 变量
│   │
│   ├── components             # 【公共组件】：非业务相关的通用 UI 组件
│   │   ├── SvgIcon            # 图标组件
│   │   └── CommonTable        # 二次封装的通用表格
│   │
│   ├── hooks (or composables) # 【逻辑复用】：提取通用的业务逻辑 (React Hooks / Vue Composables)
│   │   ├── useTheme.ts        # 主题切换逻辑
│   │   └── useTable.ts        # 表格的分页、搜索逻辑
│   │
│   ├── layout                 # 【布局组件】：页面的骨架 (侧边栏、头部、面包屑)
│   │   ├── index.vue          # 布局入口
│   │   ├── components
│   │   │   ├── Sidebar
│   │   │   ├── Navbar
│   │   │   └── AppMain
│   │   └── router-view        # 页面渲染区域
│   │
│   ├── router                 # 【路由管理】：页面路径配置
│   │   ├── index.ts           # 路由初始化
│   │   └── routes.ts          # 具体的路由列表
│   │
│   ├── store                  # 【状态管理】：Pinia (Vue) 或 Redux/Zustand (React)
│   │   ├── modules
│   │   │   ├── user.ts        # 存储用户信息、Token
│   │   │   └── permission.ts  # 存储菜单权限数据
│   │   └── index.ts
│   │
│   ├── types                  # 【TypeScript 类型定义】：对应后端的 DTO/VO
│   │   ├── api.d.ts           # 通用响应结构 (code, msg, data)
│   │   └── user.d.ts          # 用户实体接口定义
│   │
│   ├── utils                  # 【工具类】：核心基础设施
│   │   ├── request.ts         # ★ Axios 二次封装 (拦截器、Token注入)
│   │   ├── auth.ts            # Token 的存取 (Cookie/LocalStorage)
│   │   └── validate.ts        # 表单验证规则
│   │
│   ├── views (or pages)       # 【页面层】：具体的业务页面
│   │   ├── login              # 登录页
│   │   │   └── index.vue
│   │   ├── dashboard          # 首页/仪表盘
│   │   ├── system             # 系统管理模块
│   │   │   ├── user           # 用户管理页面
│   │   │   │   ├── index.vue  # 列表页
│   │   │   │   └── components # 该页面专用的弹窗或组件
│   │   │   │       └── UserDialog.vue
│   │   │   └── role           # 角色管理
│   │   └── error              # 404, 403 页面
│   │
│   └── directives             # 【自定义指令】：(Vue特有) 如 v-permission 按钮权限控制
│
└── dist                       # 打包后的输出目录 (部署到 Nginx)

微信小程序Uni-app 目录结构

project-uniapp
├── pages.json             # 相当于 app.json (路由、TabBar、样式)
├── manifest.json          # App/小程序 打包配置
├── main.js                # Vue 入口
├── App.vue                # 根组件 (生命周期)
├── pages                  # 页面
│   └── index
│       └── index.vue      # .vue 文件！开发体验同 Web
├── api                    # 同 Web
├── components             # 同 Web (easycom 自动引入)
├── static                 # 静态资源 (相当于 assets)
└── utils                  # 工具类

微信小程序目录结构 (原生/TypeScript)

project-miniprogram
├── project.config.json        # 项目配置文件 (appid, 编译配置)
├── sitemap.json               # 索引配置
├── .gitignore                 # Git 忽略配置
├── package.json               # NPM 依赖 (如 vant-weapp, dayjs)
│
├── api                        # 【接口层】：对应后端的 Controller
│   ├── user.js                # 用户相关接口
│   └── order.js               # 订单相关接口
│
├── assets                     # 【静态资源】
│   ├── images                 # 图片 (建议大图走 CDN，此处放 icon)
│   └── styles                 # 全局样式变量
│       ├── common.wxss        # 通用样式类
│       └── variables.wxss     # CSS 变量 (颜色、字号)
│
├── components                 # 【全局公共组件】：跨页面复用的 UI
│   ├── custom-navbar          # 自定义头部导航
│   └── empty-state            # 空状态组件
│
├── behaviors                  # 【逻辑复用】：类似 Vue 的 Mixins
│   └── pagination.js          # 通用的分页逻辑
│
├── utils                      # 【工具类】
│   ├── request.js             # ★ wx.request 二次封装 (Token, 拦截器)
│   ├── util.js                # 基础工具 (日期格式化)
│   └── auth.js                # 登录/Token 存储逻辑
│
├── store (可选)               # 【状态管理】：如果使用了 MobX 或简单全局 Store
│   └── userStore.js
│
├── pages                      # 【主包页面】：TabBar 页面和核心高频页面
│   ├── index                  # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── mine                   # 个人中心
│
├── subpackages                # 【分包目录】：非核心业务，解决 2MB 限制
│   ├── admin                  # 管理端分包 (假设这是个 B 端系统)
│   │   └── pages
│   │       └── audit-list     # 审核列表
│   └── marketing              # 营销活动分包
│       └── pages
│           └── coupon         # 优惠券
│
├── app.js                     # 【入口逻辑】：生命周期、全局数据
├── app.json                   # 【全局配置】：路由、分包、TabBar 配置
└── app.wxss                   # 【全局样式】