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：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>top.shamee</groupId>
    <artifactId>chai-said-cloud</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>

    <properties>
        <java.version>21</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- Spring Boot DevTools (Optional for auto-reloading during development) -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <exclusions>
                <exclusion>
                    <artifactId>mybatis-spring</artifactId>
                    <groupId>org.mybatis</groupId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>3.0.3</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>dynamic-datasource-spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
        </dependency>

    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.18.36</version>
            </dependency>

            <dependency>
                <groupId>com.mysql</groupId>
                <artifactId>mysql-connector-j</artifactId>
                <version>8.0.33</version>
            </dependency>

            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.5.5</version>
            </dependency>

            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>dynamic-datasource-spring-boot-starter</artifactId>
                <version>3.6.1</version>
            </dependency>

            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>1.2.11</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>true</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                    <include>**/*.yml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <mainClass>top.shamee.chailauncher.ChaiLauncherApplication</mainClass>     <!-- 取消查找本项目下的Main方法：为了解决Unable to find main class的问题 -->
                    <classifier>execute</classifier>    <!-- 为了解决依赖模块找不到此模块中的类或属性 -->
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                            <goal>build-info</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

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

4.1.2、集成Spring AI

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

<dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-spring-boot-autoconfigure</artifactId>
</dependency>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.ai</groupId>
            <artifactId>spring-ai-bom</artifactId>
            <version>1.0.0-SNAPSHOT</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

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<String> 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：github.com/Shamee99

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