Langchain+FastApi+Vue前后端Ai对话(超详细)

一、引入

首先可以先看下作者的文章

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>