购物网站建设建站/福州短视频seo网红

整理不易，请不要吝啬你的赞和收藏。

1. 前言

这篇文章是 Spring AI Q&A 系统的前端实现。这篇文章将介绍如何快速搭建一个基于 vue3 + ElementPlus 的前端项目，vue3 项目的目录结构介绍，如何在前端实现流式响应，如何高亮显示代码等。

效果展示：

2. 前提条件

后端实现：
【Spring AI】基于SpringAI+Vue3+ElementPlus的Q&A系统实现(后端)-CSDN博客文章浏览阅读762次，点赞26次，收藏24次。这篇文章将介绍如何基于 RAG 技术，使用 SpringAI + Vue3 + ElementPlus 实现一个 Q&A 系统。本文使用 deepseek 的 DeepSeek-V3 作为聊天模型，使用阿里百炼的 text-embedding-v3 作为向量模型，使用 redis 作为向量库。（PS：近期阿里百炼也上架了 DeepSeek-V3 和 DeepSeek-R1 模型供开发者调用，如果觉得 DeepSeek 官方 AP I比较慢的话，可以去试试）。https://blog.csdn.net/u013176571/article/details/145368559
已安装 18.3 或更高版本的 Node.js ，未安装进入官网下载，LTS 为长期支持版，Current 为最新功能版。

3. 快速搭建 Elemenet-Plus 项目

我这里直接使用官网的快速搭建模板 element-plus-vite-starter ，其它方式参考 Element-Plus 官网。

3.1 项目下载

# 下载模板
git clone https://github.com/element-plus/element-plus-vite-starter.git
# 进入项目，安装依赖包
npm install

3.2 项目结构介绍

VS Code 中引入项目，项目结构如下：

项目结构介绍：

element-plus-vite-starter/
├── node_modules/            # 存放所有安装的依赖包
├── public/                  # 静态资源文件夹
│   └── favicon.svg          # 默认的站点图标
├── src/                     # 源代码文件夹
│   ├── assets/              # 静态资源（如图片、样式等）
│   ├── components/          # Vue 组件文件夹
│   ├──── layouts/           
│   ├────── BaseHeader.vue   # 顶部导航栏布局
│   ├────── BaseSide.vue     # 侧边导航栏布局
│   ├── composables/         # Vue 3 Composition API 的逻辑复用文件夹，存放 useXXX 命名的函数
│   ├── pages/               # 页面视图文件夹
│   ├── styles/              # 样式文件夹，存放全局样式 css 类
│   ├──── element/           
│   ├────── index.scss       # 全局颜色主题配置文件           
│   ├── App.vue              # 根组件
│   ├── main.js              # 项目入口文件
│   ├── components.d.ts      # 组件的类型声明文件
│   ├── env.d.ts             # 环境变量的类型声明文件
│   ├── typed-router.d.ts    # 路由的类型声明文件
│   └── types.ts             # 全局类型定义文件，用于定义 TypeScript 类型
├── .gitignore               
├── eslint.config.ts         # ESLint 配置文件，用于代码质量检查
├── index.html               # 项目入口 HTML 文件，Vite 会以此文件为模板进行开发和构建
├── babel.config.js          # Babel 配置文件（仅在 Vue CLI 项目中）
├── package-lock.json        # npm 生成的锁定文件，确保依赖版本一致
├── package.json             # 项目依赖和配置信息
├── pnpm-lock.yaml           # pnpm 生成的锁定文件，确保依赖版本一致
├── README.md                # 项目说明文档
├── tsconfig.json            # TypeScript 配置文件，定义 TypeScript 编译选项
├── uno.config.ts            # UnoCSS 配置文件，UnoCSS 是一个用于生成原子 CSS 的工具
└── vite.config.ts           # Vite 配置文件（仅在 Vite 项目中）

3.3 启动项目

执行以下命令启动：

# 启动项目
npm run dev

浏览器访问：http://localhost:5173/

4. 页面开发

这篇文章不会提供所有前端代码，我会在主要的卡点提供相应的代码节选。

4.1 .vue 文件介绍

在 Vue3 中，我们通过创建一个 .vue 格式文件来创建页面，一个 .vue 文件由以下几个部分组成：

