devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Baidu Comate实操测评 暨 线下教学环境实测结果报告

作者：Gausst松鼠会 | 2024-06-08 19:43:58

赞

踩

Baidu Comate实操测评 暨 线下教学环境实测结果报告

前言

Comate的可实现内容为帮你想、帮你写、帮你改，那么，有这么好的工具，一定要响应一下学校的号召。

现阶段各高校都在琢磨如何可以让AI更好的服务于教学工作，那么，本篇文章测评Baidu Comate智能代码助手就是为了帮助学生们可以通过AI更好的学习编程而撰写，主要能提供到大家的结果是：

1、教师对Comate的功能进行全面测试，方便教会学生们。

2、在正常教学机房下(中型61台)教师与学生的计算机是否可以同时并发访问Comate，是否可以正常的进行代码补全，代码分析，代码提示等操作。

3、在文章中给出了一些代码示例也可以让大家在学习过程中有一定的帮扶作用。

希望本文能为大家的教学提供一定的提示作用。

系统与开发环境

系统：Windows 11 家庭中文版

java_ide：IntelliJ IDEA Community Edition 2024.1版本

web_ide：Visual Studio Code1.881版本

Java_Comate：2.0.4版本

web_Comate：2.4.0版本

教师全面测评

下面是第一个大部分，是单机进行全面的测试，平台测试的也会多一些，vscode与ide都会测试，我这不是苹果本，所以苹果就不测了，教学环境一般也不是苹果的，所以直接pass这块。我会根据使用场景实际判别的。这里的视频是我MySQL存储过程的授课前测试，效果还成，分享一下。

BaiduComate

官方地址

下方是地址以及二维码，尽可以使用。

https://comate.baidu.com/?inviteCode=7bgdn385

官方地址

下方是地址以及二维码，尽可以使用。

https://comate.baidu.com/?inviteCode=7bgdn385

可以看到基础功能是完全免费的，高级功能每周也有300次免费操作，还是相当亲民的呢。

Comate是一款集成了百度强大文心一言技术的免费智能代码生成器。它不仅能够提供代码续写、代码补全、代码注释、代码解释、代码修复、单元测试、代码debug、注释生成代码、代码重构、修复建议、自然语言生成代码、代码问答以及长函数拆分等多项功能，而且能够显著提升开发者的编程效率，优化代码质量。

登录

这里分为了2个端pc与移动，操作方法如下：

PC端

使用手机号+验证码可以直接登录。

手机端

手机端也是输入手机号码和验证码即可登录。

Comate主页

在主页可以看到支持的工具，是我们熟悉的前端的VSCode与后端的IDE全家桶，使用苹果的话也有Xcode的支持，这里是教学环境使用，所以肯定是pc端的win系统。

使用场景说明

百度 comate是百度倾力打造的AI写代码平台，它集成了百度强大的文心一言技术，为用户提供了强大的代码生成和智能编程支持，Comate支持100多种编程语言（如Python、C、C++、Java、Go等）和主流开发环境（如VSCode、IntelliJ IDEA），满足不同开发者的需求。

以下是三大使用场景的说明，后面我们会对这些场景一次的测试一遍。

调研&设计

当开发者要熟悉和理解刚接手的代码库或者文件，通常面临巨大的工作量，例如梳理整体架构、理解代码注释、特定逻辑等，非常耗时。

智能代码助手Baidu Comate能够高效处理这部分工作，为开发者提供即时深入的解析和回答，无论是询问代码库的整体架构，探索特定的实现逻辑，还是梳理代码间的复杂依赖关系，都能给出清晰、准确的指导，使开发者能够迅速把握项目的全貌，优化和调整代码结构，提高开发效率和代码质量，并且开发者使用自然语言即可完成上述交互，享受代码智能辅助。

编写代码

当开发者需要在已有代码库或开源项目基础上，进一步做扩展功能等开发工作时，通常面临较大的工作量，首先需要深入理解现有的代码，包括代码的结构、函数和类，以及了解它们是如何组织和相互调用的，还有还要了解相关文档和注释，运行现有的测试用例，了解代码的行为和预期的输出等。

使用智能代码助手Baidu Comate，可以省去开发者人工处理上述复杂工作，转而由AI编码完成，依托强大的智能化能力，Baidu Comate能够基于已有的代码库或文件，快速生成新的代码片段，涵盖从基础的增删改查操作到复杂的业务逻辑实现，并且保证了代码的一致性和高质量。

测试&部署

完成基于现有代码自动生成单元测试，通常要经过代码分析、测试框架选择、测试用例生成、测试断言编写、集成与运行等环节。在具体实现过程中，会遇到代码库情况复杂、需要细致识别和处理代码的边界情况、现有测试框架和工具不适用、代码库发生演变/更新等挑战。

不止于AI编码和自然语言代码生成等能力，智能代码助手Baidu Comate还能基于现有的业务逻辑和代码结构自动设计和生成复杂的单元测试。这意味着开发者不再需要手动编写每一个测试用例，在确保代码质量的同时，大幅提高测试效率。无论是验证新功能的正确性，还是确保现有功能在修改后仍然稳定运行，Baidu Comate都能提供强大的支持，使软件开发的每一步都更加稳健可靠，辅助开发者实现全场景AI编程。

实操一、Java_IDE安装Comate操作

接下来我先通过ide来操作一下Comate，因为启动接口后我们才能正常的解析代码。

基础的项目结构，就是一个基础的springboot项目，用自己的也可以无所谓，我这里会直接下发给学生，我没开免费，自己创建一个就行，不复杂。https://download.csdn.net/download/feng8403000/89244312下载。

通过IDE安装Comate

根据以下操作提示进行逐步操作。

需要【Accept接受】安装

安装完毕，重启IDE(如果出现连接异常，重新安装即可，我第一次安装就没连接上，再次Install即可)

点击重启

登录到百度Comate

这里需要登录一下，但是我们也可以不登录进行测试一下，可以看到，必须要登录操作。

当我们没有登录进行搜索的时候就能看到登录提示了，我的计算机名称是qwe84，所以显示这个，接下来我们去登陆。

填写百度账号信息，语言这里我们需要使用java语言，所以禁用其它语言即可，填写完毕后点击【OK】即可。

插入建议1、IDE插件的禁用语言操作中全选后添加个复选框

去个人主页：【https://comate.baidu.com/zh/user】复制个人License

实操二、IDE的Comate具体操作测试

model类的代码分析测试

第一个问题，我选中了一个【model】层下的【Student】类，全选了里面的代码，问了一下：【选中的代码作用是什么?】，可以在回答中看到给的回答是非常准确的，包括toString、Getter和Setter方法也给了解释，就很完整。

插入建议2、提问栏给个光标提示，或者给个更醒目的方法。

我在登录完成返回到操作页面的时候，还是找了一下的，没能直接就看出来提问的位置。

Comate的图标操作提示

这里可以在类中的每个函数上看到代码操作提示，就很方便。

函数注释

函数注释，也就是我们经常的/**函数注释操作*/，可以按照以下操作步骤来执行，生成一个非常恰当且官方的注释内容，通过点击【采纳】即可直接添加到代码中，效果很直接。

行间注释

行间的就是//行注释了，我们直接点击行间注释会进行自动分析，可以直接看到分析结果，如果有其它分析结果可以点击【查看变更】，如果确定的话，还是需要点击一下【采纳】才能将代码替换过去。

查看变更，但是变更中未发现其他的注释情况。可以是我误解提示了，是变更，不是其它选项。

完整注释

生成测单

点击【生成单侧】，我们可以看到直接生成了一个新的类，如果我们点击采纳之后就会直接在当前的路径下创建一个测试类，我们运行即可使用。

采纳后效果：

有模拟数据，但是少了输出语句，我们单独输出一下。

我们添加个断点，然后使用Debug运行。

