使用AI编程软件（AI Coding）从0到1实现Java前后端全栈项目

张

张建站

2026/4/25 8:36:33

10分钟阅读

一、引言在传统开发模式中从零开始搭建一个Java前后端分离项目往往需要数天甚至数周的时间开发者需要编写大量的样板代码、处理各种配置细节。随着AI编程工具的爆发式增长如GitHub Copilot、Cursor、通义灵码、CodeGeeX等我们迎来了全新的“对话式编程”时代。本文将以AI Coding以Cursor 通义灵码为示例为核心完整记录如何从0到1实现一个Spring Boot Vue3的前后端项目——图书管理系统。整个过程中AI承担了代码生成、调试、优化等大量工作我们只需要“说人话”并配合少量手动调整即可。相信读完本文你会对AI辅助开发的能力边界和实用技巧有更深刻的认识。二、项目简介与技术栈项目名称BookManager图书管理系统功能模块图书列表展示分页查询新增图书书名、作者、价格、库存编辑图书信息删除图书逻辑删除技术栈后端Spring Boot 2.7.x、MyBatis-Plus、MySQL 8.0、Lombok前端Vue3、Vite、Element Plus、Axios数据库MySQLAI工具Cursor内置GPT-4 通义灵码IntelliJ IDEA插件开发环境IntelliJ IDEA 2023.3、VS Code、Navicat三、AI编程工具选择本次实践使用两款AI工具协同工作工具用途优点Cursor前端代码生成、项目初始化、对话式代码编写理解上下文强支持跨文件编辑通义灵码IDEA插件后端Java代码补全、单元测试、SQL生成与IDE深度集成适合Spring Boot当然你也可以仅使用其中一种如GitHub Copilot原理相通。四、项目开发过程从0到14.1 需求分析与AI辅助操作打开Cursor新建一个对话输入我要开发一个图书管理系统包含图书列表分页展示、新增图书、编辑图书、删除图书功能。请帮我设计技术方案使用Spring Boot Vue3 MySQL。AI输出节选text推荐方案后端Spring Boot MyBatis-Plus提供RESTful API 数据库book表id, name, author, price, stock, deleted 前端Vue3 Element Plus Axios 开发步骤...在这个阶段AI帮我们完成了技术选型、数据模型设计思路节省了30分钟的文档查阅时间。4.2 数据库设计与AI生成SQL直接让AI生成建表语句通义灵码对话我的提问根据图书管理系统的需求设计MySQL数据库表字段包括主键、书名、作者、价格、库存、逻辑删除标记、创建时间、更新时间。AI生成的SQLsqlCREATE TABLE book ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键ID, name varchar(100) NOT NULL COMMENT 书名, author varchar(50) DEFAULT NULL COMMENT 作者, price decimal(10,2) DEFAULT NULL COMMENT 价格, stock int(11) DEFAULT 0 COMMENT 库存数量, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除(0-未删除,1-已删除), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT图书表;执行后成功创建表。AI还贴心地给出了索引优化建议如对name字段添加普通索引。4.3 后端Spring Boot项目搭建AI生成基础代码4.3.1 初始化项目在IDEA中新建Spring Boot项目添加依赖Spring Web、MyBatis-Plus、MySQL Driver、Lombok。使用通义灵码在IDEA右侧打开通义灵码窗口输入帮我生成MyBatis-Plus的配置类并配置数据源application.yml格式。AI输出yaml# application.yml spring: datasource: url: jdbc:mysql://localhost:3306/book_db?useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-delete-value: 1 logic-not-delete-value: 0直接复制到项目中无需手写。4.3.2 实体类、Mapper、Service、Controller一键生成利用通义灵码的“代码生成”功能先创建实体类Book.java。对话式输入根据book表生成对应的Java实体类使用Lombok注解并配置MyBatis-Plus的表名、主键策略。AI生成javaimport com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; Data TableName(book) public class Book { TableId(type IdType.AUTO) private Long id; private String name; private String author; private BigDecimal price; private Integer stock; TableLogic private Integer deleted; private LocalDateTime createTime; private LocalDateTime updateTime; }接下来生成Mapper接口继承BaseMapper生成BookMapper接口继承MyBatis-Plus的BaseMapper。AI输出极简代码javaMapper public interface BookMapper extends BaseMapperBook { }然后生成Service层生成BookService接口和实现类提供分页查询、新增、修改、删除方法。AI生成的Service实现类部分javaService public class BookServiceImpl extends ServiceImplBookMapper, Book implements BookService { Override public PageBook pageQuery(int pageNum, int pageSize) { PageBook page new Page(pageNum, pageSize); LambdaQueryWrapperBook wrapper new LambdaQueryWrapper(); wrapper.orderByDesc(Book::getCreateTime); return this.page(page, wrapper); } // 其他增删改方法直接调用父类save, updateById, removeById即可 }最后生成Controller生成BookController包含分页查询、新增、修改、删除的REST接口使用Restful风格。AI输出完整Controller代码带RestController、RequestMapping等注解方法参数使用RequestBody和PathVariable。例如javaRestController RequestMapping(/api/books) public class BookController { Autowired private BookService bookService; GetMapping(/page) public ResultPageBook page(RequestParam(defaultValue1) int pageNum, RequestParam(defaultValue10) int pageSize) { return Result.success(bookService.pageQuery(pageNum, pageSize)); } PostMapping public ResultBoolean add(RequestBody Book book) { return Result.success(bookService.save(book)); } // ... }其中Result统一响应类也是AI生成的包含code、msg、data字段。整个后端核心代码耗时不到15分钟传统模式至少需要1-2小时。4.4 前端Vue3项目搭建与AI生成页面4.4.1 初始化前端项目使用Vite创建Vue3项目bashnpm create vitelatest book-front -- --template vue cd book-front npm install element-plus axios vue-router4.4.2 AI生成主页面和CRUD组件打开Cursor将整个前端项目文件夹作为工作区。在对话框中输入帮我生成一个图书管理的前端页面使用Vue3 Element Plus。需要实现图书表格展示支持分页、新增按钮弹出对话框表单、编辑和删除操作。axios请求后端API基地址为http://localhost:8080/api。Cursor生成的完整Vue文件src/views/BookManage.vuevuetemplate div classbook-container el-button typeprimary clickhandleAdd新增图书/el-button el-table :datatableData border stylewidth: 100% el-table-column propname label书名 / el-table-column propauthor label作者 / el-table-column propprice label价格 / el-table-column propstock label库存 / el-table-column label操作 template #default{ row } el-button link typeprimary clickhandleEdit(row)编辑/el-button el-button link typedanger clickhandleDelete(row.id)删除/el-button /template /el-table-column /el-table el-pagination v-model:current-pagepageNum :page-sizepageSize :totaltotal current-changeloadData / !-- 新增/编辑对话框 -- el-dialog v-modeldialogVisible :titledialogTitle el-form :modelformData label-width80px el-form-item label书名 el-input v-modelformData.name / /el-form-item !-- 其他字段省略类似 -- /el-form template #footer el-button clickdialogVisiblefalse取消/el-button el-button typeprimary clicksubmitForm确定/el-button /template /el-dialog /div /template script setup import { ref, onMounted } from vue import axios from axios const api axios.create({ baseURL: http://localhost:8080/api }) const tableData ref([]) const pageNum ref(1) const pageSize ref(10) const total ref(0) // ... 完整的方法包括 loadData, handleAdd, handleEdit, handleDelete, submitForm /scriptAI生成的代码中包含了所有必要的API调用分页查询、新增、编辑、删除逻辑完整。我们只需要微调一下字段名对应。4.4.3 解决跨域问题启动前端后访问后端接口会报跨域错误。我们直接在Cursor中提问Spring Boot如何配置全局跨域AI给出CORS配置类复制到后端项目即可javaConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET,POST,PUT,DELETE) .allowCredentials(true); } }4.5 前后端联调与AI调试联调过程中遇到了两个小bug前端提交的价格字段为字符串后端期望BigDecimal在Cursor中粘贴错误信息AI建议在axios请求拦截器中统一转换或者后端使用JsonFormat。我们采用后端方式在实体类price字段上加JsonFormat(shape JsonFormat.Shape.STRING)同时前端确保传递数字。删除操作后分页数据不刷新AI分析删除成功后再次调用loadData()即可。代码调整后完美解决。4.6 部署与AI辅助项目需要打包部署。向AI询问如何将Spring Boot项目打包成jar并运行Vue项目如何打包并部署到nginxAI分别给出Maven打包命令mvn clean package和Vite打包命令npm run build并提供了nginx配置示例。最终我们将jar包部署到服务器nginx托管前端dist目录成功运行。五、AI编程使用技巧与心得通过本次实战我总结出几条高效使用AI编程的黄金法则把AI当作结对编程伙伴不要只问“怎么写代码”而是描述“我要实现什么功能输入输出是什么当前环境”。上下文越详细输出越精准。分步骤生成不要一次性要求生成整个项目而是从数据库→实体→Mapper→Service→Controller→前端逐步推进。善用注释引导在Java类中写一行// 分页查询带条件AI会自动补全对应代码块。学会追问和调试当AI生成的代码运行出错直接将错误堆栈粘贴给AI通常能快速定位问题。保持代码审查AI可能会使用过时的API或存在逻辑漏洞比如忘记加Transactional需要人工核对。六、总结AI编程的优缺点优点效率提升10倍以上原本一周的工作量压缩到1天包括学习摸索时间。降低样板代码负担MyBatis-Plus集成、分页、REST接口、前端表格表单……AI统统代劳。学习成本低即使不熟悉某项技术如Vue3组合式API通过AI示例也能快速上手。减少拼写和格式错误AI生成的代码风格统一避免手误。缺点不完全理解业务生成的分页查询条件可能不符合实际业务逻辑需要手动调整。依赖网络和AI服务稳定性偶尔AI会“拒绝回答”或生成半截代码。存在代码安全隐患例如AI生成的SQL拼接可能引发注入使用MyBatis-Plus则安全。开发者必须具备基本的安全意识。盲目复制可能导致冗余AI可能生成大量不必要的import或重复方法。