template：组件的模板部分，用于定义组件的 HTML 结构。Vue 会将模板编译为渲染函数，用于生成最终的 DOM。
script：组件的逻辑部分，用于定义组件的数据、方法、生命周期钩子等。
style：组件的样式部分，用于定义组件的 CSS 样式，支持 CSS、SCSS、Sass、Less 等。

样例：

<template><div class = "m-container" ><h1 class = "m-title" >{{ title }}</h1><button @click = "handleClick" >@click 用来绑定点击事件</button></div>
</template>// lang="ts" 表示标签中的代码是用 TypeScript 编写的
<script lang="ts" setup>
import { onMounted, reactive, toRefs } from "vue";// 定义变量
const state = reactive({title: "页面1",
});
// 用于将响应式对象中的属性转换为响应式引用（ref）
const { title } = toRefs(state)/*** 页面加载事件*/
onMounted(() => {
});/*** 绑定事件*/
const handleClick = () => {// 变量赋值title.value = "页面2"
}
</script>// lang="less" 表示使用 less 语法，scoped 用来限制作用域，只对当前组件模板生效
<style lang="less" scoped>
.m-container{.m-title{            }
}
</style>

4.2 网络请求工具类

在 src 目录下创建一个 utils 文件夹，然后创建一个 api.ts 文件，用于发起网络请求。

4.2.1 代码

