AI全栈开发平台项目结构详解：后端模块与前端目录组织

为什么需要了解平台整体结构

在使用AI进行开发时，我们通过对话窗口输入提示词让AI生成代码和文件。如果不了解项目的整体结构，虽然AI也能完成工作，但当我们清楚生成的代码应该放在什么位置——后端代码在哪个模块、前端代码在哪个目录——就能更好地把控整个开发过程。

这对于两类人都有价值：对于懂开发的人，可以在AI开发过程中精确引用文件，比如告诉AI"这个文件有问题请你修复"；对于不懂开发的人，至少知道大概的文件位置，在需要排查问题时能快速定位。

平台三大组成部分

整个AI全栈开发平台包括三个核心部分：

后端服务

后端是一个Java程序，启动后提供API接口用于数据查询和业务处理。这是整个系统的核心引擎，负责接收前端请求、处理业务逻辑、访问数据库并返回结果。

在技术实现上，这类后端服务通常基于Spring Boot框架构建。Spring Boot极大地简化了Spring应用的配置和部署过程，开发者无需编写大量XML配置文件，通过注解和约定优于配置的原则即可快速搭建服务。API接口一般遵循RESTful设计规范，通过HTTP协议的GET、POST、PUT、DELETE等方法分别对应数据的查询、创建、更新和删除操作。后端服务启动后会监听特定端口（如8080），持续等待前端发来的请求并进行处理。

PC端运营管理台

通过网页浏览器访问的管理系统，用于操作系统的各种功能，包括用户管理、角色配置、组织架构、菜单管理等。这类管理后台通常基于Vue.js等现代前端框架开发，采用单页应用（SPA）模式，页面切换无需重新加载，用户体验接近桌面应用。

移动端

采用UniApp技术框架，可以适配H5、小程序和App等不同版本，实现一套代码多端运行。UniApp是DCloud公司推出的跨平台开发框架，基于Vue.js语法，允许开发者编写一套代码后编译到iOS、Android、H5、微信小程序、支付宝小程序等多个平台。这种"一次开发，多端部署"的能力大幅降低了移动端的开发成本——相比原生开发需要分别用Swift/Kotlin编写iOS和Android应用，UniApp只需维护一套代码库即可覆盖所有主流平台。

后端项目结构解析

后端项目（AI Platform）的模块划分非常清晰，主要包含以下几个核心模块：

Base Command - 基础工程

负责项目的基础命令和通用工具类，是整个项目的底层支撑。这一层通常包含公共的工具方法（如日期处理、字符串操作、加密解密）、全局常量定义、基础实体类等，被其他所有模块依赖和引用。

Framework - 框架层

主要做框架级别的配置和入口定义，包括各种中间件的集成配置、全局异常处理等框架层面的内容。具体来说，这里会配置数据库连接池（如Druid）、缓存中间件（如Redis）、安全框架（如Spring Security或Sa-Token）、跨域策略、日志框架等。这些配置决定了整个系统的运行环境和基础能力。

System - 核心业务模块

这是我们日常开发中最常接触的模块，核心业务代码都写在这里。平常通过AI生成的功能模块也主要放在System目录下。例如用户管理的SystemUserController就在这个模块中。

如果需要新增业务模块（如商品模块），系统会自动在System下生成对应的目录结构，比如Product目录存放商品管理相关代码，Order目录存放订单相关代码，按业务分目录组织。这种按业务领域划分目录的方式在软件工程中被称为"垂直切分"，相比按技术层次划分（所有Controller放一起、所有Service放一起），它让相关代码聚集在一起，更便于理解和维护单个业务功能。

Work Flow - 工作流服务

集成了Flowable工作流引擎，提供流程审批等业务能力。Flowable是一个轻量级的业务流程引擎，基于BPMN 2.0（Business Process Model and Notation）国际标准，用于实现企业中常见的审批流程，如请假审批、报销审批、合同签署等。它允许通过可视化方式定义流程图，系统自动按照预设的节点和条件流转任务，支持会签、加签、驳回、委派等复杂审批场景。Flowable从Activiti项目分支而来，在性能和功能上都有显著提升，是目前Java生态中最活跃的开源工作流引擎之一。

前端项目结构解析

前端项目分为两个独立工程：

• Web Admin：PC端管理后台项目
• Mobile App：移动端项目

前后端分离是现代Web开发的主流架构模式。前端项目独立开发、独立部署，通过Ajax或Fetch API调用后端接口获取数据，后端只返回JSON格式的结构化数据而非完整HTML页面。这种架构的优势包括：前后端可并行开发提高效率、前端可独立选择技术栈（如Vue、React）、后端API可同时服务于Web端和移动端、部署和扩展更加灵活。

