前端开发实战：Vue.js调用Baichuan-M2-32B医疗咨询接口-育师

前端开发实战：Vue.js调用Baichuan-M2-32B医疗咨询接口

1. 医疗AI应用场景与需求分析

在医疗健康领域，智能咨询系统正在改变传统的医患交互方式。通过集成先进的大语言模型，前端应用能够为用户提供即时、专业的医疗建议和健康指导。Baichuan-M2-32B作为专为医疗场景优化的开源模型，在HealthBench评测中表现优异，特别适合构建医疗咨询类应用。

这类应用的核心需求包括：友好的用户界面设计、实时流畅的对话体验、对话历史管理、以及安全可靠的信息展示。Vue.js作为现代前端框架，以其响应式特性和组件化架构，成为构建此类应用的理想选择。

2. 技术架构与环境准备

2.1 基础技术栈

构建医疗咨询前端应用需要以下技术组件：

Vue 3组合式API：提供更好的类型支持和代码组织
TypeScript：增强代码可靠性和开发体验
Axios：处理HTTP请求和API调用
Element Plus或Ant Design Vue：UI组件库
Vue Router：单页面应用路由管理

2.2 项目初始化

首先创建Vue项目并安装必要依赖：

npm create vue@latest medical-consultation-app cd medical-consultation-app npm install npm install axios element-plus @element-plus/icons-vue

配置TypeScript支持以确保类型安全：

// tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }

3. API接口封装与配置

3.1 配置API基础设置

创建API配置文件，封装Baichuan-M2-32B的调用逻辑：

// src/api/config.ts export const API_CONFIG = { baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8000', timeout: 30000, headers: { 'Content-Type': 'application/json', }, }; export interface MedicalConsultationRequest { messages: Array<{ role: 'user' | 'assistant' | 'system'; content: string; }>; max_tokens?: number; temperature?: number; } export interface MedicalConsultationResponse { id: string; choices: Array<{ message: { role: string; content: string; }; finish_reason: string; }>; usage: { prompt_tokens: number; completion_tokens: number; total_tokens: number; }; }

3.2 实现API服务层

创建专门的API服务类处理医疗咨询请求：

// src/api/medicalService.ts import axios from 'axios'; import { API_CONFIG, MedicalConsultationRequest, MedicalConsultationResponse } from './config'; class MedicalService { private axiosInstance; constructor() { this.axiosInstance = axios.create(API_CONFIG); // 请求拦截器 this.axiosInstance.interceptors.request.use( (config) => { console.log('发送医疗咨询请求:', config); return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器 this.axiosInstance.interceptors.response.use( (response) => { console.log('收到医疗咨询响应:', response); return response; }, (error) => { console.error('医疗咨询请求错误:', error); return Promise.reject(error); } ); } async consult(request: MedicalConsultationRequest): Promise<MedicalConsultationResponse> { try { const response = await this.axiosInstance.post('/v1/chat/completions', request); return response.data; } catch (error) { throw new Error(`医疗咨询请求失败: ${error instanceof Error ? error.message : '未知错误'}`); } } // 流式响应处理 async consultStream( request: MedicalConsultationRequest, onMessage: (content: string) => void, onComplete: () => void, onError: (error: Error) => void ) { try { const response = await fetch(`${API_CONFIG.baseURL}/v1/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...request, stream: true, }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const reader = response.body?.getReader(); const decoder = new TextDecoder(); if (!reader) { throw new Error('无法读取响应流'); } while (true) { const { done, value } = await reader.read(); if (done) { onComplete(); break; } const chunk = decoder.decode(value); const lines = chunk.split('\n').filter(line => line.trim() !== ''); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); if (data === '[DONE]') { onComplete(); return; } try { const parsed = JSON.parse(data); const content = parsed.choices[0]?.delta?.content; if (content) { onMessage(content); } } catch (e) { console.warn('解析流式响应失败:', e); } } } } } catch (error) { onError(error instanceof Error ? error : new Error('流式请求失败')); } } } export const medicalService = new MedicalService();

4. Vue组件设计与实现

4.1 医疗咨询主界面组件

创建主要的医疗咨询界面组件：

