SpringAI ollama + deepseek-r1模型整合案例（含代码）

本节讲述os7系统中安装ollama模型、及与springAI进行前后端整合的案例。代码已提交到gitcode上，大家可以下载并自己练习。

ollama官网：https://ollama.com/download/linux

ps：其他模型：https://huggingface.co/models

一、os7 下载

第一步：安装环境脚本

这条命令会从Ollama的官方网站下载安装脚本，并直接在当前shell环境中执行该脚本，从而完成Ollama的安装过程。（下载过程会比较慢，网速不好的可以打几把王者）

curl -fsSL https://ollama.com/install.sh | sh

第二步：安装运行 Llama 3

此步会进行安装，llama3有：8B（4.7GB个参数）和70B（40GB个参数），默认8B，我这里用的也是8B，内存太小没办法，有兴趣也可以看下参数对比

llama3 api文档

详看官网博客（https://ollama.com/blog/llama3）

ollama run llama3

下载完后就可以畅所欲言的聊天了

二、SpringAI 集成

打开idea，新建项目。注意：因为阿里云的不支持springAI，所以切换spring 的服务器URL。

（https://start.aliyun.com 切换 https://start.spring.io）

点击创建后等待maven包下载。

1. 在application.properties中添加模型的支持

参数可在spring官网ollama栏中找

https://docs.spring.io/spring-ai/reference/api/chat/ollama-chat.html

spring.ai.ollama.base-url=http://localhost:11434
spring.ai.ollama.chat.model=deepseek-r1:14b

端口：11434

https://github.com/ollama/ollama

2.新建controller

看官网示例：

3.运行

第一个连接请求地址看下

第二个连接的请求，会是一串json，这个是请求模型的信息。这里我们修改下

@GetMapping(value = "/ai/generateStream", produces = "text/event-stream;charset=UTF-8")public Flux<String> generateStream(@RequestParam(value = "message", defaultValue = "讲个笑话") String message) {return this.chatModel.stream(message);}

浏览器的原因，不用管，下面建个前端项目

三、建立前端项目

在当前项目新建立文件夹如：app，我这里用的是vue+js

1.输入命令,并回车

// 创建脚手架
npm create vite

2. 会出现“ ok to proceed? (y) 意思是：是否继续，输入y ，继续

3.接着会再次出现让选择，此时按上下键，选择VUE，按回车，继续选择：javascript。

4. 进入刚生产的文件夹中

5.安装必要的依赖

// 下载markdown配合展示
npm install marked// 用于发送请求
npm install axios // 下载markdown样式
npm install github-markdown-css// highlight.js 用于代码高亮：
npm install highlight.js

6. 创建 Vue 组件

在 src/components 目录下创建一个新的组件 deepseekR1.vue，并编写以下代码：

<template><div class="chat-container"><div class="chat-history"><div v-for="(message, index) in messages" :key="index" :class="['message', message.role]"><div class="message-content" v-html="renderMarkdown(message.content)"></div></div></div><div class="chat-input"><input v-model="userInput" @keyup.enter="sendMessage" placeholder="Type your message..." /><button @click="sendMessage">Send</button></div></div>
</template><script>
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';export default {data() {return {userInput: '',messages: [],};},methods: {sendMessage() {if (!this.userInput.trim()) return;const userMessage = {role: 'user', content: this.userInput};this.messages.push(userMessage);const aiMessage = {role: 'assistant', content: ''};this.messages.push(aiMessage);this.userInput = '';// 使用 EventSource 接收 SSE 流const eventSource = new EventSource(`http://localhost:8080/deepseek/ai/generateStream?message=${encodeURIComponent(userMessage.content)}`);eventSource.onmessage = (event) => {aiMessage.content += event.data; // 追加流式数据this.$forceUpdate(); // 强制更新视图};eventSource.onerror = () => {eventSource.close(); // 关闭连接aiMessage.content += '\n\n[Stream ended]'; // 标记流结束this.$forceUpdate();};},renderMarkdown(content) {marked.setOptions({highlight: function (code, lang) {const language = hljs.getLanguage(lang) ? lang : 'plaintext';return hljs.highlight(code, {language}).value;},});return marked(content);},},
};
</script><style>
/* 样式保持不变 */
.chat-container {max-width: 800px;margin: 0 auto;padding: 20px;font-family: Arial, sans-serif;
}.chat-history {border: 1px solid #ccc;padding: 10px;height: 500px;overflow-y: auto;margin-bottom: 10px;
}.message {margin-bottom: 10px;
}.message.user {text-align: right;
}.message.assistant {text-align: left;
}.message-content {display: inline-block;padding: 8px 12px;border-radius: 4px;background-color: #f1f1f1;
}.chat-input {display: flex;
}.chat-input input {flex: 1;padding: 8px;border: 1px solid #ccc;border-radius: 4px;
}.chat-input button {margin-left: 10px;padding: 8px 16px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}.chat-input button:hover {background-color: #0056b3;
}
</style>

使用组件

在 src/App.vue 中使用刚刚创建的 deepseekR1组件：

<template><div id="app"><deepseekR1 /></div>
</template><script>
import deepseekR1 from './components/deepseekR1.vue';export default {components: {deepseekR1,},
};
</script><style>
#app {text-align: center;
}
</style>