import axios from 'axios';
import { ElMessage } from 'element-plus';// 创建一个 axios 实例
const baseURL = 'http://127.0.0.1:8082/your_service_name';
const apiClient = axios.create({baseURL: baseURL,timeout: 200000, // 请求超时时间headers: {'Content-Type': 'application/json',},
});const err = (error) => {console.log('error', error)if (axios.isCancel(error)) {return}if (!error.response) {ElMessage.error({message: '请求超时请检查网络链接！',offset: 80,})return Promise.reject(error)}const data = error.response.dataif (!data || data.code !== 200) {ElMessage.error(data.message || "发生未知错误，请稍后再试！")}return Promise.reject(error)
}// 请求拦截器
apiClient.interceptors.request.use((config) => {// 在发送请求之前做些什么，例如添加 tokenconst token = localStorage.getItem('token'); if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},err
);// 响应拦截器
apiClient.interceptors.response.use((response) => {// 对响应数据做点什么return response.data;},err
);// 定义 API 请求方法
const api = {getBaseUrl() {return baseURL;},get(url, params) {return apiClient.get(url, { params });},post(url, params, config) {return apiClient.post(url, params, config);},
};
export default api;

4.2.2 如何引用？

在需要引用的页面的 script 标签中或 .ts 文件下键入：

import api from '@/utils/api';

4.2.3 如何调用？

const param = {};
const config = {headers: {'Content-Type': 'multipart/form-data',},
};
api.post("/ai/chat/fileUploadWithRag",param).then((response) => {console.log("Response received:", response);}).catch((error) => {// 处理错误console.error("请求失败:", error);});

4.3 如何接收 SSE 响应式消息

SSE (Server-Sent Events）是一种允许服务器向客户端推送数据的技术，属于 HTML5 的一部分。它支持服务器向客户端的单向通信，客户端通过一次长连接持续接收服务器推送的数据。响应式编程（Reactive Programming）非常适合实现 SSE，因为它允许以非阻塞的方式持续推送数据，不会阻塞服务器资源。在 SpringBoot 中可以使用 Spring WebFlux 框架来实现 SSE。在 Web 端实现 SSE 通常使用 EventSource 对象。

4.3.1 代码

同样在 utils 目录下，创建一个 sse.ts 的工具类。

class SSE {private eventSource: EventSource | null = null;/*** 连接 SSE* @param url* @param onMessage * @param onError */public connect(url: string, onMessage: (event: MessageEvent) => void, onError?: (event: Event) => void): void {this.eventSource = new EventSource(url);// 监听消息事件this.eventSource.onmessage = onMessage;// 监听错误事件if (onError) {this.eventSource.onerror = onError;}}/*** 关闭 SSE 连接*/public close(): void {if (this.eventSource) {this.eventSource.close();this.eventSource = null;}}}export default SSE;

4.3.2 如何引用？

import SSE from "@/utils/sse";

4.3.3 如何调用

需要注意的是，SSE 仅支持 GET 调用。

const state = reactive({sse: new SSE(),
});
const { sse } = toRefs(state);// 接收消息的回调函数
const handleMessage = (event: MessageEvent) => {eventMessage = eventMessage.concat(event.data);
};
// 错误处理的回调函数
const handleError = (event: Event) => {stopGenerate();console.log('SSE 连接错误:', event);
};
const url = "接口地址?param1=param1&param2=param2"
sse.value.connect(url, handleMessage, handleError);

4.4 对话组件

template 中主要代码节选，通过 message.sender 的值加载用户和AI消息的样式。

<el-scrollbar ref="scrollbar" class="message-list" always @scroll="handleScroll"><div v-for="message in messages" :key="message.id" class="message-wrapper" :class="{'user-message': message.sender === 'user','bot-message': message.sender === 'bot',}"><div class="message-bubble"><div class="message-content" v-html="message.content"></div></div></div>
</el-scrollbar>

script 中主要代码节选：

// 定义一个 Message 接口
interface Message {id: number;content: string;sender: "user" | "bot";timestamp: number;
}// 定义变量
const state = reactive({messages: [] as Message[],
});
const { messages } = toRefs(state);

4.5 如何加载 Markdown 内容

由于大模型返回的流一般为 Markdown 格式，我们使用第三方库 markdown-it 来加载内容。

4.5.1 安装 markdown-it

由于我需要支持代码高亮、数学公式、流程图等，所以我安装了额外的插件来扩展 MarkdownIt 的功能。

npm install markdown-it highlight.js katex mermaid markdown-it-sub markdown-it-sup markdown-it-emoji markdown-it-task-lists markdown-it-footnote markdown-it-deflist markdown-it-abbr markdown-it-ins markdown-it-mark

4.5.2 如何使用

template 中代码节选：

<template><div class="message-content" v-html="message.content"></div>
</template>

script 中代码节选：

// 引入 markdown-it
import MarkdownIt from "markdown-it";
// 定义MarkdownIt对象
const md = new MarkdownIt();// SSE 接收消息的回调函数
const handleMessage = (event: MessageEvent) => {eventMessage = eventMessage.concat(event.data);botMessage.content = computed(() => {return md.value.render(eventMessage);});// 设置nextTick(() => {scrollToBottom();});
};

4.6 其它

4.6.1 上传组件

使用 ElementPlus 的 upload 组件。

4.6.2 使用 Alt + Enter 键换行

Input 默认的换行快捷键为 Shift + Enter，不符合我们平时的使用习惯。

const handleKeyDown = (event: KeyboardEvent) => {if (event.key === "Enter") {// 按下 Alt + Enter 键时，插入换行符if (event.altKey) {const cursorPosition = event.target.selectionStart;const textBeforeCursor = inputMessage.value.slice(0, cursorPosition);const textAfterCursor = inputMessage.value.slice(cursorPosition);inputMessage.value = textBeforeCursor + '\n' + textAfterCursor;event.target.selectionStart = cursorPosition + 1;event.target.selectionEnd = cursorPosition + 1;return;}event.preventDefault();sendMessage();}
};

4.6.3 消息自动滚动到最下方

代码节选：

 // 定义变量
const state = reactive({autoScroll: true,scrollbar: {} as any,
});
const { autoScroll, scrollbar } = toRefs(state);/*** 消息滚动事件监听*/
const handleScroll = ({ scrollTop }: { scrollTop: number }) => {const scrollHeight = scrollbar.value.wrapRef?.scrollHeight || 0;const clientHeight = scrollbar.value.wrapRef?.clientHeight || 0;autoScroll.value = scrollTop + clientHeight >= scrollHeight - 10;
};/*** 滚动到最下方*/
const scrollToBottom = () => {if (autoScroll.value) {nextTick(() => {scrollbar.value?.setScrollTop(scrollbar.value.wrapRef?.scrollHeight);});}
};