一、引入
首先可以先看下作者的文章
- FastApi相關文章：創建最簡單FastApi的項目
- Vue相關文章：最簡單的aixos二次封裝
- Langchain相關文章：如何使用LangSmith跟蹤deepseek模型
二、后端搭建
1 項目文件結構
- routers：存放api接口
- service：存放實際操作函數
- init.py: 掛載接口
- main：運行程序
2 創建聊天接口
3 創建chatService
一定要配置代理和模型密鑰
4 掛載接口
5 運行主函數
三、前端搭建
1 創建axios實例
2 創建請求
3 發送請求
4 界面布局
界面布局的源代碼
<template><div class="chat-container"><div class="timeline-container"><el-timeline><el-timeline-itemv-for="(activity, index) in activities":key="index":icon="activity.icon":type="activity.type":color="activity.color":size="activity.size":hollow="activity.hollow":timestamp="activity.timestamp">{{ activity.content }}</el-timeline-item></el-timeline></div><div id="container" class="input-container"><div id="chat" class="chat-input"><el-inputv-model="msg"input-style="width: calc(100% - 80px); height: 60px; border-radius: 8px;":rows="2"type="text"placeholder="請輸入消息"@keydown.enter="sendMsg();"/><el-button @click="sendMsg()" class="send-button">發送</el-button></div></div></div>
</template>
<script setup>
import { MoreFilled } from '@element-plus/icons-vue'
import {ref, onMounted} from "vue";
import {getChat} from '@/api/chat'const activities = ref([{content: '請問有什么可以幫您的?',timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),color: '#0bbd87',},
]);const msg = ref('');const sendMsg = () => {activities.value.push({content: `你:${msg.value}`,timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),size: 'large',type: 'primary',icon: MoreFilled,},);activities.value.push({content: 'waiting...',timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),color: '#0bbd87',},);getChat(msg.value).then(res => {activities.value.pop();activities.value.push({content: res.data,timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),color: '#0bbd87',},);});msg.value = '';
};
</script>
<style scoped>.chat-container {background-color: #A8C9D4;padding: 10px;border-radius: 8px;width: 600px;height: 500px;display: flex;flex-direction: column;}.timeline-container {height: 600px;width: 100%;overflow-y: auto;border: 1px solid #1e7ba2;border-radius: 8px;padding: 10px;}.input-container {margin-top: 10px;}.chat-input {display: flex;align-items: center;}.send-button {margin-left: 10px;height: 60px;border-radius: 8px;}
</style>
5 配置代理
四、展示效果
五、源代碼
源代碼地址：天才奇男子/學習筆記
