以下是基于Spring Boot和Vue整合Ollama大模型实现智能对话的实战方案,内容分为后端实现和前端交互两部分,严格遵循技术规范要求:


后端实现(Spring Boot)

环境准备

  • JDK 17+
  • Spring Boot 3.x
  • 添加Spring AI依赖(需配置Spring Snapshot仓库):
<dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>
    <version>0.8.0-SNAPSHOT</version>
</dependency>

配置Ollama连接

spring:
  ai:
    ollama:
      base-url: http://localhost:11434
      chat:
        model: llama2  # 或其他Ollama支持的模型如mistral

核心对话接口

@RestController
@RequestMapping("/api/chat")
public class ChatController {
    private final OllamaChatClient chatClient;

    @PostMapping
    public String generate(@RequestBody String prompt) {
        return chatClient.call(prompt);
    }
}

流式响应支持

@GetMapping("/stream")
public Flux<String> streamChat(@RequestParam String message) {
    return chatClient.stream(message)
            .map(ChatResponse::getResults)
            .flatMapIterable(list -> list)
            .map(content -> content.getOutput().getContent());
}


前端实现(Vue 3)

安装依赖

npm install axios @vueuse/core

对话组件

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const messages = ref([])
const inputText = ref('')

const sendMessage = async () => {
  messages.value.push({ text: inputText.value, sender: 'user' })
  const response = await axios.post('/api/chat', inputText.value)
  messages.value.push({ text: response.data, sender: 'bot' })
  inputText.value = ''
}
</script>

流式响应处理

const handleStream = async () => {
  const eventSource = new EventSource(`/api/chat/stream?message=${encodeURIComponent(inputText.value)}`)
  eventSource.onmessage = (event) => {
    const botMessage = messages.value.find(m => m.sender === 'bot' && !m.complete)
    if (botMessage) {
      botMessage.text += event.data
    } else {
      messages.value.push({ text: event.data, sender: 'bot', complete: false })
    }
  }
  eventSource.onerror = () => eventSource.close()
}


部署与优化

Ollama模型管理

ollama pull llama2  # 下载模型
ollama list         # 查看本地模型

性能调优

  • 调整JVM参数:-Xmx4g 确保足够内存
  • 启用响应压缩:server.compression.enabled=true

安全增强

@Configuration
public class SecurityConfig {
    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeHttpRequests(auth -> auth.anyRequest().authenticated());
        return http.build();
    }
}


常见问题解决

503服务不可用 检查Ollama服务状态:curl http://localhost:11434/api/tags

响应缓慢 尝试较小模型:mistral 7B参数版本

中文支持问题 通过提示词工程优化:

你是一个精通多语言AI助手,请用中文回答用户问题,保持专业且友好的语气。


该方案实现了完整的对话流程,包含流式响应和基础安全防护,可根据实际需求扩展对话历史管理、多模态支持等功能。注意Spring AI目前处于快速迭代阶段,需定期检查依赖版本更新。

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