JavaAI大前端java
Spring AI 快速入门：集成 Ollama 与 OpenAI 实战
本文介绍如何使用 Spring AI 框架快速集成本地大模型 Ollama 及云端 OpenAI API。涵盖项目依赖配置、Ollama 环境搭建、Spring Boot 后端接口开发以及 Vue3 前端交互实现，并提供远程 API 调用的配置方案及安全最佳实践。内容包含流式响应支持、错误处理、安全加固及常见问题排查，帮助开发者快速构建 AI 应用原型。
本文介绍如何使用 Spring AI 框架快速集成本地大模型 Ollama 及云端 OpenAI API。涵盖项目依赖配置、Ollama 环境搭建、Spring Boot 后端接口开发以及 Vue3 前端交互实现，并提供远程 API 调用的配置方案及安全最佳实践。内容包含流式响应支持、错误处理、安全加固及常见问题排查，帮助开发者快速构建 AI 应用原型。
Spring AI 是一个旨在简化开发包含人工智能功能应用程序的项目。它受到 Python 项目如 LangChain 和 Llama Index 的启发，但并非这些项目的直接移植。Spring AI 的核心理念是为开发 AI 应用程序提供基础抽象，这些抽象有多个实现，使得在不同实现之间轻松切换组件，且代码更改最小化。
设计理念是为开发人员提供一个抽象接口，为将生成式 AI 作为独立组件纳入应用奠定基础。目前支持所有主要的模型提供商，如 OpenAI、Microsoft、Amazon、Google 和 Hugging Face。本文将带你体验 Spring AI 与 Ollama 大模型的结合，并介绍如何切换到远程 API（如 OpenAI）。
在开始之前，请确保您的开发环境满足以下要求：
由于 Spring AI 处于早期发展阶段，部分版本可能位于 Snapshot 仓库中。我们需要按照官方文档提示，首先配置代码仓库地址。
在 pom.xml 中添加以下仓库配置，以获取里程碑版和快照版依赖：
<repositories>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>https://repo.spring.io/snapshot</url>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>
为了统一管理 Spring AI 相关依赖的版本，建议使用 BOM（Bill of Materials）：
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-bom</artifactId>
<version>0.8.1-SNAPSHOT</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
在 dependencies 标签下添加 Spring Boot Web Starter 和 Spring AI Ollama Starter：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>2.0.12</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.30</version>
</dependency>
<!-- Spring AI Ollama Starter -->
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-ollama-spring-boot-starter
Ollama 是一个旨在简化大型语言模型 (LLMs) 本地运行的工具和框架。它通过将模型权重、配置和数据打包成一个单一的包，使得用户能够在本地设备上轻松运行开源的大型语言模型。
访问 Ollama 官网下载对应操作系统的版本。对于 Windows 用户，直接下载安装程序即可。
安装完成后，打开终端输入以下命令下载支持中文的模型：
ollama run llama2-chinese
首次下载需要耐心等待，具体耗时取决于网络状况。下载完成后，模型将保存在本地。
在 application.yml 或 application.properties 中进行如下配置：
server:
port: 8081
spring:
ai:
ollama:
chat:
options:
model: llama2-chinese
创建一个简单的 REST 控制器来处理聊天请求：
@RestController
public class AIController {
@Resource
private OllamaChatClient ollamaChatClient;
@GetMapping("/chat")
public String chat(@RequestParam(name = "message") String message) {
return ollamaChatClient.call(message);
}
}
在实际应用中，为了提升用户体验，通常推荐使用流式响应。Spring AI 支持返回 Stream<String> 或 ResponseEntity<Stream<String>>。
@GetMapping(value = "/chat-stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> chatStream(@RequestParam(name = "message") String message) {
return ollamaChatClient.stream(message);
}
为了演示完整的交互流程，我们使用 Vue3 构建一个简单的聊天界面。
使用 Vite 创建 Vue3 项目，并安装 axios 用于发送 HTTP 请求。
Template 部分：
<template>
<div class="chat-container">
<div class="message-container" v-for="(message, index) in chatHistory" :key="index">
<div v-if="message.sender === 'user'" class="user-message">{{ message.content }}</div>
<div v-else class="gpt-message">{{ message.content }}</div>
</div>
<div class="input-container">
<input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="请输入消息...">
<button @click="sendMessage">发送</button>
</div>
</div>
<div v-if="wait" class="wait">
<div class="loader"></div>
<div>等待中</div>
</div>
</template>
Script 部分：
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const chatHistory = ref([]);
const newMessage = ref('');
const wait = ref(false);
const sendMessage = async () => {
const messageContent = newMessage.value.trim();
if (messageContent !== '') {
chatHistory.value.push({ sender: 'user', content: messageContent });
wait.value = true;
try {
const response = await axios.get('http://localhost:8081/chat', {
params: { message: messageContent }
});
chatHistory.value.push({ sender: 'gpt', content: response.data });
} catch (error) {
console.error('Request failed:', error);
chatHistory.value.push({ sender: 'system', content: });
} {
wait. = ;
newMessage. = ;
}
}
};
</script>
Style 部分：
<style scoped>
.chat-container {
max-width: 500px;
margin: auto;
position: relative;
}
.message-container {
margin-bottom: 10px;
}
.user-message {
background-color: #aaf;
padding: 5px;
border-radius: 5px;
max-width: 70%;
word-wrap: break-word;
}
.gpt-message {
background-color: #afa;
padding: 5px;
border-radius: 5px;
max-width: 70%;
word-wrap: break-word;
}
.input-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.input-container input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
.input-container button {
padding: 8px 20px;
background-color: #4caf50;
: white;
: none;
: ;
: pointer;
}
{
: absolute;
: ;
: ;
: (-, -);
: flex;
: column;
: center;
}
{
: solid ;
: solid ;
: ;
: ;
: ;
: spin linear infinite;
}
spin {
{ : (); }
{ : (); }
}
</style>
如果本地模型运算速度较慢，可以切换到远程 API。这里以 OpenAI GPT-3.5-turbo 为例。
需要在 OpenAI 官网申请 API Key。
添加 OpenAI Starter 依赖：
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-openai-spring-boot-starter</artifactId>
</dependency>
配置 application.yml：
spring:
ai:
openai:
api-key: ${OPENAI_API_KEY}
chat:
options:
model: gpt-3.5-turbo
temperature: 0.7
注意：生产环境中，建议通过环境变量 ${OPENAI_API_KEY} 注入密钥，避免硬编码在配置文件中。
@GetMapping("/chat")
public String openAiChat(@RequestParam(name = "message") String message) {
// 假设注入了 OpenAiChatClient
return openAiChatClient.call(message);
}
上述 Demo 仅用于验证功能，上线前需考虑以下优化：
ollama serve) 且端口默认 11434 未被占用。model 名称与 ollama list 输出一致。@CrossOrigin 注解或配置全局 CORS 策略。本文详细介绍了如何使用 Spring AI 框架集成本地 Ollama 模型及云端 OpenAI API。通过统一的抽象接口，开发者可以灵活切换不同的 AI 服务提供商。结合 Vue3 前端，可以快速构建具备智能对话能力的应用原型。随着 Spring AI 生态的成熟，未来将支持更多模型和功能，值得持续关注。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online