企业官网建设流程全解析

2026.4.15-2026.4.20

1. 工作内容

本周依据项目总体架构设计、数据库设计、开发文档设计、项目流程图设计、接口文档，使用Codex完成了项目骨架搭建，并对AI生成代码进行了分析和拆解，便于其他小组成员快速理解项目骨架，进行其他功能的开发

2. AI提示词

根据该文件夹目录下的五个文档：项目总体架构设计、数据库设计、开发文档设计、项目流程图设计、接口文档生成项目框架，使用SpringBoot+Vue3开发技术

3. AI生成过程

4. 项目骨架分析

项目整体采用前后端分离架构，主要分为backend和frontend两大部分。后端负责业务接口、数据处理和系统配置，前端负责页面展示、交互逻辑和接口调用。通过对 AI 生成结果的分析可以看出，这次生成的不只是一个简单的空项目，而是已经具备了比较清晰的工程化骨架。

4.1 后端骨架分析

后端部分位于backend目录下，采用的是Spring Boot + Maven的开发方式，并且使用了父子模块结构进行管理。

（1）backend 根目录

backend目录下主要包含以下内容：

• pom.xml：后端父工程配置文件，用于统一管理依赖版本和模块结构。
• contract-admin/：核心业务子模块，也就是当前项目后端真正运行的服务模块。
• sql/：数据库脚本目录，用于存放初始化建表语句。

这种结构的好处是，后续如果项目继续扩展，还可以在父工程下面继续新增其他子模块，整体扩展性比较好。

（2）contract-admin 模块

contract-admin是当前后端的核心模块，里面包含了项目启动类、业务代码和配置文件。

在src/main/java/com/zhiqitong/contract/admin/目录下，又可以继续分成两部分：

• common：公共模块
• modules：业务模块

（3）common 公共模块

common目录主要用于存放项目中可复用的通用代码。目前生成的内容包括：

• api/ApiResponse.java：统一接口返回格式，方便前后端交互时保持数据结构一致。
• config/CorsConfig.java：跨域配置类，用来解决前后端分离开发中常见的跨域访问问题。

虽然目前公共层内容还不多，但它已经为后续封装统一异常处理、统一响应码、拦截器等功能预留了位置。

（4）modules 业务模块

modules目录是整个后端骨架中最核心的一部分，它按照业务功能进行拆分。当前已经生成的模块有：

• auth：登录认证模块
• contract：合同管理模块
• template：模板管理模块
• risk：风险审查模块
• summary：摘要生成模块
• compare：合同对比模块
• polish：合同润色模块
• user：用户管理模块
• version：版本管理模块

从这里可以看出，AI 已经根据前期文档内容，把系统主要业务方向基本拆解出来了。

其中每个模块下又进一步包含了不同职责的类，例如：

• controller：负责接收前端请求、返回接口数据
• dto：用于接收前端传入的数据
• vo：用于返回给前端展示的数据

这种分层方式说明生成结果已经初步具备了规范化开发的思路，不再是把所有代码都堆在一起，而是按照职责进行了划分。

（5）resources 配置目录

在src/main/resources目录下，目前主要有：

• application.yml：项目配置文件

当前配置中已经设置了服务端口和 Swagger 文档路径，说明后端骨架已经考虑到了接口调试和后续联调的问题。

（6）sql 数据库脚本

在backend/sql/init.sql中，已经生成了几个基础数据表，例如：

• sys_user：用户表
• contract_template：合同模板表
• contract_info：合同信息表
• contract_version：合同版本表

这说明项目骨架并不只是停留在代码目录层面，而是已经把数据库基础结构同步搭建出来了，为后续功能开发节省了不少时间。

4.2 前端骨架分析

前端部分位于frontend目录下，使用的是Vue 3 + Vite + TypeScript技术栈。整体结构比较清晰，符合当前主流前端项目的组织方式。

（1）frontend 根目录

前端根目录下主要包括：

• package.json：项目依赖和脚本配置文件
• vite.config.ts：Vite 构建配置文件
• tsconfig.json：TypeScript 配置文件
• src/：前端核心源码目录

从依赖配置来看，项目中已经集成了：

• vue
• vue-router
• pinia
• axios
• element-plus

这说明前端基础开发环境已经搭建完成，后续可以直接在这个基础上继续开发页面和功能。

（2）src 核心目录

前端的核心代码集中在src目录下，主要可以分为以下几个部分：

• api/：接口请求封装
• layouts/：页面布局
• router/：路由配置
• stores/：状态管理
• views/：业务页面
• main.ts：项目入口文件
• App.vue：根组件
• styles.css：全局样式文件

这种目录划分非常典型，也比较适合中后台项目开发。

（3）api 接口层

src/api/http.ts主要用于统一封装请求逻辑。这样做的好处是，后续所有页面在调用后端接口时都可以复用同一套请求配置，减少重复代码。

（4）layouts 布局层

src/layouts/MainLayout.vue是后台系统的主布局文件，通常用于统一管理头部、侧边栏、菜单和内容区域。对于中后台管理系统来说，这一层非常重要，它决定了整个页面的整体结构。

（5）router 路由层

src/router/index.ts中已经配置了项目的主要路由，包括：

• 登录页
• 首页仪表盘
• 模板管理页
• 合同管理页
• 风险审查页
• 摘要生成页
• 合同比对页
• 系统管理页

这说明前端骨架不仅生成了目录，还已经把主要业务页面入口都准备好了。

（6）stores 状态管理层

src/stores/app.ts是全局状态管理模块，使用的是Pinia。这部分虽然目前代码可能还比较简单，但它为后续共享用户信息、菜单状态、系统配置等内容提供了基础支持。

（7）views 页面层

views目录下按功能拆分出了多个页面目录，例如：

• login
• dashboard
• template
• contract
• risk
• summary
• compare
• system

每一个目录下都对应一个页面组件，这样的组织方式使页面结构更加清晰，也更方便后续逐个模块进行功能完善。

4.3 项目骨架的整体特点

从本次 AI 生成的结果来看，这个项目骨架有几个比较明显的特点：

1. 前后端分层清晰，整体目录结构比较规范。
2. 后端已经按照业务功能完成了初步模块拆分，具有一定的扩展性。
3. 前端具备完整的页面结构、路由结构和基础开发环境。
4. 数据库脚本、接口骨架和页面骨架是同步生成的，说明 AI 在生成时能够结合多份文档信息进行整体组织。
5. 当前生成的内容更偏向“项目基础框架”，适合作为后续详细开发的起点。

4.4 小结

整体来看，这次 AI 生成的项目骨架完成度还是比较高的。它不仅搭建了前后端项目的基本目录，也提前划分了主要业务模块，并生成了数据库初始化脚本和页面入口。虽然很多具体业务逻辑还需要后续继续补充，但作为项目初期的骨架来说，已经能够较好地支撑后续开发工作。

通过这一步，我也更加直观地感受到，AI 在项目初期的框架搭建、目录设计和基础代码生成方面，确实能够显著提升开发效率。不过，AI 生成的代码仍然需要结合项目实际需求进行分析、调整和优化，才能真正满足后续开发使用。

5. 项目效果展示