3. 实战（一）：Spring AI & Trae ，助力开发微信小程序

1、前言

前面介绍了Spring boot快速集成Spring AI实现简单的Chat聊天模式。今天立马来实战一番，通过Trae这个火爆全网的工具，来写一个微信小程序。照理说，我们只是极少量的编码应该就可以完成这项工作。开撸~

2、需求描述

微信小程序实现一个页面，页面上输入一个姓名，点击生成就可以生成对应的藏头诗，并可以根据指定的风格生成。手绘了下页面整体布局：

3、环境准备

• IntelliJ IDEA 2024.3
• 微信开发工具
• 硅基流动API，这里需要提前注册申请
• Trae AI

  4、快速开始

  4.1、后端服务（Spring Boot + Spring AI）

  由于我这里有线程的后端框架，因此我这里就不使用Trae来帮我生成了。

  4.1.1、搭建Spring Boot工程

  新建一个项目，添加Spring boot相关依赖，这里我就不赘述了。直接贴出pom.xml：

  
      4.0.0
      
          org.springframework.boot
          spring-boot-starter-parent
          3.4.2
           
      
      top.shamee
      chai-said-cloud
      0.0.1-SNAPSHOT
      pom
      
          21
      
      
          
              org.projectlombok
              lombok
          
          
              org.springframework.boot
              spring-boot-starter
          
          
              org.springframework.boot
              spring-boot-starter-test
              test
          
          
              org.springframework.boot
              spring-boot-starter-web
          
          
          
              org.springframework.boot
              spring-boot-devtools
              runtime
          
          
          
              com.mysql
              mysql-connector-j
          
          
              com.baomidou
              mybatis-plus-boot-starter
              
                  
                      mybatis-spring
                      org.mybatis
                  
              
          
          
              org.mybatis
              mybatis-spring
              3.0.3
          
          
              com.baomidou
              dynamic-datasource-spring-boot-starter
          
          
              com.alibaba
              druid-spring-boot-starter
          
      
      
          
              
                  org.projectlombok
                  lombok
                  1.18.36
              
              
                  com.mysql
                  mysql-connector-j
                  8.0.33
              
              
                  com.baomidou
                  mybatis-plus-boot-starter
                  3.5.5
              
              
                  com.baomidou
                  dynamic-datasource-spring-boot-starter
                  3.6.1
              
              
                  com.alibaba
                  druid-spring-boot-starter
                  1.2.11
              
          
      
      
          
              
                  src/main/java
                  
                      **/*.xml
                  
                  true
              
              
                  src/main/resources
                  
                      **/*.properties
                      **/*.xml
                      **/*.yml
                  
                  false
              
          
          
              
                  org.springframework.boot
                  spring-boot-maven-plugin
                  
                      top.shamee.chailauncher.ChaiLauncherApplication     
                      execute    
                  
                  
                      
                          
                              repackage
                              build-info
                          
                      
                  
              
          
      
  
  

  因为我这里集成了MySQL，以及做了多模块。因此我这里的pom稍微复杂了一些，大家可以按需裁剪。

  4.1.2、集成Spring AI

  注意这里Spring Boot版本必须选用3.2以上的版本，这里使用3.4.2，同时使用JDK21。这里添加Spring AI相关依赖：

      org.springframework.ai
      spring-ai-openai-spring-boot-starter
  
  
      org.springframework.ai
      spring-ai-spring-boot-autoconfigure
  
  
      
          
              org.springframework.ai
              spring-ai-bom
              1.0.0-SNAPSHOT
              pom
              import
          
      
  
  

  4.1.3、添加启动类

  @Slf4j
  //@MapperScan("top.shamee")
  @SpringBootApplication(scanBasePackages = {"top.shamee"})
  public class ChaiLauncherApplication {
      public static void main(String[] args) {
          ConfigurableApplicationContext context = SpringApplication.run(ChaiLauncherApplication.class);
          ConfigurableEnvironment environment = context.getEnvironment();
          log.info("""
                          
                          ---------------------------------------------------------- 
                          应用 '{}' 运行成功! 当前环境 '{}' !!! 端口 '[{}]' !!!
                          ----------------------------------------------------------
                   """,
                  environment.getProperty("spring.application.name"),
                  environment.getActiveProfiles(),
                  environment.getProperty("server.port"));
      }
  }
  

  到此，项目基本搭建完毕。

  4.1.4、编写Spring AI相关接口

  由于这里要实现的是一个输入用户姓名，通过OpenAI接口生成藏头诗的功能。因此接口入口参数为：inputName（姓名）和inputStype（生成风格），返回生成的内容。

  首先定义参数input：

  @Data
  public class GenPoemInput implements Serializable {
      private String inputName;
      private String inputStyle;
      public String getPrompt(){
          return "用“" + getInputName() + "”写一首藏头诗，要求风格" + getInputStyle() + "，诗词为七言诗";
      }
  }
  

  接着编写controller类：

  @Slf4j
  @RestController
  @RequestMapping("/chai/gen-record")
  public class GenRecordController {
      private final ChatClient chatClient;
      public GenRecordController(ChatClient.Builder chatClientBuilder) {
          this.chatClient = chatClientBuilder.build();
      }
      @Resource
      private GenRecordService genRecordService;
      @PostMapping("/openai")
      ResponseEntity openai(@RequestBody GenPoemInput genPoemInput) {
          log.info("请求参数: {}", genPoemInput);
          String result = this.chatClient.prompt(new Prompt())
                  .user(genPoemInput.getPrompt())
                  .call()
                  .content();
          return ResponseEntity.ok(result);
      }
  }
  

  application.properties需要配置我们的OpenAi相关API KEY：

  

  配置属性：

  • spring.ai.openai.chat.options.model为配置的大模型
  • spring.ai.openai.chat.base-url为大模型的请求url，默认为openai.com
  • spring.ai.openai.chat.api-key为大模型对应的api key

    最后启动工程类，请求下接口看下是否正常：

    curl -i -X POST \
       -H "Content-Type:application/json" \
       -d \
    '{
      "inputName":"秦始皇",
      "inputStype": "幽默"
    }' \
     'http://localhost:8080/chai/gen-record/openai'
    

    生成内容，成功：

    

    4.2、前端开发（微信小程序 + Trae）

    小程序代码，这里我们使用Trae来实现。我们给Trae一个提示词：

    1. 你是一个经验丰富的微信小程序UI工程师，熟悉微信的UI设计，设计风格简约明朗
    2. 你将负责设计微信小程序的UI
    3. 我会给你一个设计图，你需要解析这个图片，并设计生成一个小程序，实现这个页面功能。

    并将我们手绘的prd传给他：

    

    接着就是静静的等待了：

    

    很快他就生成好了我们所需要的代码，点击全部接受，调整到我们的代码结构中。生成的代码结构还是符合微信小程序的代码结构的：

    

    直接打开微信开发工具，就可以直接预览到我们的页面。剩下的就是中间不断地让Trae按照我们地要求进行细化地调整。最终的效果：

    

    4.3、程序部署

    前后端代码都就绪后，接下来就是部署了。由于小程序需要https请求，且域名需要经过严格的ICP备案，才可以正常使用。这里消耗了些时间，SSL都可以免费搞定，ICP备案比较耗时，需要走流程。

    当然我们开发本地可以不校验https域名，可以在开发工具上先体验：

    

    试下效果看看：

    

    效果还是很不错，样式，JS代码都帮直接帮我们搞定。真的很香！！！

    5、总结

    到此，基本程序编码时间不到1小时就可以完全搞定，主要耗费时间的就是在不断的AI调整上。当然可能前面给的提示词比较粗糙也有关系，大家可以认真的给到一段提示信息，应该就不需要花过多时间去调整细化。

    代码我还未上传到Github，大家有需要可以私聊我，或者等我有空我上传到Github：https://github.com/Shamee99

    真正经验的是，我只是简单手绘了一个PRD草稿，Trae就可以代替我写出相关代码，而且还原度接近90%。大家细品~