宝子们，今天咱就来搞超酷的 Spring AI，这波操作绝对能让你瞬间爱到不行，直接上头！
一、环境要求
1. jdk 要跟上潮流
咱得用 jdk21+，老版本可不行哦，新的才够劲！
2. Maven 引入依赖
在 Maven 里加上这个依赖：
<dependency> <groupId>io.springboot.ai</groupId> <artifactId>spring-ai-ollama-spring-boot-starter</artifactId> <version>1.0.3</version> </dependency> |
这就好比给你的项目穿上了超级无敌装备，战斗力直接原地起飞，杠杠的！
3. 启动（yml）文件配置
在 Yml 文件里这么设置：
spring: ai: ollama: base-url: http://127.0.0.1:11434 chat: options: model: deepseek-r1:7b |
这一步就像是给你的 AI 小伙伴设定 “家的地址” 和 “思考模式”，超级重要哒，可千万别弄错咯！马上我们本地部署的deepseek就要炫起来了
二、后端实现
流式响应，代码来咯：
@Value("${spring.ai.ollama.chat.options.model}") private String ollamamodel; /** * 流式对话 */ @ApiOperation(value = "流式对话", notes = "流式对话") @RequestMapping(value = "/streamChatV3", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public Flux<ChatResponse> streamChatV3(@RequestBody(required = false) String jsonstr) { JSONObject jsonObj = JSON.parseObject(jsonstr, JSONObject.class); String askquestion = jsonObj.getString("askquestion"); try { askquestion = java.net.URLDecoder.decode(askquestion, StandardCharsets.UTF_8); } catch (Exception ignored) { } Prompt prompt = new Prompt( askquestion, OllamaOptions.create() .withModel(this.ollamamodel) .withTemperature(0.8F)); // 我们可以先在后端模拟流式打印效果 // Prompt prompt = new Prompt(new UserMessage(askquestion)); // Flux<ChatResponse> flux = ollamaChatClient.stream(prompt); // flux.toStream().forEach(chatResponse -> { // System.out.print(chatResponse.getResult().getOutput().getContent()); // }); return ollamaChatClient.stream(prompt); } |
这段代码可牛啦，能让后端像个超级话痨，源源不断地给你回复消息，就像打开了话匣子，根本停不下来，超厉害有木有！
三、 前端实现
1. 发送消息到服务器
/** * 发送消息到服务器 */ function askQuestionByStream(askquestion) { var isstream = false; var requestData = {}; requestData.askquestion = encodeURIComponent(askquestion); $.when(fetchData(url, JSON.stringify(requestData))).done( function (responseData) { streamData(responseData, 100); } ) } |
这一步就是让前端能把你的问题 “嗖” 地一下 “飞” 到后端去，开启超有意思的对话之旅，是不是很神奇！
2. 处理流式数据
function streamData(data, interval) { var respData = data; const decoder = new TextDecoder('utf-8'); return data.read().then(({done, value}) => { // 检查是否读取完毕 if (done) { console.log("数据接收完毕"); return; } //处理每个数据块 value = decoder.decode(value, {stream: true}); var respData = {}; try { respData = JSON.parse(value); } catch (error) { respData = eval("(" + value + ")"); } showStreamData(respData, interval); //继续读取下一个数据块 streamData(data, interval); }); } |
这段代码就像个超级厉害的数据 “翻译官”，能把后端传来的数据变得美美的，整整齐齐的，准备好展示给你，超贴心哒！
3. 展示数据
function showStreamData(respData, interval) { let index = 0; const timer = setInterval(() => { if (index < respData.length) { var content = respData[index].result.output.content; content = content.replace(/>/g, ">"); content = content.replace(/</g, "<"); content = content.replace(/'/g, "'"); content = content.replace(/\r\n/g, "<br/>"); content = content.replace(/\n/g, "<br/>"); content = content.replace(/\r/g, "<br/>"); content = content.replace(/\t/g, " "); $("#inforesult").append(content); index++; } else { clearInterval(timer); // 完成所有数据输出后停止定时器 } }, interval); } |
这里就是把数据展示在页面上，让你能清楚看到 AI 小伙伴的回答，超直观，一目了然，这下和 AI 交流就轻松多啦！
4. 发送后端 API
function fetchData(url, formData) { var deferred = $.Deferred(); //中止其他的fetch请求 var controller = new AbortController(); controller.abort(); var fetchParams = { method: "post", body: formData, dataType: "text/event-stream", headers: {"Content-Type": "application/json"} }; fetch(url, fetchParams) .then(function (response) { //response.status表示响应的http状态码 if (response.ok) { //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise return response.body; } else { console.log('error'); return null; } }) .then(function (respdata) { //响应的内容 try { var reader = respdata.getReader(); deferred.resolve(reader); } catch (error) { deferred.resolve(error); } }) .catch(error => { console.log(error); deferred.reject(error); }); //异步返回 return deferred.promise(); } |
这部分代码就是负责和后端 “打电话”，把你的请求妥妥地送过去，再把回复顺顺利利地带回来，超关键，是前后端交流的重要桥梁哦！
JavaScript 的 fetch 是用于发起网络请求的现代 API，它基于 Promise 设计，替代了传统的 XMLHttpRequest，提供了更简洁、强大的方式处理 HTTP 请求。以下是 fetch 的核心概念和基本用法：
fetch(url, { method: 'POST', // 请求方法（GET、POST、PUT等） headers: { 'Content-Type': 'application/json', // 请求头 }, body: JSON.stringify({ key: 'value' }), // 请求体（如表单数据、JSON） mode: 'cors', // 跨域模式（cors/no-cors/same-origin） credentials: 'include', // 携带cookies等凭证 }); |
处理响应
Response 对象提供多种方法解析数据：
response.json ()：解析为 JSON 对象。
response.text ()：解析为纯文本。
response.blob ()：解析为二进制 Blob（如图像）。
response.formData ()：解析为表单数据。
错误处理
fetch 只有在网络故障时才会拒绝 Promise，HTTP 错误状态码（如 404、500）需要通过 response.ok 检查：
高级功能
取消请求：
使用 AbortController 中止请求：
四、前端效果
看！这就是前端的效果，超酷的有木有！简直帅炸了！
宝子们，按照这个教程，赶紧麻溜地动手试试，让你的项目也拥有超酷的 Spring AI 吧！冲鸭，奥利给！