【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.value
  userInput.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) break
      const 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. 页面效果

测试

流式输出正常：