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 复制代码
<?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相关依赖:

xml 复制代码
<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、添加启动类

java 复制代码
@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:

java 复制代码
@Data
public class GenPoemInput implements Serializable {

    private String inputName;
    private String inputStyle;

    public String getPrompt(){
        return "用"" + getInputName() + ""写一首藏头诗,要求风格" + getInputStyle() + ",诗词为七言诗";
    }
}

接着编写controller类:

java 复制代码
@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

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

bash 复制代码
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%。大家细品~

相关推荐
凌览3 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
G.E.N.4 分钟前
开源!RAG竞技场(2):标准RAG算法
大数据·人工智能·深度学习·神经网络·算法·llm·rag
西西弗Sisyphus13 分钟前
如果让计算机理解人类语言- Word2Vec(Word to Vector,2013)
人工智能·word·word2vec
这里有鱼汤14 分钟前
给你的DeepSeek装上实时行情,让他帮你炒股
后端·python·mcp
咖啡啡不加糖17 分钟前
暴力破解漏洞与命令执行漏洞
java·后端·web安全
风象南20 分钟前
SpringBoot敏感配置项加密与解密实战
java·spring boot·后端
前端双越老师37 分钟前
30 行代码 langChain.js 开发你的第一个 Agent
人工智能·node.js·agent
ん贤38 分钟前
RESTful风格
后端·go·restful
Humbunklung40 分钟前
Rust方法语法:赋予结构体行为的力量
开发语言·后端·rust
萧曵 丶1 小时前
Rust 内存结构:深入解析
开发语言·后端·rust