--- theme: vuepress highlight: atom-one-dark --- # 暴富技巧比特鹰作为国内领先的 AI+Web3 领域企业，团队充满年轻活力 ——95% 成员为 00 后，不仅技术氛围浓厚，还会为每位成员量身定制成长规划；在职业发展层面，公司前景广阔，提供餐饮补贴、租房补贴、年底奖金、股票期权及额外假期等多重福利，助力员工在 35 岁前实现财富自由目前公司正招聘海外运营、前端、后端、智能合约、AI 开发、HR 等岗位，有意向者可私信联系 # 前言最近在做一个项目,项目里面有个AI聊天模块,然后我在网上查了一些文章，没有我想要手把手从头到尾教的文章，所以现在我把我学到的分享给同学们🤓,在本篇本章中你可以学到如何使用`SpringAI`调用大模型以及添加记忆上下文,以及`Vue`的自定义指令和组合式函数,还有`SSE`消息实时推送,实现打字机效果最后我们会实现这样一个案例： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/39fc2db0cb514bca8aca97e319e1a6ca~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=71lhx9lEtoTKIQFWMXdLw20ctIU%3D) # 准备本案例后端使用`Java JDK 17`,`Spring AI` 前端使用`Vue3`、`AntDesignVue` `API-Key`用的是智谱免费的`AI`大模型`GLM-4-Flash`你也可以替换成自己需要的 # Spring AI的基本使用 ### 介绍 `SpringAI`是`Spring`框架的一个扩展，用于方便开发者集成`AI`调用`AI`接口，有点像`Langchain`这种人工智能框架，`SpringAI`是基于`Java`语言的框架，对`Java`开发者更友好，类似还有`Langchain4j`，`Langchain4j`是`Langchain`的`Java`版本 ### 新建项目我们新建一个`SpringBoot`项目初始`pom.xml`文件内容如下： ```xml 4.0.0 org.springframework.boot spring-boot-starter-parent 3.3.5 com.ai code 0.0.1-SNAPSHOT code code 17

1.0.0-SNAPSHOT

