【Vue】LangChain4j大模型对话-前端页面完成（vite+vue3+router）

接上文内容：https://blog.csdn.net/2401_84926677/article/details/151962893

一、介绍

本文继承上一章LangChain4j实现后端对话接口的内容，继续介绍LangChain4j实现简单的前端页面，达成与大模型的可视化聊天功能。

二、步骤

1. 使用vite创建前端项目

前端项目创建方式：https://blog.csdn.net/2401_84926677/article/details/151410780

2. 下载安装依赖

3. 安装vue-router@4

npm install vue-router@4

4. main.js

// 导入Vue核心库和根组件App.vue
import { createApp } from 'vue'
import App from './App.vue'
// 导入路由配置
import router from './router'
// 创建Vue应用实例
const app = createApp(App)
// 安装路由插件
app.use(router)
// 挂载应用到DOM元素#app
app.mount('#app')

5. 创建views和router文件夹

分别创建index.js配置路由和ChatView.vue聊天页面

6. router/index.js

// 导入Vue Router相关函数和聊天页面组件
import { createRouter, createWebHistory } from 'vue-router'
import ChatView from '../views/ChatView.vue'
// 定义路由配置数组
const routes = [{// 根路径路由path: '/',// 路由名称name: 'Chat',// 对应的组件component: ChatView}
]
// 创建路由实例
const router = createRouter({// 使用HTML5 History模式history: createWebHistory(),// 路由配置routes
})
// 导出router实例供main.js使用
export default router

7. ChatView.vue

前端实现后端接口适配的流式响应

html部分

javascript部分

<script setup>
// 导入Vue的响应式API
import { ref, nextTick } from 'vue'
// 响应式数据定义
const messages = ref([])           // 聊天记录
const userInput = ref('')          // 用户输入内容
const isLoading = ref(false)       // 加载状态
const messagesContainer = ref(null) // 消息容器引用
/*** 发送消息到后端API* 处理用户输入，调用后端接口，并流式显示返回结果*/
const sendMessage = async () => {// 验证输入内容和加载状态if (!userInput.value.trim() || isLoading.value) return// 添加用户消息到聊天记录messages.value.push({type: 'user',content: userInput.value})// 保存用户输入并清空输入框const messageToSend = userInput.valueuserInput.value = ''isLoading.value = true// 滚动到底部await scrollToBottom()try {// 调用后端API，发送用户消息const response = await fetch(`/api/chat?message=${encodeURIComponent(messageToSend)}`)const reader = response.body.getReader()const decoder = new TextDecoder('utf-8')// 添加AI消息占位符messages.value.push({type: 'ai',content: ''})// 滚动到底部await scrollToBottom()// 逐步读取流数据并更新消息while (true) {const { done, value } = await reader.read()if (done) breakconst chunk = decoder.decode(value, { stream: true })messages.value[messages.value.length - 1].content += chunk// 每次更新后滚动到底部await scrollToBottom()}} catch (error) {// 错误处理console.error('Error:', error)messages.value[messages.value.length - 1].content = '抱歉，发生错误，请稍后重试。'} finally {// 重置加载状态isLoading.value = false}
}
/*** 滚动到聊天记录底部* 确保最新消息始终可见*/
const scrollToBottom = async () => {await nextTick()if (messagesContainer.value) {messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight}
}
</script>

8. App.vue

<script setup>
/* 根组件，使用setup语法糖 */
</script>

9. 运行项目

10. 页面效果

测试

流式输出正常：