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 界面布局

界面布局的源代码

1. <template>
2.   <div class="chat-container">
3.     <div class="timeline-container">
4.       <el-timeline>
5.         <el-timeline-item
6.             v-for="(activity, index) in activities"
7.             :key="index"
8.             :icon="activity.icon"
9.             :type="activity.type"
10.             :color="activity.color"
11.             :size="activity.size"
12.             :hollow="activity.hollow"
13.             :timestamp="activity.timestamp"
14.         >
15.           {
16.   
17.   { activity.content }}
18.         </el-timeline-item>
19.       </el-timeline>
20.     </div>
21.     <div id="container" class="input-container">
22.       <div id="chat" class="chat-input">
23.         <el-input
24.             v-model="msg"
25.             input-style="width: calc(100% - 80px); height: 60px; border-radius: 8px;"
26.             :rows="2"
27.             type="text"
28.             placeholder="请输入消息"
29.             @keydown.enter="sendMsg();"
30.         />
31.         <el-button @click="sendMsg()" class="send-button">发送</el-button>
32.       </div>
33.     </div>
34.   </div>   
35. </template>
36. <script setup>
37. import { MoreFilled } from '@element-plus/icons-vue'
38. import {ref, onMounted} from "vue";
39. import {getChat} from '@/api/chat'
41. const activities = ref([
42.   {
43.     content: '请问有什么可以帮您的?',
44.     timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
45.     color: '#0bbd87',
46.   },
47. ]);
49. const msg = ref('');
51. const sendMsg = () => {
52.   activities.value.push(
53.     {
54.       content: `你:${msg.value}`,
55.       timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
56.       size: 'large',
57.       type: 'primary',
58.       icon: MoreFilled,
59.     },
60.   );
62.   activities.value.push(
63.     {
64.       content: 'waiting...',
65.       timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
66.       color: '#0bbd87',
67.     },
68.   );
70.   getChat(msg.value).then(res => {
71.     activities.value.pop();
72.     activities.value.push(
73.       {
74.         content: res.data,
75.         timestamp: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(),
76.         color: '#0bbd87',
77.       },
78.     );
79.   });
80.   msg.value = '';
81. };
82. </script>
83. <style scoped>
84.   .chat-container {
85.     background-color: #A8C9D4;
86.     padding: 10px;
87.     border-radius: 8px;
88.     width: 600px;
89.     height: 500px;
90.     display: flex;
91.     flex-direction: column;
92.   }
93.   .timeline-container {
94.     height: 600px;
95.     width: 100%;
96.     overflow-y: auto;
97.     border: 1px solid #1e7ba2;
98.     border-radius: 8px;
99.     padding: 10px;
100.   }
101.   .input-container {
102.     margin-top: 10px;
103.   }
104.   .chat-input {
105.     display: flex;
106.     align-items: center;
107.   }
108.   .send-button {
109.     margin-left: 10px;
110.     height: 60px;
111.     border-radius: 8px;
112.   }
113. </style>

复制代码

5 配置代理

四、展示结果

五、源代码

源代码地点：天才奇男子/学习条记

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。