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

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

沉默的1024

976人浏览 · 2025-02-12 09:20:11

沉默的1024 · 2025-02-12 09:20:11 发布

本节讲述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>