org.springframework.boot spring-boot-starter-web org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok ``` 运行`mvn install`之后再在`dependencies`标签同级下添加如下内容注意是`**dependencies**`： ```xml spring-milestones Spring Milestones https://repo.spring.io/milestone false spring-snapshots Spring Snapshots https://repo.spring.io/snapshot false ``` 之后再运行`mvn install`，为什么要这样子一个一个添加呢？因为不这样运行`mvn install`就会报错 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/24a789f5821b464aa926aa764e273f99~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=NsqlBb4V77gbVcGqivY2RrUOXHc%3D) 后面再添加`srping-ai`和 `spring-ai-zhipuai`的依赖，在`dependencies`下添加: ```xml org.springframework.ai spring-ai-openai-spring-boot-starter org.springframework.ai spring-ai-zhipuai-spring-boot-starter org.springframework.ai spring-ai-openai 1.0.0-SNAPSHOT ``` 在`dependencies`同级添加： ```xml org.springframework.ai spring-ai-bom ${spring-ai.version} pom import ``` 运行`mvn install`进行安装 ### 添加配置我们将`application`文件改为`application.yml`添加以下配置： ```yaml server: port: 8080 spring: ai: openai: api-key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx # 这里替换为你的api-key base-url: https://open.bigmodel.cn/api/paas/ zhipuai: # 智谱ai的配置 api-key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx # 这里替换为你的api-key base-url: https://open.bigmodel.cn/api/paas/ # 这里是你调用ai的路径这里使用的是智谱的 chat: enabled: true options: model: GLM-4-FLASH # 模型这里使用的是智谱的免费模型 ``` 我们[点击进入智谱官网](https://open.bigmodel.cn/)注册一个账号，然后获取一下`api-key`，添加到配置文件上 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/98d3679a2bff4fb992424164bc6036c1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=ylUR%2BbUN%2FQ51EIu8IjADidXs62U%3D) 之后我们新建一个`Controller`，内容如下： ```java package com.ai.code; import lombok.RequiredArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.ai.chat.model.ChatResponse; import org.springframework.ai.chat.prompt.Prompt; import org.springframework.ai.zhipuai.ZhiPuAiChatModel; import org.springframework.ai.zhipuai.ZhiPuAiChatOptions; import org.springframework.ai.zhipuai.api.ZhiPuAiApi; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/ai") @Slf4j @RequiredArgsConstructor public class AIController { private final ZhiPuAiChatModel chatModel; @GetMapping("/message") public String getAIMessage(String message) { // 直接使用call调用 return chatModel.call(message); } } ``` 运行项目，我们访问：然后我们就获取到下面的内容![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e7fe598669744e879c3bed1214530097~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=EpLGVpZDisRM%2FcInH0htp237enU%3D) 如果我们想要stream流式返回呢？几个字几个字那样打印出来，我们在`controller`中添加如下代码 ```java @GetMapping(value = "/message/stream", params = "message", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux getZhiPuAIMessage(@RequestParam String message) { // 流式返回 return chatModel.stream(message); } ``` 然后我们打开链接 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3d1ab90ff9fa45e09a40a944a48a969b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=jT7LCXcJfsEEAXXsdo49av2ezRU%3D) 格式到时候我们处理一下就好了，好了到这你们应该就知道如何使用`SpringAI`调用`AI`大模型了吧？挺简单的，这只是基本使用,接下来我们来做案例 # 后端实现 ### 1.新建项目我们新建一个`SpringBoot`项目并添加`spring-ai`和`spring-ai-zhipu`的依赖，跟上面介绍`SrpingAI`时一样同学们复制过来就可以了,配置也是一样的 ### 2.新建Controller ```java import lombok.RequiredArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.ai.chat.client.ChatClient; import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor; import org.springframework.ai.chat.memory.ChatMemory; import org.springframework.ai.chat.memory.InMemoryChatMemory; import org.springframework.ai.chat.messages.AssistantMessage; import org.springframework.ai.chat.messages.Message; import org.springframework.ai.chat.messages.SystemMessage; import org.springframework.ai.chat.messages.UserMessage; import org.springframework.ai.chat.model.Generation; import org.springframework.ai.chat.prompt.Prompt; import org.springframework.ai.zhipuai.ZhiPuAiChatModel; import org.springframework.ai.zhipuai.ZhiPuAiChatOptions; import org.springframework.ai.zhipuai.api.ZhiPuAiApi; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.http.codec.ServerSentEvent; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import reactor.core.publisher.Flux; import java.util.ArrayList; import java.util.List; import java.util.Objects; import java.util.stream.Stream; @RestController @RequestMapping("/ai") @Slf4j @RequiredArgsConstructor public class ChatController { private final ZhiPuAiChatModel chatModel; // 基于内存的聊天记忆 private final ChatMemory chatMemory = new InMemoryChatMemory(); @GetMapping(value = "/chat", params = "question", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux> getZhiPuAIMessage(String question,String sessionId) { // 使用InMemoryChatMemory进行内存存储记忆 sessionId根据id找对应的记录,只需要最近30条 MessageChatMemoryAdvisor messageChatMemoryAdvisor = new MessageChatMemoryAdvisor(chatMemory, sessionId, 30); return ChatClient.create(chatModel).prompt().user(question) .advisors(messageChatMemoryAdvisor) // 查找记录一起发送给大模型 .stream().content().map( chatResponse -> ServerSentEvent.builder(chatResponse).event("message").build()); } } ``` 重新启动一下，访问一下如果有数据则是成功 # 前端实现 ### 1.新建项目打开控制台输入`pnpm create vue@latest` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4d0da0d8fdb14fd195791ce7a1feac68~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=BR%2FCCKXuwNlwsr9jM%2FXIQuXF0wQ%3D) 创建一个最简单的`TypeScript`项目使用`cd chat-demo`切换到该项目，然后使用`pnpm i`安装依赖，使用`code .`命名使用`VSCode`打开该项目使用`pnpm dev`运行项目 ### 2.安装Ant-Design-Vue 我们安装一下`ant-design-vue`还有`@ant-design/icons-vue`和`unplugin-vue-components` ```bash pnpm add ant-design-vue@4.x pnpm add @ant-design/icons-vue ``` ### 3.聊天页面基本样式 `App.vue`代码 ```vue ``` 我们运行,就会得到这个页面,测试一下 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/43bd330bace746d8883c5e3ece39dd17~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=gAKxWjgGmxdlEcJ5tf2DnhU%2F1yA%3D) ### 4.请求后端API 如果我们要实现打字机的效果,我们就要使用`Server-Sent Events(SSE)协议`它提供了一种从服务器单向推送消息到客户端的机制。这使得服务器能够在有新的数据可用时，自动将数据发送给客户端，而不需要客户端不断地发起请求来获取更新。从而实现打字机效果我们先安装需要用到的依赖 ```bash pnpm add @microsoft/fetch-event-source ``` 相较于`EventSource API`,`@microsoft/fetch-event-source`更有优势自带的`EventSource`有许多局限: 1. 不能传递请求体`body` 2. 不能传递自定义请求头 3. 只能发送`GET`请求方式,无法指定其它方法 4. 如果连接被切断,无法进行重试接着我们在代码中使用 ```javascript /**会话id*/ const sessionId = useId() // 发送信息 const sendChatMessage = () => { const inputContent = userInputContent.value.trim(); if (!inputContent) return messageApi.error('请输入要发送的消息'); // 加载状态 isLoading.value = true; // 添加用户消息 addChatMessage('human', inputContent); userInputContent.value = ''; setTimeout(async () => { // 添加ai消息 addChatMessage('system', '你好，请问有什么需要帮助的？'); // 请求获取ai回复数据 await fetchChatAIData(inputContent) isLoading.value = false; }, 2000); }; /** * 获取ai消息数据 * @param question 问题 */ const fetchChatAIData = async (question: string) => { await fetchEventSource(`http://localhost:8080/ai/chat?question=${question}&sessionId=${sessionId}`, { headers: { "Content-Type": "application/json" // 设置请求头 }, // 监听消息 onmessage(event) { console.log(event); }, // 关闭 onclose() { console.log("连接关闭"); }, // 错误 onerror(err) { console.log('连接错误'); ctrl.abort() }, // 控制请求取消的信号 signal: ctrl.signal }) } ``` 我们运行项目看看,我们发送一条消息试试![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d07606c292146e7aaf6451065de38c2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=kqmO7T2lAyBfF5%2B7VLubqOZEVXc%3D) 结果发生了跨域的错误那我们在`SpringBoot`项目中配置一下跨域,添加`WebMvcConfig`的配置 ```java import lombok.RequiredArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration @RequiredArgsConstructor @Slf4j public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { // 添加映射路径，允许所有路径跨域 registry.addMapping("/**") // 允许所有来源跨域 .allowedOriginPatterns("*") // 允许所有请求方法跨域 .allowedMethods("*") // 允许所有请求头跨域 .allowedHeaders("*") // 是否允许携带凭证（cookies） .allowCredentials(true); } } ``` 我们重启,再看一下前端项目 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2206180e06ef49a59c0e7e9bd9c98920~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=N6sum8aHo%2BsyJEqDpPrd4myh1jU%3D) 如我所愿返回了数据 ### 5.处理渲染数据那我们处理一下吧数据渲染到页面上，因为我们要实现的是打字机的效果，所以不能直接使用`addMessage`添加消息，我们先写一个占位符显示后端返回的`stream`数据流先写一个消息占位符 ```javascript /**占位符 */ const messagePlaceholder = ref('') ``` 接着我们`fetchChatAIData`这个方法里，将接收到的消息拼接占位符 ```javascript const fetchChatAIData = async (question: string) => { await fetchEventSource(`http://localhost:8080/ai/chat?question=${question}`, { // ... // 监听消息 onmessage(event) { console.log(event); // 拼接占位符 messagePlaceholder.value += event.data }, // ... }) } ``` 然后我们加到信息列表的加载动画前面 ```html