<template> <div class="medical-consultation"> <div class="header"> <h1>智能医疗咨询</h1> <p>基于Baichuan-M2-32B的专业医疗建议</p> </div> <div class="chat-container"> <div class="messages" ref="messagesRef"> <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]" > <div class="avatar"> <el-icon v-if="message.role === 'user'"><User /></el-icon> <el-icon v-else><FirstAidKit /></el-icon> </div> <div class="content"> <div class="text" v-html="formatMessage(message.content)"></div> <div class="timestamp">{{ formatTime(message.timestamp) }}</div> </div> </div> <div v-if="isLoading" class="message assistant loading"> <div class="avatar"> <el-icon><FirstAidKit /></el-icon> </div> <div class="content"> <div class="thinking">思考中<span class="dots">...</span></div> </div> </div> </div> <div class="input-area"> <el-input v-model="userInput" type="textarea" :rows="3" placeholder="请输入您的医疗咨询问题..." @keydown.enter="handleSend" :disabled="isLoading" /> <el-button type="primary" :loading="isLoading" @click="handleSend" class="send-button" > 发送 </el-button> </div> </div> <div class="sidebar"> <div class="history-section"> <h3>咨询历史</h3> <el-scrollbar> <div v-for="(session, index) in historySessions" :key="index" class="history-item" @click="loadSession(session)" > <div class="session-title">{{ session.title }}</div> <div class="session-time">{{ formatSessionTime(session.timestamp) }}</div> </div> </el-scrollbar> </div> </div> </div> </template> <script setup lang="ts"> import { ref, onMounted, nextTick } from 'vue' import { ElMessage } from 'element-plus' import { User, FirstAidKit } from '@element-plus/icons-vue' import { medicalService } from '@/api/medicalService' interface Message { role: 'user' | 'assistant' content: string timestamp: Date } interface ChatSession { id: string title: string messages: Message[] timestamp: Date } const userInput = ref('') const messages = ref<Message[]>([]) const isLoading = ref(false) const messagesRef = ref<HTMLElement>() // 初始化示例对话 onMounted(() => { messages.value = [ { role: 'assistant', content: '您好！我是您的智能医疗助手。我可以为您提供健康咨询、症状分析、用药建议等医疗服务。请注意，我的建议不能替代专业医生的诊断，如有紧急情况请及时就医。', timestamp: new Date() } ] }) const scrollToBottom = () => { nextTick(() => { if (messagesRef.value) { messagesRef.value.scrollTop = messagesRef.value.scrollHeight } }) } const formatMessage = (content: string) => { // 简单的格式化处理 return content.replace(/\n/g, '<br>') } const formatTime = (date: Date) => { return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) } const formatSessionTime = (date: Date) => { return date.toLocaleDateString('zh-CN') } const handleSend = async () => { if (!userInput.value.trim() || isLoading.value) return const userMessage: Message = { role: 'user', content: userInput.value.trim(), timestamp: new Date() } messages.value.push(userMessage) userInput.value = '' isLoading.value = true scrollToBottom() try { let assistantResponse = '' await medicalService.consultStream( { messages: [ { role: 'system', content: '你是一个专业的医疗助手，提供准确、谨慎的医疗建议。强调需要专业医生诊断的重要性。' }, ...messages.value.map(msg => ({ role: msg.role, content: msg.content })) ], max_tokens: 1000, temperature: 0.7 }, (content) => { assistantResponse += content // 更新最后一条消息内容 if (messages.value[messages.value.length - 1]?.role === 'assistant') { messages.value[messages.value.length - 1].content = assistantResponse } else { messages.value.push({ role: 'assistant', content: assistantResponse, timestamp: new Date() }) } scrollToBottom() }, () => { isLoading.value = false scrollToBottom() }, (error) => { ElMessage.error(`咨询失败: ${error.message}`) isLoading.value = false } ) } catch (error) { ElMessage.error('咨询请求失败，请稍后重试') isLoading.value = false } } // 历史会话相关功能 const historySessions = ref<ChatSession[]>([]) const loadSession = (session: ChatSession) => { messages.value = session.messages scrollToBottom() } </script> <style scoped> .medical-consultation { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; gap: 20px; height: 100vh; padding: 20px; background: #f5f7fa; } .header { grid-column: 1 / -1; text-align: center; padding: 20px; } .chat-container { display: flex; flex-direction: column; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); overflow: hidden; } .messages { flex: 1; padding: 20px; overflow-y: auto; max-height: 60vh; } .message { display: flex; margin-bottom: 20px; gap: 12px; } .message.user { flex-direction: row-reverse; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: #409eff; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .message.user .avatar { background: #67c23a; } .content { max-width: 70%; background: #f5f7fa; padding: 12px 16px; border-radius: 12px; position: relative; } .message.user .content { background: #409eff; color: white; } .timestamp { font-size: 12px; color: #909399; margin-top: 4px; } .message.user .timestamp { color: rgba(255, 255, 255, 0.8); } .input-area { padding: 20px; border-top: 1px solid #ebeef5; display: flex; gap: 12px; align-items: flex-end; } .send-button { height: 88px; } .sidebar { background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); padding: 20px; } .history-section h3 { margin-bottom: 16px; color: #303133; } .history-item { padding: 12px; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s; } .history-item:hover { background: #f5f7fa; } .session-title { font-weight: 500; margin-bottom: 4px; } .session-time { font-size: 12px; color: #909399; } .thinking { color: #909399; font-style: italic; } .dots { animation: blink 1.4s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } </style>

