当前位置：首页 > wzjs >正文

企业官网建站步骤做网站为什么要服务器

wzjs 2025/9/15 4:05:05

企业官网建站步骤,做网站为什么要服务器,网络广告推广实施计划,百度指数数据来源1、前言前面介绍了Spring boot快速集成Spring AI实现简单的Chat聊天模式。今天立马来实战一番，通过Trae这个火爆全网的工具，来写一个微信小程序。照理说，我们只是极少量的编码应该就可以完成这项工作。开撸~ 2、需求描述微信小程序实现一…

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();}@Resourceprivate 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一个提示词：

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

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

接着就是静静的等待了：

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

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

4.3、程序部署

前后端代码都就绪后，接下来就是部署了。由于小程序需要https请求，且域名需要经过严格的ICP备案，才可以正常使用。这里消耗了些时间，SSL都可以免费搞定，ICP备案比较耗时，需要走流程。
当然我们开发本地可以不校验https域名，可以在开发工具上先体验：

试下效果看看：

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

5、总结

到此，基本程序编码时间不到1小时就可以完全搞定，主要耗费时间的就是在不断的AI调整上。当然可能前面给的提示词比较粗糙也有关系，大家可以认真的给到一段提示信息，应该就不需要花过多时间去调整细化。
代码我还未上传到Github，大家有需要可以私聊我，或者等我有空我上传到Github：https://github.com/Shamee99
真正经验的是，我只是简单手绘了一个PRD草稿，Trae就可以代替我写出相关代码，而且还原度接近90%。大家细品~