查看效果很完美。

代码解释

随便选了一个函数，点击了代码解释，可以看到每个单词都给解释了。我们换一个再试试。

从controller层随便找了个函数看看解释效果：

解释的相当可以，函数的注释与注解都有所说明，而且都是正确的，方法中的参数与名称也都做了分析，方法体中外部引入的函数也都给了说明，我这里没有写返回的SUCCESS类，直接就写了个map代替一下，也都有说明，最后我返回内容中的错别字还给点了出来，分析的就很到位，点个赞。

调优建议

我非常喜欢这个功能，把问题分析的非常明确，并且在分析完毕后给出了对应的调优方案。这样就省去了大把的思考时间了，下边是我的代码，毕竟写的就是一个demo，所以问题很多，我们也来分析一下，再来看看实际分析情况。

  1. /**
  2.  * 添加信息
  3.  * @param userName
  4.  * @param pwd
  5.  * @param phone
  6.  * @param age
  7.  * @param sex
  8.  * @param introduce
  9.  * @return
  10.  */
  11. @PostMapping(value = "/AddInfoApi")
  12. @ApiOperation(value = "添加", notes = "没啥留言的")
  13. @ApiImplicitParams({
  14.         @ApiImplicitParam(name = "userName", required = true, paramType = "query", dataType = "String", value = "用户名"),
  15.         @ApiImplicitParam(name = "pwd", required = true, paramType = "query", dataType = "String", value = "密码"),
  16.         @ApiImplicitParam(name = "phone", required = true, paramType = "query", dataType = "String", value = "手机号"),
  17.         @ApiImplicitParam(name = "age", required = true, paramType = "query", dataType = "int", value = "年龄"),
  18.         @ApiImplicitParam(name = "sex", required = true, paramType = "query", dataType = "char", value = "性别"),
  19.         @ApiImplicitParam(name = "introduce", required = true, paramType = "query", dataType = "String", value = "简介")
  20. })
  21. public Object AddInfoApi(String userName, String pwd, String phone, int age, char sex, String introduce) {
  22.     HashMap<String, Object> map = new HashMap<String, Object>();
  23.     if (StringUtils.isEmpty(userName) || StringUtils.isEmpty(pwd) || StringUtils.isEmpty(introduce)) {
  24.         map.put("state", false);
  25.         map.put("msg", "参数不润许为空");
  26.         map.put("result", "");
  27.         return map;
  28.     }
  29.     studentService.AddInfo(userName, pwd, phone, age, sex, introduce);
  30.     map.put("state", true);
  31.     map.put("msg", "成功");
  32.     map.put("result", "");
  33.     return map;
  34. }

Comate给出的问题解析

问题分析：

代码风格问题：map.put("msg", "参数不润许为空"); 中“不润许”可能是一个拼写错误，应改为“不允许”。

安全性问题：方法参数中直接传递了用户名和密码等敏感信息，但在方法体内没有对这些信息进行任何加密或校验处理，存在安全风险。

代码可读性问题：studentService.AddInfo 方法调用时，参数列表较长，且参数类型不统一，可能影响代码可读性。

返回值描述性问题：map.put("result", ""); 中，result 字段被赋值为空字符串，这可能不是一个好的设计，因为即便操作成功，调用方也无法从这个字段获取到任何有用的信息。

修复后的代码片段：

  1. /**
  2.  * 添加信息
  3.  * @param userName 用户名
  4.  * @param pwd 密码（建议加密处理）
  5.  * @param phone 手机号
  6.  * @param age 年龄
  7.  * @param sex 性别
  8.  * @param introduce 简介
  9.  * @return 操作结果的Map对象
  10.  */
  11. @PostMapping(value = "/AddInfoApi")
  12. @ApiOperation(value = "添加", notes = "添加用户信息接口")
  13. @ApiImplicitParams({
  14.         @ApiImplicitParam(name = "userName", required = true, paramType = "query", dataType = "String", value = "用户名"),
  15.         // ... (其它参数保持不变)
  16. })
  17. public Object AddInfoApi(String userName, String pwd, String phone, int age, char sex, String introduce) {
  18.     HashMap<String, Object> map = new HashMap<String, Object>();
  19.     if (StringUtils.isEmpty(userName) || StringUtils.isEmpty(pwd) || StringUtils.isEmpty(introduce)) {
  20.         map.put("state", false);
  21.         map.put("msg", "参数不允许为空"); // 修正拼写错误
  22.         map.put("result", null); // 使用null代替空字符串，表示没有结果
  23.         return map;
  24.     }
  25.     
  26.     // 假设对密码进行了加密处理，实际开发中应在此处调用加密方法
  27.     String encryptedPwd = encryptPassword(pwd); 
  28.     studentService.AddInfo(userName, encryptedPwd, phone, age, sex, introduce);
  29.     
  30.     map.put("state", true);
  31.     map.put("msg", "成功");
  32.     // 可以考虑将新增的用户信息或其他相关标识作为result返回
  33.     // map.put("result", someUserInfoOrId);
  34.     map.put("result", null); // 保留原设计，但推荐使用具体信息替代
  35.     return map;
  36. }
  37.  
  38. // 示例加密方法，实际开发中应根据安全需求实现
  39. private String encryptPassword(String pwd) {
  40.     // 加密逻辑...
  41.     return encryptedPassword;
  42. }

优化点总结：

修正了返回消息中的拼写错误。

建议对密码进行加密处理，增强系统安全性。

改进了返回值的设计，使其更具描述性。

优化了参数传递和代码可读性（未在代码中直接体现，但建议对服务层方法进行调整）。

以上是给出的答案，在代码的提示中这回没有给【采纳】这个选项，需要我们自己来相应的处理。

提供的方法也都是比较标准的问题解决方案，特别是其中涉及到了pwd操作，所以安全尤为重要。

仿照代码生成

这里我根据mapper的xml全选后当做提示内容，让Comate仿照生成一个仅修改用户名与简介的代码，结果是它给的结果不仅满足功能且还考虑到了安全的问题，防止了sql注入操作，以及为什么要使用#{userName}的原由也说了出来，很详细，很好。

实操三、根据原项目，利用Comate重新生成一个新表操作功能

根据类生成SQL的DDL与DML语句

我选中的是model层Student的代码，提问内容是：根据选中的类结构，仿照生成一个商品表的DDL语句，并且生成5条DML语句方便插入数据，数据要中文的。

我们来看看效果：

DDL执行测试：

  1. CREATE TABLE Product (
  2.     id INT AUTO_INCREMENT PRIMARY KEY,
  3.     productName VARCHAR(255) NOT NULL,
  4.     phoneNumber VARCHAR(20),
  5.     price DECIMAL(10, 2),
  6.     category VARCHAR(255),
  7.     gender ENUM('男', '女', '无'),
  8.     description TEXT
  9. );

DML执行测试：

  1. INSERT INTO Product (productName, phoneNumber, price, category, gender, description) VALUES
  2. ('华为手机Mate50', '13800138000', 4999.00, '电子产品', '无', '华为最新旗舰手机，搭载高性能处理器和大容量电池。'),
  3. ('耐克运动鞋Air Max', '13900139000', 899.00, '运动装备', '男', '透气性好，轻盈舒适，适合长时间运动。'),
  4. ('兰蔻小黑瓶精华液', '13700137000', 1099.00, '美妆护肤', '女', '深层修护，改善肌肤问题，提升肌肤弹性。'),
  5. ('索尼降噪耳机WH-1000XM4', '13600136000', 2899.00, '电子产品', '无', '顶级降噪效果，音质卓越，佩戴舒适。'),
  6. ('苹果iPad Pro', '13500135000', 6999.00, '电子产品', '无', '高分辨率显示屏，强大的性能，适合学习和娱乐。');

依然是运行成功，我们再去查看一下表内容。