前端代码在src目录下按功能模块组织，以System模块为例，包含：

• User（用户管理）
• Role（角色管理）
• Organization（组织管理）
• Menu（菜单管理）
• Dictionary（字典管理）
• Monitor（系统监控）

每个功能模块目录下通常包含页面组件（.vue文件）、接口定义（api.js）和局部状态管理等文件，形成自包含的功能单元。

此外，项目中还有一个SOCO目录，存放开发过程中积累的SQL脚本。这些SQL脚本记录了数据库表结构的创建和变更历史，便于在新环境中快速初始化数据库或进行版本迁移。

请求处理流程（MVC分层架构）

理解一个完整的请求流程对于开发调试非常重要。当用户在浏览器中进行操作（如新增、删除、查询）时，整个数据流转过程如下：

1. 浏览器发起请求 → 用户操作触发HTTP请求（可通过F12开发者工具查看）
2. 控制层（Controller） → 接收请求参数，进行参数校验
3. 业务层（Service） → 处理核心业务逻辑
4. 数据访问层（DAO） → 执行数据库操作
5. 数据库 → 存取数据
6. 逐层返回 → 数据库 → 数据访问层 → 业务层 → 控制层 → 浏览器展示

这就是经典的MVC（Model-View-Controller）分层架构，每一层各司其职。MVC模式最早由Trygve Reenskaug在1979年提出，经过数十年的演进，在Java Web开发中形成了更细粒度的分层实践：Controller负责路由分发和参数校验，Service层封装业务规则（如权限判断、数据计算、事务管理），DAO层（Data Access Object）通过MyBatis或JPA等ORM框架将Java对象映射为SQL操作。

这种分层的核心价值在于关注点分离——修改数据库结构不影响业务逻辑，修改业务逻辑不影响接口定义，每一层都可以独立测试和替换。当AI生成代码时，也会严格按照这个分层结构自动放置到对应的位置：Controller类放在controller包下，Service接口和实现放在service包下，数据访问类放在mapper或dao包下。

关于F12开发者工具，这是前端调试的核心利器。其中Network面板可以查看所有HTTP请求的详细信息，包括请求URL、请求方法、请求参数、响应状态码和返回数据。当页面出现问题时，通过Network面板可以快速判断是前端渲染问题还是后端接口返回了错误数据——如果接口返回的数据正确但页面显示异常，说明是前端问题；如果接口本身返回了错误信息，则需要排查后端代码。这对于不懂代码的人来说也是一个非常实用的排查手段。

开发工具配置

日常开发中使用两个工具：

• IDE（如IntelliJ IDEA）：管理后端Java代码。IntelliJ IDEA是JetBrains公司开发的Java集成开发环境，提供智能代码补全、重构、调试、版本控制集成等强大功能，是Java开发者的首选工具。它能自动识别项目的模块结构、依赖关系，并提供可视化的项目导航。
• VSCode：管理前端代码。Visual Studio Code是微软推出的轻量级代码编辑器，凭借丰富的插件生态系统，在前端开发领域占据主导地位。通过安装Vue、ESLint、Prettier等插件，可以获得接近IDE级别的开发体验。

两个工具左侧都是树形目录结构来组织代码文件。使用AI编程工具（如Claude Code）生成代码时，它会自动说明生成了哪些文件、做了哪些改动、放在什么位置，开发者可以通过编程工具直接查看对应代码。AI工具的优势在于它理解项目的分层架构，能够自动将生成的代码放到正确的目录位置，并处理好各层之间的引用关系。

总结

了解项目整体结构不是使用AI开发的必要条件，但它能显著提升开发效率和问题排查能力。核心要记住的是：业务代码主要在System模块，前后端分离部署，请求遵循分层处理流程。掌握这些基础认知后，在后续使用AI生成功能时就能做到心中有数——知道AI在做什么、代码放在了哪里、出了问题该去哪里找。

核心要点

• AI全栈开发平台由后端服务（Java/Spring Boot）、PC端管理台（Vue.js Web应用）和移动端（UniApp跨平台框架）三部分组成
• 核心业务代码主要放在System模块下，按业务功能垂直切分目录组织
• 后端采用经典MVC分层架构：控制层→业务层→数据访问层→数据库，各层关注点分离
• 了解项目结构有助于在AI开发过程中精确引用文件和定位问题
• 使用IntelliJ IDEA管理后端代码、VSCode管理前端代码，AI工具会自动按分层结构放置生成的文件