【Code With SOLO】使用Java+VUE制作带数据隔离的RAG系统

[用户43507]

RAG-Modern-Vue3-SpringBoot

基于Vue3 + SpringBoot的现代化RAG（检索增强生成）智能问答系统，采用PostgreSQL数据库持久化存储，遵循若依框架的模块化架构设计。

项目亮点

• 完整的RBAC权限系统：用户管理、角色管理、菜单管理、权限控制

• RAG核心功能：文档上传、向量检索、智能问答

• PostgreSQL持久化：数据持久化存储，支持向量扩展

• 本地AI模型：集成Ollama，隐私安全无需云服务

• 现代化UI：若依风格管理系统 + ChatGPT风格对话界面

• JWT认证：无状态认证，安全可靠

技术栈

前端技术栈

• 框架：Vue 3.4 + Composition API

• 构建工具：Vite 5

• UI组件：Element Plus 2.5

• 状态管理：Pinia 2.1

• 路由管理：Vue Router 4.2

• HTTP客户端：Axios 1.6

后端技术栈

• 框架：Spring Boot 3.1.5

• 数据库：PostgreSQL 15+

• ORM：Spring Data JPA + Hibernate

• 安全：Spring Security + JWT

• 响应式：Spring WebFlux

• 文档处理：Apache PDFBox 2.0.29

AI模型

• LLM：deepseek-r1:7b

• Embedding：bge-m3:latest

• 服务：Ollama 0.18.2

功能特性

系统管理模块

• 用户管理：用户增删改查、状态管理、角色分配

• 角色管理：角色配置、菜单权限分配

• 菜单管理：菜单树形展示、权限标识设置

• 权限控制：基于注解的接口权限控制

RAG业务模块

• 文档管理：支持TXT、MD、PDF格式上传

• 向量检索：基于相似度的文档检索

• 智能对话：RAG模式 + 普通对话模式

• 来源追溯：显示参考文档来源

• 对话历史：保存和管理对话记录

界面特性

• 若依风格管理系统布局

• ChatGPT风格对话界面

• 响应式设计，适配多种设备

• Markdown格式渲染支持

项目结构

RAG-Modern-Vue3-SpringBoot/
├── backend/                    # Spring Boot 后端
│   ├── src/main/java/com/rag/backend/
│   │   ├── annotation/        # 自定义注解
│   │   ├── aspect/            # AOP切面
│   │   ├── config/            # 配置类
│   │   ├── controller/        # REST API控制器
│   │   ├── dto/               # 数据传输对象
│   │   ├── exception/         # 异常处理
│   │   ├── model/             # 数据模型
│   │   ├── repository/        # 数据访问层
│   │   ├── service/           # 业务逻辑层
│   │   └── util/              # 工具类
│   ├── src/main/resources/
│   │   ├── application.yml    # 应用配置
│   │   └── db/                # 数据库脚本
│   ├── mvn-custom.sh          # 自定义Maven脚本
│   └── pom.xml
├── frontend/                   # Vue3 前端
│   ├── src/
│   │   ├── api/               # API接口
│   │   ├── components/        # 公共组件
│   │   ├── directives/        # 自定义指令
│   │   ├── layout/            # 布局组件
│   │   ├── router/            # 路由配置
│   │   ├── stores/            # Pinia状态管理
│   │   ├── styles/            # 样式文件
│   │   ├── utils/             # 工具函数
│   │   ├── views/             # 页面组件
│   │   ├── App.vue            # 根组件
│   │   └── main.js            # 入口文件
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── docs/                      # 项目文档
│   └── PROJECT_SUMMARY.md
├── README.md                  # 项目说明
├── README_POSTGRESQL.md       # PostgreSQL配置说明
└── FRONTEND_OPTIMIZATION.md   # 前端优化说明

快速开始

前置要求

• Java：21+

• Node.js：18+

• Maven：3.8+

• PostgreSQL：15+

• Ollama：已安装并运行

1. 安装Ollama模型

# 安装LLM模型
ollama pull deepseek-r1:7b
​
# 安装Embedding模型
ollama pull bge-m3:latest
​
# 验证模型安装
ollama list

2. 初始化PostgreSQL数据库

# 创建数据库
psql -U postgres -c "CREATE DATABASE ragdb;"
​
# 连接数据库
psql -U postgres -d ragdb
​
# 创建必要的扩展（如果需要向量功能）
CREATE EXTENSION IF NOT EXISTS vector;

3. 启动后端服务

cd backend
​
# 方式1: 使用自定义Maven脚本（推荐）
./mvn-custom.sh spring-boot:run
​
# 方式2: 使用标准Maven（需要配置settings.xml）
mvn spring-boot:run

后端服务地址：http://localhost:8080/api

4. 启动前端服务

cd frontend
​
# 安装依赖
npm install
​
# 启动开发服务器
npm run dev

前端服务地址：http://127.0.0.1:3000

5. 访问系统

打开浏览器访问：http://127.0.0.1:3000