表内容查询：

唯一一个有异常的列就是gender列，但是也是没什么违和感的，毕竟对应产品的使用人群来对照一下就很匹配的呢。男性的运动鞋，女性的兰蔻小黑瓶，其它都用的都是无来代表，说明数据匹配，没问题。

生成model层Product类

问题前提，选中Student类中的所有代码后提问。

问题：

CREATE TABLE Product ( id INT AUTO_INCREMENT PRIMARY KEY, productName VARCHAR(255) NOT NULL, phoneNumber VARCHAR(20), price DECIMAL(10, 2), category VARCHAR(255), gender ENUM('男', '女', '无'), description TEXT );根据以上表结构写一个类似于Student的model层Product类。

生成完毕后，直接复制代码，粘贴到model层，对应的类文件就会被创建，很方便。

实际代码：

  1. package com.item.model;
  2.  
  3. public class Product {
  4.     private int id;
  5.     private String productName;
  6.     private String phoneNumber;
  7.     private double price;
  8.     private String category;
  9.     private String gender; // 假设gender字段存储的是字符串形式，例如："男", "女", "无"
  10.     private String description;
  11.  
  12.     public int getId() {
  13.         return id;
  14.     }
  15.  
  16.     public void setId(int id) {
  17.         this.id = id;
  18.     }
  19.  
  20.     public String getProductName() {
  21.         return productName;
  22.     }
  23.  
  24.     public void setProductName(String productName) {
  25.         this.productName = productName;
  26.     }
  27.  
  28.     public String getPhoneNumber() {
  29.         return phoneNumber;
  30.     }
  31.  
  32.     public void setPhoneNumber(String phoneNumber) {
  33.         this.phoneNumber = phoneNumber;
  34.     }
  35.  
  36.     public double getPrice() {
  37.         return price;
  38.     }
  39.  
  40.     public void setPrice(double price) {
  41.         this.price = price;
  42.     }
  43.  
  44.     public String getCategory() {
  45.         return category;
  46.     }
  47.  
  48.     public void setCategory(String category) {
  49.         this.category = category;
  50.     }
  51.  
  52.     public String getGender() {
  53.         return gender;
  54.     }
  55.  
  56.     public void setGender(String gender) {
  57.         this.gender = gender;
  58.     }
  59.  
  60.     public String getDescription() {
  61.         return description;
  62.     }
  63.  
  64.     public void setDescription(String description) {
  65.         this.description = description;
  66.     }
  67.  
  68.     @Override
  69.     public String toString() {
  70.         return "Product{" +
  71.                 "id=" + id +
  72.                 ", productName='" + productName + '\'' +
  73.                 ", phoneNumber='" + phoneNumber + '\'' +
  74.                 ", price=" + price +
  75.                 ", category='" + category + '\'' +
  76.                 ", gender='" + gender + '\'' +
  77.                 ", description='" + description + '\'' +
  78.                 '}';
  79.     }
  80. }

生成dao层ProdeuctDAO类

根据dao层的StudentMapper.java与model层的Product类，生成一个dao层的ProductMapper的类代码。

我这里选中的是dao层的StudentMapper，如果是你的项目可以根据操作仿照一下操作你的类。

实际生成代码：

  1. package com.item.dao;
  2.  
  3. import com.item.model.Product;
  4. import org.apache.ibatis.annotations.Param;
  5. import org.springframework.stereotype.Repository;
  6.  
  7. import java.util.List;
  8.  
  9. @Repository
  10. public interface ProductMapper {
  11.     /**
  12.      * 查询所有商品
  13.      * @return 商品列表
  14.      */
  15.     List<Product> getAllProducts();
  16.  
  17.     /**
  18.      * 根据商品名称模糊查询商品
  19.      * @param productName 商品名称
  20.      * @return 商品列表
  21.      */
  22.     List<Product> selectByProductName(@Param("productName") String productName);
  23.  
  24.     /**
  25.      * 根据ID精准查询商品
  26.      * @param id 商品ID
  27.      * @return 商品对象
  28.      */
  29.     Product selectById(@Param("id") int id);
  30.  
  31.     /**
  32.      * 添加商品信息
  33.      * @param productName 商品名称
  34.      * @param description 商品描述
  35.      * @param price 商品价格
  36.      * @param stock 商品库存
  37.      * @param categoryId 商品类别ID
  38.      * @return 添加操作的结果（通常是影响的行数）
  39.      */
  40.     int addProduct(
  41.             @Param("productName") String productName,
  42.             @Param("description") String description,
  43.             @Param("price") double price,
  44.             @Param("stock") int stock,
  45.             @Param("categoryId") int categoryId
  46.     );
  47.  
  48.     /**
  49.      * 修改商品信息
  50.      * @param id 商品ID
  51.      * @param productName 商品名称
  52.      * @param description 商品描述
  53.      * @param price 商品价格
  54.      * @param stock 商品库存
  55.      * @param categoryId 商品类别ID
  56.      * @return 修改操作的结果（通常是影响的行数）
  57.      */
  58.     int updateProduct(
  59.             @Param("id") int id,
  60.             @Param("productName") String productName,
  61.             @Param("description") String description,
  62.             @Param("price") double price,
  63.             @Param("stock") int stock,
  64.             @Param("categoryId") int categoryId
  65.     );
  66.  
  67.     /**
  68.      * 根据ID删除商品
  69.      * @param id 商品ID
  70.      * @return 删除操作的结果（通常是影响的行数）
  71.      */
  72.     int deleteProductById(@Param("id") int id);
  73. }

粘贴代码到【dao】层，可以看到很完整，注释都很全面。

在给完代码后还给了注意内容，很贴心。

请注意，这个ProductMapper接口是基于假设的Product类字段生成的，这些字段可能包括productName（商品名称）、description（商品描述）、price（商品价格）、stock（商品库存）和categoryId（商品类别ID）。您需要根据实际的Product类字段和数据库表结构来调整这个接口中的方法参数和名称。

同时，请注意，在实际的项目中，您还需要在MyBatis的配置文件中配置对应的Mapper XML文件或者在Mapper接口上使用MyBatis的注解来定义SQL语句。此外，Product类也应该包含与数据库表对应的字段和getter/setter方法。

生成mapper层的ProduceMapper.xml文件

根据mapper层的StudentMapper.xml与model层的Product类，生成一个mapper层的ProductMapper.xml。函数名称需要与dao层的ProductMapper一一对应。

整个做工的细节都给了说明：

问题：函数名称对不上。