``` 为了测试方便我将`sendMessage`发送消息的方法改成了这样 ```javascript const sendChatMessage = async () => { const inputContent = userInputContent.value.trim(); if (!inputContent) return messageApi.error('请输入要发送的消息'); // 加载状态 isLoading.value = true; // 添加用户消息 addChatMessage('human', inputContent); userInputContent.value = ''; // 添加ai消息 // addChatMessage('system', '你好，请问有什么需要帮助的？'); // 请求获取ai回复数据 await fetchChatAIData(inputContent) // isLoading.value = false; }; ``` 接着我们点击进入测试看一下（记得启动后端） ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b384697f9e0d4f4597ff997835a7e0fa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=aSLC8u8R44aLIjna9F7M4cus900%3D) 嗯是我想要的效果,然后接下来我们添加到消息列表上 ```javascript const fetchChatAIData = async (question: string) => { await fetchEventSource(`http://localhost:8080/ai/chat?question=${question}`, { headers: { "Content-Type": "application/json" // 设置请求头 }, // 监听消息 onmessage(event) { console.log(event); messagePlaceholder.value += event.data }, // 关闭 onclose() { console.log("连接关闭"); //添加消息到消息列表上 addChatMessage('system', messagePlaceholder.value); // 清空占位符 messagePlaceholder.value = '' isLoading.value = false; }, // 错误 onerror(err) { console.log('连接错误'); ctrl.abort() isLoading.value = false; }, // 控制请求取消的信号 signal: ctrl.signal }) } ``` 我们看看效果 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/abeb6c89aa7f4c81bd1f5d7f4d68fcbe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=ZxOJRCnFfDwezi5f09KSGP4hj3Y%3D) 是我想要的呢😉,不过有个问题,就是超出聊天框时不会自动滚动到底部![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3dac8fa7225140119ee2967b371aefae~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=qyO0IbqUVxImhPkT1u8FXEiVaRw%3D) 那我们做一下这部分的逻辑吧，在添加消息和接收消息那里添加一行代码就可以 ```javascript // 发送信息 const sendChatMessage = async () => { // ... // 添加用户消息 addChatMessage('human', inputContent); // 滚动到最后一个元素 messageListRef.value?.lastElementChild?.scrollIntoView(false) // ... }; const fetchChatAIData = async (question: string) => { await fetchEventSource(`http://localhost:8080/ai/chat?question=${question}`, { // ... // 监听消息 onmessage(event) { console.log(event); messagePlaceholder.value += event.data // 滚动到最后一个元素 messageListRef.value?.lastElementChild?.scrollIntoView(false) }, // ... }) } ``` 不过渲染的格式不对，返回的是`markdown`格式的，所以我们要使用`markdown`渲染，我们安装一下`md-editor-v3`用来渲染`markdown` ```bash pnpm add md-editor-v3 ``` 我们导入使用 ```javascript import { MdPreview } from 'md-editor-v3'; import 'md-editor-v3/lib/preview.css'; ``` 渲染 ```html

``` 在监听消息那里修改一下 ```javascript // 监听消息 onmessage(event) { // 在一次或多次出现# 后面添加一个空格 messagePlaceholder.value += event.data.replace(/#+/g, event.data + " ") // 滚动到最后一个元素 messageListRef.value?.lastElementChild?.scrollIntoView(false) }, ``` 测试一下 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f9dbc70a315c40af8709caac561cc404~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=BhCBlaweo00btSEB%2BrATgzNMtBI%3D) 不错可以了，但是还是有些问题 ### 6.优化现在页面有点乱我们优化一下 #### 封装自动滚动指令我们封装一个自动滚动指令，只要有消息发送就自动滚动到聊天框底部，可以多次复用，只要用到的地方就加一个`v-auto-scroll`就可以，不了解`Vue3`的自定义指令可以[点击进入官方文档进行了解](https://cn.vuejs.org/guide/reusability/custom-directives) 我们新建一个`directive.ts`文件 ```typescript import type { Directive } from "vue"; /** * 自动滚动指令 */ export const autoScrollDirective: Directive = { // 在绑定元素的父组件 // 及他自己的所有子节点都更新后调用 updated(el: HTMLElement, binding) { if (!binding.arg) throw Error("请传入arg参数") // 获取arg参数执行对应操作方便后续扩展 switch (binding.arg) { case 'bottom': // 判断是否能滚动 if (!isVerticalScrollable) throw Error('该元素不能纵向滚动请设置style') if (!el.lastElementChild) return // 滚动到最后一个元素 el.lastElementChild.scrollIntoView(false) break default: throw Error("当前该指令仅支持 bottom") } } } ``` `arg`参数是`v-auto-scroll:bottom`中的`bottom` 其中`isVerticalScrollable`是一个检查元素是否能纵向滚动的工具函数 ```typescript /** * 检查当前元素是否可纵向滚动 * @param element 检查的元素 * @returns */ export const isVerticalScrollable = (element: HTMLElement) => { const style = window.getComputedStyle(element); return ( style.overflow === 'scroll' || style.overflow === 'auto' || style.overflowY === 'auto' || style.overflowY === 'scroll' ) } ``` 我们在`main.ts`中注册全局指令 ```typescript const app = createApp(App) // 注册全局指令 app.directive("auto-scroll", autoScrollDirective) app.mount('#app') ``` 注册全局指令一定要在`app`挂在之前注册，要不然会报错的我们在模板中使用 ```html

``` 然后把添加消息之后滚动的代码删掉 ```typescript messageListRef.value?.lastElementChild?.scrollIntoView(false) ``` 测试一下，可以的，这样就少了两行代码了，这样做的好处就是将来要在其他地方使用的使用，添加以下`v-auto-scroll`指令就可以了，比如聊天室页面，还学到了`Vue3`的自定义指令 #### 封装请求fetchChatAIData 我们封装`fetchChatAIData`组合式函数，新建一个`useFetchChatAIData.ts`组合式函数，代码如下： ```typescript import { fetchEventSource } from "@microsoft/fetch-event-source" import { ref, useId } from "vue" /** * 抓取聊天ai消息 * @returns */ export const useFetchChatAIData = () => { /** 消息加载状态 */ const isLoading = ref(false) /** 返回的数据 */ const value = ref('') const ctrl = new AbortController() /** 会话id */ const sessionId = useId() /** 获取函数 */ const fetchChatAIData = async (message: string | number) => { try { isLoading.value = true await fetchEventSource(`http://localhost:8080/ai/chat?question=${message}&sessionId=${sessionId}`, { headers: { "Content-Type": "application/json" }, onmessage(event) { console.log("message:" + event.data); value.value = event.data.replace(/#+/g, event.data + " ") }, onclose() { console.log("连接关闭"); }, onerror(err) { ctrl.abort() }, signal: ctrl.signal }) } catch (error) { throw Error('获取信息失败:' + error) } finally { isLoading.value = false } } return { value, isLoading, fetchChatAIData } } ``` `isLoading`是消息的加载状态，`value`是请求的返回消息，`fetchChatAIData`是请求数据的方法我们在`App.vue`中使用 ```typescript const { fetchChatAIData, value, isLoading } = useFetchChatAIData() ``` 然后将`App.vue`的`fetchChatAIData`和`isLoading`删了，我们将`onSendMessage`的代码修改： ```typescript /**发送信息 */ const sendChatMessage = async () => { const inputContent = userInputContent.value.trim(); if (!inputContent) return messageApi.error('请输入要发送的消息'); // 添加用户消息 addChatMessage('human', inputContent); // 清空用户输入框 userInputContent.value = ''; // 请求获取ai回复数据 await fetchChatAIData(inputContent) // 请求完毕之后追加到消息列表 addChatMessage('system', messagePlaceholder.value) // 清空占位符 messagePlaceholder.value = '' }; ``` 我们添加一个事件监 ```typescript // 监听消息变化修改占位符的值 watch(value, value => { messagePlaceholder.value = value }) ``` 如果返回的消息发生了变化就修改占位符的值![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9bccf430995b4813896478a0a5850e7c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPUV9kcmVhbQ==:q75.awebp?rk3s=f64ab15b&x-expires=1757903012&x-signature=NqhvTtbhc7dJJCUhTYsxZAL5mLE%3D) 结果也是可以的，我们又学习了如何封装一个组合式函数，在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。有点像`React`的`Hook` 这样我们实现了一个`Web`端的聊天`AI`了 # 总结总结一下吧 * 在本文章中我们实现了一个网页`AI`聊天机器人 * 学习了如何使用`SpringAI`调用大模型，基于内存的存储上下文记忆 * 学习了前端如何使用`SSE`接收后端返回的`stream`流实现打字机效果 * 学习了使用`md-editor-v3`渲染`markdown`格式的数据 * 学习了`Vue`的自定义指令 * 学习了如何封装组合式函数如果有问题可以在评论区分享一下