Copilot AI 编程训练营第二天：1 小时 0 手写开发一个购物车系统

经过训练营第一天的学习，大家都已经能基本熟练的使用 GitHub Copilot 进行辅助编程啦。

第二天，是考验学习成果的一天，我们需要在 2 小时内，通过 GitHub Copilot 完全 0 代码开发一个购物车系统。

熟练使用的同学，大概 1 小时就能完成啦！

我们开始今天的分享～

前置内容（可以文末领取）

1. 一个默认的 Spring Boot 框架。
2. 一段需求描述。
3. 一段啤酒数据的 Json 数据。

分析需求

输入需求文档，可以复制内容到 Copilot，也可以直接上传文件到 GPT-4.0。

@workspace 目标：开发一个购物车。购物车应该允许用户添加和删除产品。
需求描述：
1、创建一个带有以下方法的 API Rest
1）使用页偏移和限制获取啤酒列表。
2）按 id 获取啤酒详细信息。
3）通过名称、描述、标语、与食物搭配和价格搜索啤酒。
2、在主页面创建产品列表。
3、创建一个搜索栏来筛选产品。
4、当用户点击产品时跳转到描述页面。
5、创建一个购物车。
1）将产品添加到购物车。
2）从购物车中删除产品。
3）计算购物车中产品的总价格。
请你分析上述需求文档，结合项目结构，生成 controller 层代码。

controller 层代码框架就生成好了，我们直接复制粘贴到 Controller 目录下即可。

解析 Json 数据

解析 Json 数据生成 Java Bean 对象

这个 Json 文件有点大，生成 Java Bean 对象的时候，可以选择其中一个对象进行生成。

也可以，把文件 copy 到 VS Code Studio 中，在 chat 中可以和 Edit 区域进行联动（这个还是很高级的～），可以直接问 Chat。

阅读这个 json 文件，帮我生成一个 Java Bean 对象

我们把代码 copy 到 model 目录（可以自己创建）下。这个时候，我们的代码是如下图结构所示：

解析 Json 数据工具类

根据 Json 数据文件，直接生成一个工具类，帮我们读取 Json 数据。

阅读这个json文件，帮我生成一个读取完整json数据的Java工具类。

我们 copy 包配置到 pom.xml 文件中，然后创建一个 util 文件夹，存放工具代码。

这个方法是我们的核心工具方法，我们让 Copilot 帮我们生成单元测试。

选中这个方法，选择 Copilot，下拉选择 Gernerate Tests 生成单元测试。

java

复制代码

import org.junit.jupiter.api.Test; import static org.junit.jupiter.api.Assertions.*; class JsonUtilTest { @Test void testReadJsonFile() { // Arrange String fileName = "beers.json"; // Act List<Beer> beers = JsonUtil.readJsonFile(fileName); // Assert assertNotNull(beers); assertEquals(3, beers.size()); // Add more assertions based on your specific JSON file and expected results } }

验证无误之后，继续往下，如果有问题，让 Copilot 帮你修复代码！

后端代码

啤酒商品 Controller 代码

这一步，我们让 Copilot 帮我们完善具体的方法内容。

使用页偏移和限制获取啤酒列表，啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。
请你根据上述描述，生成 getProducts 方法的完整内容

我们把内容 copy 到方法体中。

第二个方法，prompt：

按 id 获取啤酒详细信息，啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。然后使用 stream api 进行过滤返回匹配的 beer 对象进行返回。 请你按照上述描述，生成 getProductById 方法的完整内容。

第三个方法，prompt：

通过名称、描述、标语、与食物搭配和价格搜索啤酒。啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。然后使用 stream api 进行过滤返回匹配的 beer 对象数组。 请你按照上述描述，生成 searchProducts 方法的完整内容。

购物车 Controller 代码

我们使用 workspace 命令，直接让 Copilot 生成 CartController 代码。

@workspace 请你使用本地缓存购物车数据的方式，实现购物车的controller代码编写。

生成前端代码

虽然阿七是一个后端工程师，不会前端代码，但是无所谓，Copilot 什么语言都会。

有了 workspace 命令，全局性质的代码也不在话下！

@workspace 生成一个html页面，能够查询 beers 分页数据、详情数据；往购物车里添加beer、删除beer，计算购物车里的总价格。 要求：能够正确调用对应的接口。 现在，请你输出对应的html页面

我们在 Resources 下创建一个 static 文件夹，创建一个 index.html 文件，把 Copilot 生成的内容 Copy 到 index.html 文件中。

启动 Spring Boot 项目，浏览器打开 localhost:8080/index.html。

我们发现有些问题，包括页面的问题，以及后端代码的问题，不要慌，都可以扔给 Copilot，让它帮我们解决。

问题排查

编译问题

启动项目的时候，我们发现 ProductController.java 类有编译问题，我们让 Copilot 帮我们修复。

实体类导入 lombok 包

我们直接复制粘贴，就能解决代码问题。

总价格计算

修改计算购物车总价格的接口，让总价格等于购物车中所有beer的price之和

前端页面问题

刚开始页面很丑，可能也很大部分不满足我们的要求，我们让 Copilot 帮我们修改，直到满足我们的要求。

这个html文件，啤酒列表展示了啤酒的描述。
但是描述内容太多了，修改展示的字段，只展示 name、tagline、price 三个字段

最后的功能展示

我们选择 Add to Cart，Cart 列表中就会多一个 beer 商品，Total Price 区域就会计算购物车中的总价格。

我们选择 Remove from Cart，Cart 列表中就会删除一个 beer 商品，Total Price 区域就会重新计算，扣减这个 beer 商品的价格。

这样，我们大概花了 1 小时，一行代码都没有写，就完成了后端 Java 代码和前端 Html 代码的开发，并且整合发布，完成了一个简单的购物车功能啦！