springboot vue deepseek

### 如何在 Spring Boot 和 Vue 项目中集成 DeepSeek 模型或服务 #### 背景介绍 DeepSeek 是一种先进的大语言模型，能够提供高质量的自然语言处理能力。为了将其功能嵌入到基于 Spring Boot 的后端和 Vue 前端的应用程序中，可以通过 Ollama 提供的服务接口实现通信[^1]。 --- #### 后端部分：Spring Boot 集成 DeepSeek ##### 创建 RESTful API 接口 在 Spring Boot 中，可以利用 `RestTemplate` 或 `WebClient` 来调用 Ollama 提供的 HTTP 接口。以下是具体的代码示例： ```java @RestController @RequestMapping("/api/deepseek") public class DeepSeekController { private final WebClient webClient; public DeepSeekController(WebClient.Builder builder) { this.webClient = builder.baseUrl("http://localhost:11434").build(); } @PostMapping("/chat") public String getChatResponse(@RequestBody Map<String, Object> request) { return webClient.post() .uri("/v1/chat/completions") .bodyValue(request) .retrieve() .bodyToMono(String.class) .block(); } } ``` 上述代码定义了一个 `/api/deepseek/chat` 的 POST 请求接口，用于接收前端发送的消息并转发给 Ollama 服务[^2]。 ##### 配置文件设置 在项目的 `application.yml` 文件中，需指定 Ollama 服务的基础 URL 及其他参数： ```yaml server: port: 8080 spring: ai: ollama: base-url: http://localhost:11434 chat: model: deepseek-r1:8b webflux: base-path: / codec: max-in-memory-size: 10MB logging: level: cn.com.codingce.deepseek: DEBUG org.springframework.web: INFO ``` 此配置确保了应用能正确连接至本地运行的 Ollama 实例，并指定了使用的 DeepSeek 模型版本[^3]。 --- #### 前端部分：Vue.js 集成 DeepSeek ##### 安装依赖项 在 Vue 项目中，首先需要安装 Axios 库以便于发起 HTTP 请求： ```bash npm install axios ``` ##### 编写组件逻辑 以下是一个简单的 Vue 组件示例，展示如何向后端发送请求并与用户交互： ```javascript <template> <div> <textarea v-model="inputText" placeholder="输入您的问题..."></textarea> <button @click="sendMessage">发送</button> <p>{{ response }}</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { inputText: '', response: '' }; }, methods: { async sendMessage() { try { const res = await axios.post('http://localhost:8080/api/deepseek/chat', { prompt: this.inputText }); this.response = res.data; } catch (error) { console.error(error); this.response = '发生错误，请稍后再试'; } } } }; </script> ``` 在此组件中，用户可以在文本框中输入消息并通过按钮触发请求，最终显示来自 DeepSeek 的回复。 --- #### 总结 通过以上方法，可成功将 DeepSeek 模型的功能融入到由 Spring Boot 构建的后端以及 Vue 开发的前端应用程序之中。这不仅提升了用户体验，还充分利用了现代 AI 技术的优势。 ---