4.2 医疗咨询功能增强组件

创建专门的医疗咨询功能组件，增强用户体验：

<template> <div class="medical-features"> <div class="quick-questions"> <h4>常见问题</h4> <el-space wrap> <el-tag v-for="(question, index) in quickQuestions" :key="index" type="info" effect="dark" @click="selectQuestion(question)" class="question-tag" > {{ question }} </el-tag> </el-space> </div> <div class="safety-notice"> <el-alert title="重要提示" type="warning" :closable="false" description="本咨询服务仅供参考，不能替代专业医疗诊断。如有紧急情况，请立即就医或拨打急救电话。" /> </div> <div class="consultation-tips"> <h4>咨询建议</h4> <ul> <li>详细描述您的症状和持续时间</li> <li>提供相关的医疗历史和用药情况</li> <li>如有图片资料（如皮疹、伤口），可准备描述</li> <li>保持网络通畅以获得最佳咨询体验</li> </ul> </div> </div> </template> <script setup lang="ts"> const emit = defineEmits(['question-selected']) const quickQuestions = [ '感冒了怎么办？', '头痛应该吃什么药？', '如何预防高血压？', '糖尿病饮食要注意什么？', '运动损伤如何处理？' ] const selectQuestion = (question: string) => { emit('question-selected', question) } </script> <style scoped> .medical-features { padding: 20px; background: white; border-radius: 12px; margin-top: 20px; } .quick-questions { margin-bottom: 20px; } .quick-questions h4 { margin-bottom: 12px; color: #303133; } .question-tag { cursor: pointer; transition: transform 0.2s; } .question-tag:hover { transform: translateY(-2px); } .safety-notice { margin-bottom: 20px; } .consultation-tips h4 { margin-bottom: 12px; color: #303133; } .consultation-tips ul { color: #606266; line-height: 1.6; } .consultation-tips li { margin-bottom: 8px; } </style>

5. 状态管理与数据持久化

5.1 Pinia状态管理

使用Pinia管理应用状态：

// src/stores/medicalStore.ts import { defineStore } from 'pinia' import { ref } from 'vue' export interface ChatMessage { id: string role: 'user' | 'assistant' content: string timestamp: Date } export interface ChatSession { id: string title: string messages: ChatMessage[] createdAt: Date updatedAt: Date } export const useMedicalStore = defineStore('medical', () => { const currentSession = ref<ChatSession | null>(null) const sessions = ref<ChatSession[]>([]) const isLoading = ref(false) // 创建新会话 const createNewSession = () => { const newSession: ChatSession = { id: Date.now().toString(), title: '新会话', messages: [], createdAt: new Date(), updatedAt: new Date() } currentSession.value = newSession sessions.value.unshift(newSession) saveToLocalStorage() } // 添加消息到当前会话 const addMessage = (message: Omit<ChatMessage, 'id'>) => { if (!currentSession.value) { createNewSession() } const newMessage: ChatMessage = { ...message, id: Date.now().toString() } currentSession.value!.messages.push(newMessage) currentSession.value!.updatedAt = new Date() // 更新会话标题（使用第一条用户消息） if (message.role === 'user' && currentSession.value.messages.length === 1) { currentSession.value.title = message.content.slice(0, 30) + (message.content.length > 30 ? '...' : '') } saveToLocalStorage() } // 加载会话 const loadSession = (sessionId: string) => { const session = sessions.value.find(s => s.id === sessionId) if (session) { currentSession.value = session } } // 删除会话 const deleteSession = (sessionId: string) => { sessions.value = sessions.value.filter(s => s.id !== sessionId) if (currentSession.value?.id === sessionId) { currentSession.value = sessions.value[0] || null } saveToLocalStorage() } // 本地存储 const saveToLocalStorage = () => { localStorage.setItem('medicalSessions', JSON.stringify({ sessions: sessions.value, currentSessionId: currentSession.value?.id })) } const loadFromLocalStorage = () => { const data = localStorage.getItem('medicalSessions') if (data) { try { const parsed = JSON.parse(data) sessions.value = parsed.sessions.map((s: any) => ({ ...s, createdAt: new Date(s.createdAt), updatedAt: new Date(s.updatedAt), messages: s.messages.map((m: any) => ({ ...m, timestamp: new Date(m.timestamp) })) })) if (parsed.currentSessionId) { currentSession.value = sessions.value.find(s => s.id === parsed.currentSessionId) || null } } catch (error) { console.error('加载本地存储失败:', error) } } } return { currentSession, sessions, isLoading, createNewSession, addMessage, loadSession, deleteSession, loadFromLocalStorage, saveToLocalStorage } })

6. 错误处理与用户体验优化

6.1 全局错误处理

实现全局错误处理机制：

// src/utils/errorHandler.ts import { ElMessage } from 'element-plus' export class MedicalError extends Error { constructor( message: string, public code?: string, public details?: any ) { super(message) this.name = 'MedicalError' } } export const handleError = (error: unknown) => { if (error instanceof MedicalError) { switch (error.code) { case 'NETWORK_ERROR': ElMessage.error('网络连接失败，请检查网络设置') break case 'API_ERROR': ElMessage.error('服务暂时不可用，请稍后重试') break case 'TIMEOUT_ERROR': ElMessage.error('请求超时，请检查网络状况') break default: ElMessage.error(error.message || '发生未知错误') } } else if (error instanceof Error) { ElMessage.error(error.message) } else { ElMessage.error('发生未知错误') } console.error('Medical error:', error) } // 在main.ts中设置全局错误处理 export const setupErrorHandling = (app: any) => { app.config.errorHandler = (err: unknown) => { handleError(err) } window.addEventListener('unhandledrejection', (event) => { handleError(event.reason) event.preventDefault() }) }

6.2 用户体验优化措施

实现加载状态、重试机制等用户体验优化：

<template> <div class="loading-overlay" v-if="loading"> <div class="loading-content"> <el-icon class="loading-icon"><Loading /></el-icon> <p>正在处理您的咨询请求...</p> <p class="loading-tip">这通常需要几秒钟时间</p> </div> </div> <div class="error-retry" v-if="error"> <el-alert :title="error.title" :description="error.message" type="error" show-icon /> <el-button @click="handleRetry" type="primary" class="retry-button"> 重试 </el-button> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import { Loading } from '@element-plus/icons-vue' interface ErrorInfo { title: string message: string } const loading = ref(false) const error = ref<ErrorInfo | null>(null) const handleRetry = () => { error.value = null // 重试逻辑 } </script> <style scoped> .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-content { text-align: center; } .loading-icon { font-size: 48px; color: #409eff; animation: spin 1s linear infinite; } .loading-tip { color: #909399; font-size: 14px; margin-top: 8px; } .error-retry { padding: 20px; text-align: center; } .retry-button { margin-top: 16px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style>