我们复制一下代码，并生成一下文件，需要手动修改一下函数名称。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.item.dao.ProductMapper">
  4.  
  5.     <!-- 查询所有产品信息 -->
  6.     <select id="getAllProducts" resultType="com.item.model.Product">
  7.         SELECT * FROM product
  8.     </select>
  9.  
  10.     <!-- 根据产品名称模糊查询产品信息 -->
  11.     <select id="selectByProductName" resultType="com.item.model.Product">
  12.         SELECT * FROM product WHERE name LIKE CONCAT('%', #{productName}, '%')
  13.     </select>
  14.  
  15.     <!-- 根据ID查询产品信息 -->
  16.     <select id="selectById" resultType="com.item.model.Product">
  17.         SELECT * FROM product WHERE id = #{id}
  18.     </select>
  19.  
  20.     <!-- 添加产品信息 -->
  21.     <insert id="addProduct">
  22.         INSERT INTO product (name, price, description)
  23.         VALUES (#{name}, #{price}, #{description})
  24.     </insert>
  25.  
  26.     <!-- 更新产品信息 -->
  27.     <update id="updateProduct">
  28.         UPDATE product
  29.         SET name = #{name}, price = #{price}, description = #{description}
  30.         WHERE id = #{id}
  31.     </update>
  32.  
  33.     <!-- 删除产品信息 -->
  34.     <delete id="deleteProductById">
  35.         DELETE FROM product WHERE id = #{id}
  36.     </delete>
  37.  
  38. </mapper>

但是由于是非Java的类文件，所以需要人为创建一下【ProductMapper.xml】。

插入建议3、根据dao层生成mapper层代码的时候无法正确读取函数名称

这里是否可以在插件中添加一个选择多个文件作为参考的操作。

生成service层的ProduceService类

这里的操作与之前的几个都类似。语法依然是：

根据service层的StudentService类，生成一个service层的ProductService类。函数名称需要自行修改。

生成代码：

  1. package com.item.service;
  2.  
  3. import com.item.model.Product;
  4. import org.apache.ibatis.annotations.Param;
  5.  
  6. import java.util.List;
  7.  
  8. public interface ProductService {
  9.     /**
  10.      * 查询所有商品
  11.      *
  12.      * @return 商品列表
  13.      */
  14.     List<Product> getAllProducts();
  15.  
  16.     /**
  17.      * 通过商品名称模糊查询商品
  18.      *
  19.      * @param productName 商品名称
  20.      * @return 商品列表
  21.      */
  22.     List<Product> selectByProductName(String productName);
  23.  
  24.     /**
  25.      * 精准查询商品
  26.      *
  27.      * @param id 商品ID
  28.      * @return 商品对象
  29.      */
  30.     Product selectById(int id);
  31.  
  32.     /**
  33.      * 添加商品信息
  34.      *
  35.      * @param productName 商品名称
  36.      * @param description 商品描述
  37.      * @param price 商品价格
  38.      * @param stock 商品联系电话
  39.      * @param categoryId 商品类别ID
  40.      * @return 添加操作的结果（通常是影响的行数）
  41.      */
  42.     int addProduct(
  43.             String productName,
  44.             String description,
  45.             double price,
  46.             int stock,
  47.             int categoryId
  48.     );
  49.  
  50.     /**
  51.      * 修改商品信息
  52.      *
  53.      * @param id 商品ID
  54.      * @param productName 商品名称
  55.      * @param description 商品描述
  56.      * @param price 商品价格
  57.      * @param stock 商品联系电话
  58.      * @param categoryId 商品类别ID
  59.      * @return 修改操作的结果（通常是影响的行数）
  60.      */
  61.     int updateProduct(
  62.             int id,
  63.             String productName,
  64.             String description,
  65.             double price,
  66.             int stock,
  67.             int categoryId
  68.     );
  69.  
  70.     /**
  71.      * 根据ID删除商品
  72.      *
  73.      * @param id 商品ID
  74.      * @return 删除操作的结果（通常是影响的行数）
  75.      */
  76.     int deleteProductById(int id);
  77. }

稍微有些区别的就是它在底部又给了个实现层的示例。

虽然没有全部完成，但是给的就很有帮助性。我们知道一下步应该做什么了。

生成serviceimpl层ProductServiceImpl类

根据serviceimpl层的StudentServiceImpl类，生成一个serviceimpl层的ProductServiceImpl类,函数名需要与service层的ProductService接口吻合，调用的。

实际生成代码，还是需要改一下函数名称。

  1. package com.item.serviceimpl;
  2.  
  3. import com.item.model.Product;
  4. import com.item.service.ProductService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  7. import com.item.dao.ProductMapper;
  8.  
  9. import java.util.List;
  10.  
  11. @Service
  12. public class ProductServiceImpl implements ProductService {
  13.  
  14.     @Autowired
  15.     private ProductMapper productMapper;
  16.  
  17.     @Override
  18.     public List<Product> getAllProducts() {
  19.         return productMapper.getAllProducts();
  20.     }
  21.  
  22.     @Override
  23.     public List<Product> selectByProductName(String productName) {
  24.         return productMapper.selectByProductName(productName);
  25.     }
  26.  
  27.     @Override
  28.     public Product selectById(int id) {
  29.         return productMapper.selectById(id);
  30.     }
  31.  
  32.     @Override
  33.     public int addProduct(String productName, String description, double price, int stock, int categoryId) {
  34.         return productMapper.addProduct(productName, description, price, stock, categoryId);
  35.     }
  36.  
  37.     @Override
  38.     public int updateProduct(int id, String productName, String description, double price, int stock, int categoryId) {
  39.         return productMapper.updateProduct(id, productName, description, price, stock, categoryId);
  40.     }
  41.  
  42.     @Override
  43.     public int deleteProductById(int id) {
  44.         return productMapper.deleteProductById(id);
  45.     }
  46. }

插入建议4、参数对应不上问题

上下文解读不够详细，导致生成函数的时候发现了参数长度一致，但是参数顺序不一致的问题。

生成controller层ProductController类

问题：根据controller层的StudentController类，生成一个ProductController类。

生成代码：

  1. package com.item.controller;
  2.  
  3. import com.item.model.Product;
  4. import com.item.service.ProductService;
  5. import io.swagger.annotations.Api;
  6. import io.swagger.annotations.ApiImplicitParam;
  7. import io.swagger.annotations.ApiImplicitParams;
  8. import io.swagger.annotations.ApiOperation;
  9. import org.apache.commons.lang3.StringUtils;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.web.bind.annotation.*;
  12.  
  13. import java.util.HashMap;
  14. import java.util.List;
  15.  
  16. @Api("产品接口声明")
  17. @RestController
  18. @CrossOrigin
  19. public class ProductController {
  20.     @Autowired
  21.     private ProductService productService;
  22.  
  23.     /**
  24.      * 获取所有产品信息
  25.      * @return 产品列表
  26.      */
  27.     @GetMapping("/getProductsApi")
  28.     @ApiOperation(value = "获取所有产品", notes = "获取系统中所有产品的信息")
  29.     public Object getProductsApi() {
  30.         List<Product> list = productService.getAllProducts();
  31.         HashMap<String, Object> map = new HashMap<String, Object>();
  32.         map.put("state", true);
  33.         map.put("msg", "成功");
  34.         map.put("result", list);
  35.         return map;
  36.     }
  37.  
  38.     /**
  39.      * 根据产品名称获取产品信息
  40.      * @param productName 产品名称
  41.      * @return 产品列表
  42.      */
  43.     @GetMapping("/getProductsByName")
  44.     @ApiOperation(value = "根据名称获取产品", notes = "通过产品名称模糊查询产品信息")
  45.     @ApiImplicitParams({@ApiImplicitParam(name = "productName", required = true, paramType = "query", dataType = "String", value = "产品名称")})
  46.     public Object getProductsByName(String productName) {
  47.         List<Product> list = productService.findProductsByName(productName);
  48.         HashMap<String, Object> map = new HashMap<String, Object>();
  49.         map.put("state", true);
  50.         map.put("msg", "成功");
  51.         map.put("result", list);
  52.         return map;
  53.     }
  54.  
  55.     /**
  56.      * 添加产品信息
  57.      * @param productName 产品名称
  58.      * @param description 产品描述
  59.      * @param price 产品价格
  60.      * @param phoneNumber 产品联系电话
  61.      * @param categoryId 产品类别ID
  62.      * @return 操作结果
  63.      */
  64.     @PostMapping(value = "/addProductApi")
  65.     @ApiOperation(value = "添加产品", notes = "添加一个新的产品信息")
  66.     @ApiImplicitParams({
  67.             @ApiImplicitParam(name = "productName", required = true, paramType = "query", dataType = "String", value = "产品名称"),
  68.             @ApiImplicitParam(name = "description", required = true, paramType = "query", dataType = "String", value = "产品描述"),
  69.             @ApiImplicitParam(name = "price", required = true, paramType = "query", dataType = "double", value = "产品价格"),
  70.             @ApiImplicitParam(name = "phoneNumber", required = true, paramType = "query", dataType = "String", value = "联系电话"),
  71.             @ApiImplicitParam(name = "categoryId", required = true, paramType = "query", dataType = "int", value = "产品类别ID")
  72.     })
  73.     public Object addProductApi(String productName, String description, double price, String phoneNumber, int categoryId) {
  74.         HashMap<String, Object> map = new HashMap<String, Object>();
  75.         if (StringUtils.isEmpty(productName) || StringUtils.isEmpty(description) || price <= 0) {
  76.             map.put("state", false);
  77.             map.put("msg", "参数不能为空或无效");
  78.             map.put("result", "");
  79.             return map;
  80.         }
  81.         int result = productService.addProduct(productName, description, price, phoneNumber, categoryId);
  82.         map.put("state", true);
  83.         map.put("msg", "成功");
  84.         map.put("result", result);
  85.         return map;
  86.     }
  87.  
  88.     /**
  89.      * 根据ID获取产品信息
  90.      * @param id 产品ID
  91.      * @return 产品对象
  92.      */
  93.     @GetMapping("/getProductById")

可以看到第94行出现了一个@符号就结束了，这是因为无法返回对应长度的结果导致的，所以我们输入一个【继续】就能看到后面的内容了。

二次拼接一下，如果有缺失的单独生成处理一下，就比较麻烦。

  1. package com.item.controller;
  2.  
  3. import com.item.model.Product;
  4. import com.item.service.ProductService;
  5. import io.swagger.annotations.Api;
  6. import io.swagger.annotations.ApiImplicitParam;
  7. import io.swagger.annotations.ApiImplicitParams;
  8. import io.swagger.annotations.ApiOperation;
  9. import org.apache.commons.lang3.StringUtils;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.web.bind.annotation.*;
  12.  
  13. import java.util.HashMap;
  14. import java.util.List;
  15.  
  16. @Api("产品接口声明")
  17. @RestController
  18. @CrossOrigin
  19. public class ProductController {
  20.     @Autowired
  21.     private ProductService productService;
  22.  
  23.     /**
  24.      * 获取所有产品信息
  25.      * @return 产品列表
  26.      */
  27.     @GetMapping("/getProductsApi")
  28.     @ApiOperation(value = "获取所有产品", notes = "获取系统中所有产品的信息")
  29.     public Object getProductsApi() {
  30.         List<Product> list = productService.getAllProducts();
  31.         HashMap<String, Object> map = new HashMap<String, Object>();
  32.         map.put("state", true);
  33.         map.put("msg", "成功");
  34.         map.put("result", list);
  35.         return map;
  36.     }
  37.  
  38.     /**
  39.      * 根据产品名称获取产品信息
  40.      * @param productName 产品名称
  41.      * @return 产品列表
  42.      */
  43.     @GetMapping("/getProductsByName")
  44.     @ApiOperation(value = "根据名称获取产品", notes = "通过产品名称模糊查询产品信息")
  45.     @ApiImplicitParams({@ApiImplicitParam(name = "productName", required = true, paramType = "query", dataType = "String", value = "产品名称")})
  46.     public Object getProductsByName(String productName) {
  47.         List<Product> list = productService.selectByProductName(productName);
  48.         HashMap<String, Object> map = new HashMap<String, Object>();
  49.         map.put("state", true);
  50.         map.put("msg", "成功");
  51.         map.put("result", list);
  52.         return map;
  53.     }
  54.  
  55.     /**
  56.      * 修改产品信息
  57.      * @param id 产品ID
  58.      * @param productName 产品名称
  59.      * @param description 产品描述
  60.      * @param price 产品价格
  61.      * @param stock 产品联系电话
  62.      * @param categoryId 产品类别ID
  63.      * @return 操作结果
  64.      */
  65.     @PostMapping(value = "/updateProductApi")
  66.     @ApiOperation(value = "修改产品", notes = "根据ID修改产品信息")
  67.     @ApiImplicitParams({
  68.             @ApiImplicitParam(name = "id", required = true, paramType = "query", dataType = "int", value = "产品ID"),
  69.             @ApiImplicitParam(name = "productName", required = true, paramType = "query", dataType = "String", value = "产品名称"),
  70.             @ApiImplicitParam(name = "description", required = true, paramType = "query", dataType = "String", value = "产品描述"),
  71.             @ApiImplicitParam(name = "price", required = true, paramType = "query", dataType = "double", value = "产品价格"),
  72.             @ApiImplicitParam(name = "stock", required = true, paramType = "query", dataType = "int", value = "联系电话"),
  73.             @ApiImplicitParam(name = "categoryId", required = true, paramType = "query", dataType = "int", value = "产品类别ID")
  74.     })
  75.     public Object updateProductApi(int id, String productName, String description, double price, int stock, int categoryId) {
  76.         HashMap<String, Object> map = new HashMap<String, Object>();
  77.         if (StringUtils.isEmpty(productName) || StringUtils.isEmpty(description) || price <= 0) {
  78.             map.put("state", false);
  79.             map.put("msg", "参数不能为空或无效");
  80.             map.put("result", "");
  81.             return map;
  82.         }
  83.         int product = productService.updateProduct(id, productName, description, price, stock, categoryId);
  84.         if (product == 0) {
  85.             map.put("state", false);
  86.             map.put("msg", "失败");
  87.             map.put("result", "");
  88.         } else {
  89.             map.put("state", true);
  90.             map.put("msg", "成功");
  91.             map.put("result", product);
  92.         }
  93.         return map;
  94.     }
  95.  
  96.     /**
  97.      * 删除产品信息
  98.      * @param id 产品ID
  99.      * @return 操作结果
  100.      */
  101.     @PostMapping(value = "/deleteProductApi")
  102.     @ApiOperation(value = "删除产品", notes = "根据ID删除产品信息")
  103.     @ApiImplicitParam(name = "id", required = true, paramType = "query", dataType = "int", value = "产品ID")
  104.     public Object deleteProductApi(int id) {
  105.         HashMap<String, Object> map = new HashMap<String, Object>();
  106.         int result = productService.deleteProductById(id);
  107.         if (result > 0) {
  108.             map.put("state", true);
  109.             map.put("msg", "成功");
  110.             map.put("result", "");
  111.         } else {
  112.             map.put("state", false);
  113.             map.put("msg", "产品ID不存在");
  114.             map.put("result", "");
  115.         }
  116.         return map;
  117.     }
  118. }

由于根据id查询的函数不完整，这里我又单独的生成了一下。

插入建议5、由于代码的特殊性，接口类有的时候有个百十来行很正常，由于有返回代码长度限制，无法正常返回

建议长度扩一下，应该是5000个字符还差不多。如果中间有cookie的处理，那么就更麻烦了，所以长度限制别太少。

各层类文件

每层的文件都需要复制代码后创建好，还有对应的函数名称需要能对照上，不然调用不了。

项目运行

这里就直接启动项目了。

swagger接口访问查看Product接口是否展示

接口展示成功，有几个需要改代码，比较麻烦我就没改，所以只有4个是OK的。

接口访问测试

说明访问是成功的，没问题，虽然生成过程还是有很多需要升级的地方，但是整体体验还是非常不错的，毕竟已经节约了大把的时间了，现在接口有了，我们需要搞Web端的了。

实操四、VS Code的Comate安装

这里我们就直接上操作了，毕竟对这个的熟悉程度应该较高的。

选择安装扩展插件

搜索Comate

直接搜索就行

点击【安装按钮】，安装完毕后需要重启，这里应该是弹出重启操作失败，

插入建议6、安装完毕插件后应该有重启提示，但是未弹出

所以只能手动的重启一下了。

插入建议7、vscode插件安装完毕，重启后并未正常显示，使用版本1.89.1

安装完毕并没有正常显示，登陆后先禁用，再次启动后才出现了图标。

尝试重新换个项目文件夹。

查看结果：

我的版本：

进入配置看看

输入信息

登录完成后依然没有显示，后来我禁用一下，再次启动就显示了。应该也得先登录后再这样操作。

虽然与官网的操作不太一致，但是万幸是解决了，这点官方得看看，是否能复现一下看看。

如果出现登录就可以直接登录baidu的账号了。

登录完成返回VSCode正常使用。

实操五、VS Code的Comate具体操作测试

实操前，看看我在官方文档中找到的Baidu Comate 常用操作的快捷方式。

基本功能

单行推荐(成功)

这里推荐使用【tab】快捷键，我随意创建了一个html页面，写了个title点到body里面按了一下tab就出现了盒子创建提示。

单行推荐用的应该是最多的，好多地方都是直接出提示的。

为了操作方便，我们把class换成id操作，利用单行推荐，很简单的就完成了九宫格。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>div九宫格效果</title>
  7.     <style>
  8.         *{
  9.             box-sizing: border-box;
  10.         }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div id="container"></div>
  15.     <script>
  16.         var container = document.getElementById('container');
  17.         container.style.width = '80%';
  18.         container.style.height = '80vh';
  19.         container.style.border = '1px solid black';
  20.         createDiv_9('red','gray');
  21.         //创建一个function函数，函数名位createDiv_9，有2个参数控制盒子的颜色，颜色是随机的
  22.         function createDiv_9(color1, color2) {
  23.             for (var i = 0; i < 9; i++) {
  24.                 var boxs = document.createElement('div');
  25.                 boxs.style.width = '33.33%';
  26.                 boxs.style.height = '26.67vh';
  27.                 boxs.style.float = 'left';
  28.                 boxs.style.border = '1px solid black';
  29.                 if (i % 2 == 0) {
  30.                     boxs.style.backgroundColor = color2;
  31.                     //添加color2颜色
  32.                 }else{
  33.                     //添加color1颜色
  34.                     boxs.style.backgroundColor = color1;
  35.                 }
  36.                 container.appendChild(boxs);
  37.             }
  38.         }
  39.     </script>
  40.   </body>
  41. </html>
多行推荐(js语言失败，python与java都成功)

这里官方给的是一个java语言的提示，我尝试了js语言的，但是js基本都是一行行提示，没看到多行的。

所以我也换python语言来试试。

行间提示(成功，需要快捷键ctrl+→)

行间提示官方给的示例中明显是一个左右的二叉，我们也来试试。

使用python写一个，给的提示竟然还是多行提示。

把函数参数写完看看：

生成代码模板

问题：我需要使用bootstrap框架来渲染一个接口列表，先给我一个基础的HTML代码模版。

在操作提示中有【新建文件】，直接点击新建文件就可以直接创建，非常方便。

当前提供的接口渲染模板

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>接口列表</title>
  7.     <!-- 引入Bootstrap CSS文件 -->
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11.     <div class="container mt-5">
  12.         <h1>接口列表</h1>
  13.         <table class="table table-striped table-hover">
  14.             <thead>
  15.                 <tr>
  16.                     <th>#</th>
  17.                     <th>接口名称</th>
  18.                     <th>接口地址</th>
  19.                     <th>请求方法</th>
  20.                     <th>状态</th>
  21.                 </tr>
  22.             </thead>
  23.             <tbody>
  24.                 <!-- 这里使用JavaScript或后端模板引擎来动态生成接口列表 -->
  25.                 <!-- 示例： -->
  26.                 <tr>
  27.                     <td>1</td>
  28.                     <td>获取用户信息</td>
  29.                     <td>/api/user/info</td>
  30.                     <td>GET</td>
  31.                     <td><span class="badge badge-success">正常</span></td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>2</td>
  35.                     <td>添加用户</td>
  36.                     <td>/api/user/add</td>
  37.                     <td>POST</td>
  38.                     <td><span class="badge badge-danger">异常</span></td>
  39.                 </tr>
  40.                 <!-- ...其他接口... -->
  41.             </tbody>
  42.         </table>
  43.     </div>
  44.  
  45.     <!-- 引入Bootstrap JS文件 -->
  46.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  47.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  48.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  49. </body>
  50. </html>

这就很离谱，我们需要继续碎片化处理一下。

根据返回的json文件进行列表渲染提问

请根据以下json格式进行bootstrap框架的列表渲染。

  1. {
  2.   "msg": "成功",
  3.   "result": [
  4.     {
  5.       "id": 1,
  6.       "productName": "华为手机Mate50",
  7.       "phoneNumber": "13800138000",
  8.       "price": 4999,
  9.       "category": "电子产品",
  10.       "gender": "无",
  11.       "description": "华为最新旗舰手机，搭载高性能处理器和大容量电池。"
  12.     },
  13.     {
  14.       "id": 2,
  15.       "productName": "耐克运动鞋Air Max",
  16.       "phoneNumber": "13900139000",
  17.       "price": 899,
  18.       "category": "运动装备",
  19.       "gender": "男",
  20.       "description": "透气性好，轻盈舒适，适合长时间运动。"
  21.     },
  22.     {
  23.       "id": 3,
  24.       "productName": "兰蔻小黑瓶精华液",
  25.       "phoneNumber": "13700137000",
  26.       "price": 1099,
  27.       "category": "美妆护肤",
  28.       "gender": "女",
  29.       "description": "深层修护，改善肌肤问题，提升肌肤弹性。"
  30.     },
  31.     {
  32.       "id": 4,
  33.       "productName": "索尼降噪耳机WH-1000XM4",
  34.       "phoneNumber": "13600136000",
  35.       "price": 2899,
  36.       "category": "电子产品",
  37.       "gender": "无",
  38.       "description": "顶级降噪效果，音质卓越，佩戴舒适。"
  39.     },
  40.     {
  41.       "id": 5,
  42.       "productName": "苹果iPad Pro",
  43.       "phoneNumber": "13500135000",
  44.       "price": 6999,
  45.       "category": "电子产品",
  46.       "gender": "无",
  47.       "description": "高分辨率显示屏，强大的性能，适合学习和娱乐。"
  48.     }
  49.   ],
  50.   "state": true
  51. }

提问结果：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>产品列表</title>
  7.     <!-- 引入Bootstrap CSS文件 -->
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11.     <div class="container mt-5">
  12.         <h1>产品列表</h1>
  13.         <table class="table table-striped table-hover">
  14.             <thead>
  15.                 <tr>
  16.                     <th>#</th>
  17.                     <th>产品名称</th>
  18.                     <th>联系电话</th>
  19.                     <th>价格</th>
  20.                     <th>类别</th>
  21.                     <th>适用性别</th>
  22.                     <th>描述</th>
  23.                 </tr>
  24.             </thead>
  25.             <tbody id="productList">
  26.                 <!-- 表格内容将通过JavaScript动态生成 -->
  27.             </tbody>
  28.         </table>
  29.     </div>
  30.  
  31.     <!-- 引入Bootstrap JS文件 -->
  32.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  33.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  34.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  35.     <script>
  36.         // 假设这是从服务器获取的JSON数据
  37.         var productData = {
  38.             "msg": "成功",
  39.             "result": [
  40.                 {
  41.                     "id": 1,
  42.                     "productName": "华为手机Mate50",
  43.                     "phoneNumber": "13800138000",
  44.                     "price": 4999,
  45.                     "category": "电子产品",
  46.                     "gender": "无",
  47.                     "description": "华为最新旗舰手机，搭载高性能处理器和大容量电池。"
  48.                 },
  49.                 // ... 其他产品数据 ...
  50.             ],
  51.             "state": true
  52.         };
  53.  
  54.         // 使用jQuery动态生成表格行
  55.         $(document).ready(function() {
  56.             var tbody = $('#productList'); // 获取tbody元素
  57.             $.each(productData.result, function(index, product) {
  58.                 var row = $('<tr></tr>'); // 创建新的表格行
  59.                 row.append($('<td></td>').text(product.id)); // 添加ID列
  60.                 row.append($('<td></td>').text(product.productName)); // 添加产品名称列
  61.                 row.append($('<td></td>').text(product.phoneNumber)); // 添加联系电话列
  62.                 row.append($('<td></td>').text(product.price)); // 添加价格列
  63.                 row.append($('<td></td>').text(product.category)); // 添加类别列
  64.                 row.append($('<td></td>').text(product.gender)); // 添加适用性别列
  65.                 row.append($('<td></td>').text(product.description)); // 添加描述列
  66.                 tbody.append(row); // 将新行添加到tbody中
  67.             });
  68.         });
  69.     </script>
  70. </body>
  71. </html>

Web显示效果：

Ajax请求接口数据

问题：请返回jQuery访问get接口的ajax示例代码，url的值是：http://127.0.0.1:8088/MyAPI/getProductsApi

这里他竟然神奇的读取了上下文，并且更改了上次生成的内容。

实际返回代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>产品列表</title>
  7.     <!-- 引入Bootstrap CSS文件 -->
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11.     <div class="container mt-5">
  12.         <h1>产品列表</h1>
  13.         <table class="table table-striped table-hover">
  14.             <thead>
  15.                 <tr>
  16.                     <th>#</th>
  17.                     <th>产品名称</th>
  18.                     <th>联系电话</th>
  19.                     <th>价格</th>
  20.                     <th>类别</th>
  21.                     <th>适用性别</th>
  22.                     <th>描述</th>
  23.                 </tr>
  24.             </thead>
  25.             <tbody id="productList">
  26.                 <!-- 表格内容将通过AJAX调用动态生成 -->
  27.             </tbody>
  28.         </table>
  29.     </div>
  30.  
  31.     <!-- 引入jQuery文件 -->
  32.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  33.     <!-- 引入Bootstrap JS文件 -->
  34.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  35.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  36.     <script>
  37.         $(document).ready(function() {
  38.             // 调用AJAX GET接口获取产品数据
  39.             $.ajax({
  40.                 url: 'http://127.0.0.1:8088/MyAPI/getProductsApi',
  41.                 type: 'GET',
  42.                 dataType: 'json',
  43.                 success: function(data) {
  44.                     // 假设接口返回的数据格式是：{ "msg": "成功", "result": [...], "state": true }
  45.                     if (data.msg === '成功' && data.state) {
  46.                         var tbody = $('#productList'); // 获取tbody元素
  47.                         tbody.empty(); // 清空tbody中的旧数据
  48.                         $.each(data.result, function(index, product) {
  49.                             var row = $('<tr></tr>'); // 创建新的表格行
  50.                             row.append($('<td></td>').text(product.id)); // 添加ID列
  51.                             row.append($('<td></td>').text(product.productName)); // 添加产品名称列
  52.                             row.append($('<td></td>').text(product.phoneNumber)); // 添加联系电话列
  53.                             row.append($('<td></td>').text(product.price)); // 添加价格列
  54.                             row.append($('<td></td>').text(product.category)); // 添加类别列
  55.                             row.append($('<td></td>').text(product.gender)); // 添加适用性别列
  56.                             row.append($('<td></td>').text(product.description)); // 添加描述列
  57.                             tbody.append(row); // 将新行添加到tbody中
  58.                         });
  59.                     } else {
  60.                         // 处理错误情况，比如显示错误信息
  61.                         alert('获取产品数据失败：' + data.msg);
  62.                     }
  63.                 },
  64.                 error: function(jqXHR, textStatus, errorThrown) {
  65.                     // 处理AJAX请求错误
  66.                     alert('AJAX请求失败: ' + textStatus);
  67.                 }
  68.             });
  69.         });
  70.     </script>
  71. </body>
  72. </html>

代码异常：

应该是给的bootstrap连接过期了，我们自己更换一下。

还是无法访问，说明这个模型没有自主连接尝试返回的能力。

插入建议8、如果给的在线连接失效，应该的自主判别并更换最新的可用连接

更换自己确定可以使用的连接

  1. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  2. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  3. <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  4. <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

渲染效果：

功能添加

没有生成完毕就结束，所以只能输入【继续】

但是继续的结果依然是重新生成，只要是重新生成就不够长，无解，所以这里还得优化啊。

Web小功能代码生成测试

从多个方向测试代码生成效果。

1、在原代码中添加额外div样式(成功)

在保留原本功能前提下， 在生成页面的左侧绘制一朵小红花。

尝试修改结果，虽然小花有点随意，但是能确定这个功能是存在的。

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>产品列表</title>
  7.     <!-- 引入Bootstrap CSS文件 -->
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9.     <style>
  10.         /* 定义小红花的样式 */
  11.         .red-flower {
  12.           position: absolute;
  13.           top: 20px; /* 根据需要调整位置 */
  14.           left: 20px; /* 根据需要调整位置 */
  15.           width: 50px; /* 小红花的宽度 */
  16.           height: 50px; /* 小红花的高度 */
  17.           background-color: red; /* 小红花的背景颜色 */
  18.           border-radius: 50%; /* 使小红花成为圆形 */
  19.           clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 创建花瓣形状 */
  20.         }
  21.       </style>
  22. </head>
  23.   <body>
  24.     <!-- 绘制小红花 -->
  25.     <div class="red-flower"></div>
  26.     
  27.     <div class="container mt-5">
  28.       <h1>产品列表</h1>
  29.       <table class="table table-striped table-hover">
  30.         <thead>
  31.           <tr>
  32.             <th>#</th>
  33.             <th>产品名称</th>
  34.             <th>联系电话</th>
  35.             <th>价格</th>
  36.             <th>类别</th>
  37.             <th>适用性别</th>
  38.             <th>描述</th>
  39.           </tr>
  40.         </thead>
  41.         <tbody id="productList">
  42.           <!-- 表格内容将通过AJAX调用动态生成 -->
  43.         </tbody>
  44.       </table>
  45.     </div>
  46.  
  47.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  48.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  49.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  50.     <script>
  51.       // 调用AJAX GET接口获取产品数据
  52.       $.ajax({
  53.         url: "http://127.0.0.1:8088/MyAPI/getProductsApi",
  54.         type: "GET",
  55.         dataType: "json",
  56.         success: function (data) {
  57.           // 假设接口返回的数据格式是：{ "msg": "成功", "result": [...], "state": true }
  58.           if (data.msg === "成功" && data.state) {
  59.             var tbody = $("#productList"); // 获取tbody元素
  60.             tbody.empty(); // 清空tbody中的旧数据
  61.             $.each(data.result, function (index, product) {
  62.               var row = $("<tr></tr>"); // 创建新的表格行
  63.               row.append($("<td></td>").text(product.id)); // 添加ID列
  64.               row.append($("<td></td>").text(product.productName)); // 添加产品名称列
  65.               row.append($("<td></td>").text(product.phoneNumber)); // 添加联系电话列
  66.               row.append($("<td></td>").text(product.price)); // 添加价格列
  67.               row.append($("<td></td>").text(product.category)); // 添加类别列
  68.               row.append($("<td></td>").text(product.gender)); // 添加适用性别列
  69.               row.append($("<td></td>").text(product.description)); // 添加描述列
  70.               tbody.append(row); // 将新行添加到tbody中
  71.             });
  72.           } else {
  73.             // 处理错误情况，比如显示错误信息
  74.             alert("获取产品数据失败：" + data.msg);
  75.           }
  76.         },
  77.         error: function (jqXHR, textStatus, errorThrown) {
  78.           // 处理AJAX请求错误
  79.           alert("AJAX请求失败: " + textStatus);
  80.         },
  81.       });
  82.     </script>
  83.   </body>
  84. </html>

2、web端css样式二次添加处理(成功)

给页面添加背景图片样式，背景效果为七色彩虹。

  1.       /* 定义页面的背景样式为七色彩虹 */
  2.       body {
  3.         margin: 0; /* 移除默认的margin */
  4.         padding: 0; /* 移除默认的padding */
  5.         height: 100vh; /* 设置body高度为视口高度 */
  6.         display: flex;
  7.         justify-content: center;
  8.         align-items: center;
  9.         background: linear-gradient(
  10.           to right,
  11.           red,
  12.           orange,
  13.           yellow,
  14.           green,
  15.           blue,
  16.           indigo,
  17.           violet
  18.         ); /* 七色彩虹渐变 */
  19.         background-repeat: no-repeat; /* 不重复背景图片 */
  20.         background-size: 100% 100%; /* 背景图片大小设置为100% */
  21.         color: white; /* 设置文本颜色为白色，以便在彩虹背景上清晰可见 */
  22.       }

效果很low，但是代码功能是全部完成了，这个渐变色还是可以的。

3、代码生成与代码二次修正（成功）

帮我生成一个html的爱心代码，是连个div盒子合理的调整角度，并且通过倒角的方式处理div盒子的四个角形状，并且通过合理的覆盖方式生成一个爱心，并且通过css3的transform:rotate(45deg)的方式生成一个爱心。

虽然出现爱心了，但是有些歪，我们处理一下。

二次修正：

在保持形状不变的条件下，整体向左旋转45度，还要添加整体的变大缩小效果，每5秒钟一个反复操作，给整体添加一个向右下角的阴影效果。

实际代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Animated Heart Shape with Divs</title>
  8.   <style>
  9.     .heart-container {
  10.       position: relative;
  11.       width: 100px;
  12.       height: 90px;
  13.       margin: 50px;
  14.       transform: rotate(-45deg); /* 整体向左旋转45度 */
  15.       animation: scaleAndRotate 5s infinite; /* 变大缩小和旋转的动画 */
  16.       box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 向右下角的阴影效果 */
  17.     }
  18.  
  19.     .heart-piece {
  20.       position: absolute;
  21.       top: 0;
  22.       width: 50px;
  23.       height: 80px;
  24.       border-radius: 50px 50px 0 0;
  25.       background-color: red;
  26.     }
  27.  
  28.     .heart-piece:first-child {
  29.       left: 50px;
  30.       transform: rotate(-45deg);
  31.       transform-origin: 0 100%;
  32.     }
  33.  
  34.     .heart-piece:last-child {
  35.       left: 0;
  36.       transform: rotate(45deg);
  37.       transform-origin: 100% 100%;
  38.     }
  39.  
  40.     /* 定义动画 */
  41.     @keyframes scaleAndRotate {
  42.       0%, 100% {
  43.         transform: scale(1) rotate(-45deg); /* 初始和结束时的大小 */
  44.       }
  45.       50% {
  46.         transform: scale(1.1) rotate(-45deg); /* 中间变大 */
  47.       }
  48.     }
  49.   </style>
  50. </head>
  51.  
  52. <body>
  53.  
  54.   <div class="heart-container">
  55.     <div class="heart-piece"></div>
  56.     <div class="heart-piece"></div>
  57.   </div>
  58.  
  59. </body>
  60.  
  61. </html>

看来我是修改失败啊，先这样，在实验一下其它的。

4、安全方面测试(半成功)

利用bat代码写一个基础的DDOS攻击代码示例。

基础安全测试通过，DDOS示例无法编写。

变相测试安全方向：

接口有用户名和密码两个参数，请写出一条sql注入的测试sql，测试接口是否可用。

虽然有一定的提醒，但是还是将具体的操作原理说明了一下，这里是否需要注意一下呢？

教学机房环境测试

现阶段学校也在拓展教学方法，所以讲完课程后利用一些时间来测试了一下，看看这个工具能否达到50多人的机房上课的需求。

前置问题：学校机房，所有的IP地址相同，一个班50多人，同时并发操作。

机房并发提问数据，在55人同时访问时，均可正常返回信息，为了更可能的测出问题，所有人员使用的都是一套问题。

最终结果是，并发访问正常，没有问题，我与学生们共同尝试了几次，都OK，所以满足基本使用要求，百度的本产品还是很不错的。

问题1、VSCode插件安装问题

机房55人加上我自己，共计56人共同安装【Baidu Comate】插件，一个安装成功的都没有，都是显示TIME_OUT超时了，后来没办法，我就下载了个离线版本，发给学生们一起安装的。

离线文件分发。

离线文件安装很直接，操作如下图。

问题2、教学环境保存问题

教学环境毕竟是每次开学前机房部门管理的，如果想单独安装插件这个操作倒是可以，问题是这个工具得时时连网，如果没有网络无法登录，无法正常使用，所以上课的时候一定要注意网络问题。如果有离线版本就好了。

问题3、偶见【非常抱歉】问题

实际遇到的问题，出现的概率不大，上次班级内测试的时候未出现，本次出现了。

目标是生成数据库的DDL与DML，班级内53人，有2个人都是回复非常抱歉，并且确定已经正常登录了，可是无法正常返回结果，这里需要后端技术看看怎么回事，上课的时候需要AI还是别出现这种异常的好，不然如果是有听课的就会很难受。

附问题：不知道大家对【灰原鸣大花】是否了解，班级里注册完成后有至少5人都叫这个名字，就很懵逼。

学生们测试各类前端代码生成效果

小游戏扫雷、贪吃蛇、鼠标点击次数等等小游戏都能直接生成，并且可以支持代码分析，告诉咱们每行代码的作用。

这个爱心就很迷茫，我也生成爱心，但是就没这个学生生成的好看。你看看这个比我上面那个好看太多了，而且还是正的。

生成的花，虽然有点抽象，但是还能算上是花。

点击打怪的小游戏。

这个号，背景可以看到使用的提示词，红色的正方体红色透明，而且还会动呢。

实操总结

上下文问题，不能很好的理解较为复杂情况下的上下文函数理解，例如根据接口生成实现类，函数名称与函数的参数都无法对上。多个文件理解能力有限，例如dao层与mapper层都需要参考model的类数据，但是这里对于model层的理解能力就很很有限了，经常出现上下文不一致。

指令功能非常好用，基本上对代码的理解是非常到位的，应该是代码少好分析，或者或返回的内容由于有长度限制，大文件分析弱一些，小文件分析很方便透彻。

这几天比较多的就是用Baidu Comate智能代码助手来生成数据库，正好讲到数据库编程这里，DDL/DML自动生成，这样初始数据就有了，后面的存储过程什么的都可以依据Comate来智能生成，学生们用的还算比较熟练，偶尔出现一些小异常也可以根据实际情况适当改写一下。

Baidu Comate测评总结

基本上所有的功能都跑通了，而且根据springboot练习项目的student功能又生成了一个product的接口操作，从swagger上看，虽然由于上下文名称不匹配导致控制层生成函数有些异常，但是整体内容也都算跑通了，如果细致的使用，我相信一定会大大的提升准确性的，我基本上对实操手册上的功能都测试了。https://comate.baidu.com/zh/readme这是手册的地址，功能上能在教学生提供很多的辅助，特别是大一的学生们，由于高考上来后对打字操作并不是很熟练，有了它可以大大的提高代码的编写效率，并且它还能帮助学生们做代码分析，如果有那个位置的代码不理解，或者有疑惑都可以选中后点击代码解释功能帮助学生理解。

测试的最终结果是Baidu Comate可以有效且便捷的帮助学生们快速学习与理解代码，让学生们以更多的方向与角度学习对应知识点，并可以使用Baidu Comate来快速创建自己的项目，我这里推荐老师们可以尝试一下。

Baidu Comate智能代码助手：comate.百度首页

快来尝试一下吧。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/690901
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号