默认管理员账号：

• 用户名：admin

• 密码：admin123

API接口文档

认证接口

用户登录

POST /api/auth/login
Content-Type: application/json
​
{
  "username": "admin",
  "password": "admin123"
}
​
Response:
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "userId": 1,
    "username": "admin",
    "nickname": "管理员"
  }
}

获取用户信息

GET /api/auth/info
Authorization: Bearer {token}
​
Response:
{
  "userId": 1,
  "username": "admin",
  "nickname": "管理员",
  "roles": ["admin"]
}

文档管理接口

上传文档

POST /api/rag/upload
Content-Type: multipart/form-data
Authorization: Bearer {token}
​
file: [文件]
source: "文档来源"
topic: "文档主题"
​
Response:
{
  "id": 1,
  "filename": "document.pdf",
  "status": "success"
}

获取文档列表

GET /api/rag/documents?page=1&size=10
Authorization: Bearer {token}

Response:
{
  "content": [
    {
      "id": 1,
      "filename": "document.pdf",
      "originalFilename": "原始文件名.pdf",
      "fileSize": 1024000,
      "createdAt": "2024-03-16T10:00:00"
    }
  ],
  "totalElements": 100,
  "totalPages": 10
}

删除文档

DELETE /api/rag/documents/{id}
Authorization: Bearer {token}

Response:
{
  "message": "删除成功"
}

智能对话接口

发送对话消息

POST /api/rag/chat
Content-Type: application/json
Authorization: Bearer {token}

{
  "query": "什么是RAG技术？",
  "useRag": true
}

Response:
{
  "response": "RAG（Retrieval-Augmented Generation）是一种...",
  "mode": "RAG",
  "contextUsed": true,
  "sources": [
    {
      "filename": "document.pdf",
      "chunk": "相关文档片段...",
      "similarity": 0.85
    }
  ]
}

系统管理接口

用户管理

GET /api/users?page=1&size=10
POST /api/users
PUT /api/users/{id}
DELETE /api/users/{id}
Authorization: Bearer {token}

角色管理

GET /api/roles
POST /api/roles
PUT /api/roles/{id}
DELETE /api/roles/{id}
Authorization: Bearer {token}

菜单管理

GET /api/menus
POST /api/menus
PUT /api/menus/{id}
DELETE /api/menus/{id}
Authorization: Bearer {token}

配置说明

后端配置 (application.yml)

server:
  port: 8080
  servlet:
    context-path: /api

spring:
  datasource:
    url: jdbc:postgresql://127.0.0.1:5432/ragdb
    driver-class-name: org.postgresql.Driver
    username: postgres
    password: postgres
  
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        dialect: org.hibernate.dialect.PostgreSQLDialect

  servlet:
    multipart:
      enabled: true
      max-file-size: 50MB
      max-request-size: 50MB

rag:
  ollama:
    url: http://127.0.0.1:11434
    llm-model: deepseek-r1:7b
    embedding-model: bge-m3:latest
  
  storage:
    tech-doc-dir: ./TechDoc
    max-file-size: 50MB
  
  retrieval:
    top-k: 3
    similarity-threshold: 0.3

logging:
  level:
    com.rag.backend: DEBUG

