一、引入

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

• 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-item
            v-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-input
            v-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 配置代理

四、展示效果

五、源代码

源代码地址：天才奇男子/学习笔记