Java程序员转全栈，前后端设计这一关怎么过？

原创已于 2026-09-10 10:31:50 修改 · 置顶 · 300 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

后端

于 2026-09-10 10:31:22 首次发布

需求文档写好了，下一步就是把纸上的东西变成技术方案。这一关过去是架构师的活儿，现在Java程序员也得自己上了。

一、前后端设计到底设计什么

很多Java程序员对"设计"两个字有误解，以为就是画几张架构图、选几个技术栈。其实前后端设计包含的东西很具体：

数据库表怎么设计
接口怎么定义
前端页面怎么拆分
权限怎么控制
异常怎么处理
缓存怎么用

这些 decisions 直接决定了后面代码好不好写、好不好维护。设计阶段偷懒，代码阶段加倍还。

二、我自己做设计的黑历史

刚工作那两年，我做设计基本靠直觉：

数据库表名用拼音
接口URL随心所欲，有时候 /getUserList，有时候 /user/query
前端页面一个文件写到底
返回值格式不统一，有的用 code+msg，有的直接抛异常

结果就是项目越往后越难维护。新员工接手时吐槽："这代码像千层饼，改一层塌一层。"

后来我学乖了，知道设计阶段要规范。但规范这件事很花时间，尤其是小项目，一个人要负责所有设计文档，很容易半途而废。

飞算JavaAI的 /前后端设计 指令，正好解决了这个问题：它根据需求分析的结果，自动生成一套比较规范的设计文档。

三、飞算JavaAI前后端设计的工作流程

官方对这个功能的定义是：

根据需求分析产出需求文档和业务设计文档，进行后端数据库文档设计和 API 接口设计，并根据 API 设计文档进行前端页面设计。

简单说就是：输入需求文档 → 输出数据库设计 + 接口设计 + 前端页面设计。

它前置依赖 /需求分析 的结果。如果没有，AI会提示你先跑需求分析。这个设计是合理的，没搞清楚需求就设计，等于盖楼不打地基。

四、继续用课程管理案例演示

承接上一篇文章的在线教育课程管理后台，我继续用 /前后端设计 指令生成完整方案。

输入：

根据 docs 目录下的需求文档和业务设计文档，完成课程管理后台的前后端设计。

4.1 生成的数据库设计

AI生成了三张核心表：

CREATE TABLE course_category (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    parent_id BIGINT DEFAULT 0 COMMENT '父分类ID，0表示一级分类',
    name VARCHAR(100) NOT NULL COMMENT '分类名称',
    sort_order INT DEFAULT 0 COMMENT '排序',
    status TINYINT DEFAULT 1 COMMENT '状态：0禁用 1启用',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) COMMENT='课程分类表';

CREATE TABLE course (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(200) NOT NULL COMMENT '课程标题',
    sub_title VARCHAR(500) COMMENT '课程副标题',
    cover_url VARCHAR(500) COMMENT '封面图URL',
    price DECIMAL(12,2) DEFAULT 0 COMMENT '售价',
    original_price DECIMAL(12,2) DEFAULT 0 COMMENT '原价',
    lesson_count INT DEFAULT 0 COMMENT '课时数',
    instructor_id BIGINT COMMENT '讲师ID',
    summary TEXT COMMENT '课程简介',
    target_users VARCHAR(500) COMMENT '适用人群',
    learning_goals TEXT COMMENT '学习目标',
    category_id BIGINT COMMENT '分类ID',
    status TINYINT DEFAULT 0 COMMENT '状态：0草稿 1审核中 2已上架 3已下架',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) COMMENT='课程表';

CREATE TABLE course_audit_log (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    course_id BIGINT NOT NULL COMMENT '课程ID',
    operator_id BIGINT NOT NULL COMMENT '操作人ID',
    action VARCHAR(50) NOT NULL COMMENT '操作：submit/approve/reject',
    remark VARCHAR(500) COMMENT '备注',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP
) COMMENT='课程审核日志表';

表结构基本合理，字段命名也规范。我主要调整了两个地方：

给 course 表的 category_id 加了外键约束
给 status 字段加了普通索引，因为列表页会按状态筛选

4.2 生成的接口设计

AI生成的接口文档包含以下接口：

接口	方法	URL	说明
课程列表	GET	/api/course/list	分页、筛选、排序
课程详情	GET	/api/course/{id}	查询课程详情
创建课程	POST	/api/course/create	创建草稿课程
更新课程	POST	/api/course/update	更新课程信息
提交审核	POST	/api/course/submitAudit	讲师提交审核
审核课程	POST	/api/course/audit	管理员审核通过/驳回
上下架	POST	/api/course/changeStatus	修改课程状态
分类列表	GET	/api/category/list	查询分类树
创建分类	POST	/api/category/create	创建分类

每个接口都包含请求参数、响应示例、状态码说明。我拿 "课程列表" 举例：

GET /api/course/list?pageNum=1&pageSize=10&status=2&categoryId=1&minPrice=0&maxPrice=1000&sortField=createTime&sortOrder=desc

响应结构：

{
  "code": 200,
  "msg": "success",
  "data": {
    "total": 100,
    "list": [
      {
        "id": 1,
        "title": "Java从入门到精通",
        "coverUrl": "https://...",
        "price": 199.00,
        "status": 2,
        "categoryName": "Java",
        "createTime": "2026-08-01 10:00:00"
      }
    ]
  }
}

这个接口设计比较标准，和我之前手动写的差别不大。但有一点我觉得AI做得比我好：它把筛选条件和排序字段都枚举出来了，避免了前端传一个后端不认识的字段导致报错。

4.3 生成的前端页面设计

前端页面设计文档包含：

页面路由规划
页面结构描述
组件划分
状态管理建议
与后端的接口对接说明

比如课程列表页的设计：

## 课程列表页 /course/list

### 页面结构
- 搜索表单：标题、分类、状态、价格区间
- 操作按钮：新建课程、批量上架、批量下架
- 数据表格：ID、封面、标题、分类、价格、状态、操作
- 分页组件

### 组件
- CourseSearchForm.vue
- CourseTable.vue
- CourseStatusTag.vue

### 状态管理
- 使用 Pinia 管理课程列表的查询条件

五、我对设计文档的二次加工

AI生成的设计文档是"通用最优解"，但不一定完全匹配你的项目。我做了以下调整：

5.1 增加缓存设计

课程数据读多写少，我在接口设计里补充了 Redis 缓存策略：

课程详情缓存 30 分钟
分类树缓存 1 小时
课程状态变更时主动失效缓存

5.2 增加幂等设计

提交审核、上下架这些操作需要幂等。我在接口设计里加了 idempotentKey 字段，防止网络抖动导致重复提交。

5.3 增加权限注解

AI生成的接口设计里没有标注权限。我在每个接口后面补充了 @PreAuthorize 的表达式，比如：

@PreAuthorize("hasRole('ADMIN') or hasRole('CONTENT_MANAGER')")
@PostMapping("/audit")
public Result audit(@RequestBody @Validated CourseAuditDTO dto) { ... }