前端配置 (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

Maven配置 (mvn-custom.sh)

项目提供了自定义Maven脚本，配置了：

• Maven本地仓库路径

• 镜像源配置

• 依赖下载加速

使用方式：

cd backend
./mvn-custom.sh spring-boot:run

使用说明

1. 用户登录

1. 访问系统首页：http://127.0.0.1:3000

2. 使用默认管理员账号登录

   • 用户名：admin

   • 密码：admin123

3. 登录成功后进入系统首页

2. 文档管理

1. 点击左侧菜单"文档管理"

2. 点击"上传文档"按钮

3. 选择文件（支持TXT、MD、PDF格式）

4. 填写文档来源和主题

5. 点击"确定"完成上传

6. 系统自动进行文档分块和向量化

3. 智能对话

1. 点击左侧菜单"智能对话"

2. 点击"新建对话"创建新会话

3. 输入问题并发送

4. 开启RAG模式：

   • 系统会从上传的文档中检索相关内容

   • 基于检索结果生成回答

   • 显示参考文档来源

5. 关闭RAG模式：

   • 直接使用AI模型进行对话

   • 不依赖文档库

4. 系统管理

• 用户管理：管理系统用户，分配角色

• 角色管理：配置角色权限，分配菜单

• 菜单管理：管理系统菜单和权限标识

5. 系统设置

• 查看系统配置

• 查看模型信息

• 查看存储统计

开发说明

后端开发

添加新的API接口

1. 在 controller 包中创建控制器类

2. 在 service 包中创建服务类

3. 在 repository 包中创建数据访问接口

4. 如需新实体，在 model 包中创建实体类

权限控制

使用 @PreAuthorize 注解进行接口权限控制：

@PreAuthorize("hasPermission('user', 'add')")
@PostMapping
public Result addUser(@RequestBody User user) {
    // 业务逻辑
}

数据库迁移

• 开发环境：使用 ddl-auto: update 自动更新表结构

• 生产环境：使用 ddl-auto: validate 验证表结构

前端开发

添加新页面

1. 在 views 目录下创建页面组件

2. 在 router/index.js 中添加路由配置

3. 在 api 目录下创建API接口文件

4. 在 stores 目录下创建状态管理（可选）

权限指令

使用 v-permission 指令控制按钮权限：

<el-button v-permission="['user:add']">新增用户</el-button>

API请求

使用封装的axios实例：

import request from '@/utils/request'

export function getUserList(params) {
  return request({
    url: '/users',
    method: 'get',
    params
  })
}

代码规范

• Java代码：遵循Google Java Style Guide

• Vue代码：遵循Vue官方风格指南

• 命名规范：类名使用大驼峰，方法名使用小驼峰

• 注释规范：关键代码添加注释说明

常见问题

Q1: RAG模式返回"无法回答这个问题"

原因：

• 文档未成功上传或向量化失败

• Ollama服务未正常运行

• 相似度阈值设置过高

解决方案：

1. 检查文档上传状态

2. 验证Ollama服务：ollama list

3. 调整相似度阈值（application.yml中的 similarity-threshold）

4. 查看后端日志获取详细错误信息

Q2: 前端无法连接后端

原因：

• 后端服务未启动

• 端口配置错误

• 跨域问题

解决方案：

1. 确认后端服务运行在 http://localhost:8080

2. 检查前端代理配置（vite.config.js）

3. 查看浏览器控制台错误信息

4. 检查防火墙设置

Q3: Ollama调用失败

原因：

• Ollama服务未启动

• 模型未下载

• 网络连接问题

解决方案：

1. 启动Ollama服务：ollama serve

2. 下载所需模型：ollama pull deepseek-r1:7b

3. 验证模型：ollama list

4. 检查配置中的URL是否正确

Q4: PostgreSQL连接失败

原因：

• PostgreSQL服务未启动

• 数据库未创建

• 用户名密码错误

解决方案：

1. 启动PostgreSQL服务

2. 创建数据库：CREATE DATABASE ragdb;

3. 检查application.yml中的数据库配置

4. 验证用户权限

Q5: JWT Token过期

原因：

• Token有效期已过

• 系统时间不同步

解决方案：

1. 重新登录获取新Token

2. 检查Token有效期配置（application.yml中的 jwt.expiration）

3. 确保系统时间正确

Q6: 文件上传失败

原因：

• 文件大小超过限制

• 文件格式不支持

• 存储目录权限问题

解决方案：

1. 检查文件大小（默认限制50MB）

2. 确认文件格式（支持TXT、MD、PDF）

3. 检查TechDoc目录权限

4. 查看后端日志

Q7: 权限控制不生效

原因：

• 用户未分配角色

• 角色未配置权限

• 注解使用错误

解决方案：

1. 检查用户角色分配

2. 验证角色权限配置

3. 确认 @PreAuthorize 注解使用正确

4. 查看后端日志中的权限验证信息

部署说明

开发环境

• 前端：Vite开发服务器（端口3000）

• 后端：Spring Boot内嵌Tomcat（端口8080）

• 数据库：PostgreSQL本地服务

• AI模型：Ollama本地服务

生产环境部署

后端打包

cd backend
./mvn-custom.sh clean package
java -jar target/rag-backend-1.0.0.jar

前端打包

cd frontend
npm run build
# 将dist目录部署到Nginx或其他Web服务器

Docker部署（可选）

# 构建镜像
docker build -t rag-system:latest .

# 运行容器
docker run -d \
  -p 8080:8080 \
  -e SPRING_DATASOURCE_URL=jdbc:postgresql://db:5432/ragdb \
  rag-system:latest

更新日志

v2.0.0 (2024-03-16)

• 从H2迁移到PostgreSQL数据库

• 添加完整的RBAC权限系统

• 集成Spring Security + JWT认证

• 优化前端界面（若依风格 + ChatGPT风格）

• 添加文档管理和智能对话功能

• 完善API接口文档

v1.0.0 (2024-01-01)

• 初始版本发布

• 基础RAG功能实现

• 文档上传和向量化

• 智能对话功能

贡献指南

欢迎提交Issue和Pull Request！

提交代码

1. Fork本项目

2. 创建特性分支：git checkout -b feature/AmazingFeature

3. 提交更改：git commit -m 'Add some AmazingFeature'

4. 推送分支：git push origin feature/AmazingFeature

5. 提交Pull Request

代码规范

• 遵循项目现有的代码风格

• 添加必要的注释和文档

• 编写单元测试

许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

联系方式

如有问题或建议，请：

• 提交Issue：GitHub Issues

• 查看文档：项目文档

---

项目状态： 开发完成，可投入使用
版本：v2.0.0
最后更新：2024-03-16
维护状态：活跃维护中