当前位置：首页 > article >正文

完善机器人：让 DeepSeek 使用Vue Element UI快速搭建 AI 交互页面

article 2025/3/15 16:55:13

在前两篇文章中，我们已经使用 AI 生成了 Java API，并创建了一个简单的 HTML + JavaScript 网页，让用户可以与 AI 机器人聊天。但如果我们想要一个更美观、更专业的交互界面，该怎么办呢？🤔

本篇文章，我们将利用 Vue 3 + Element Plus，快速搭建一个 现代化 AI 聊天机器人网页，让交互体验更加流畅！🚀

一、准备 Vue 3 项目环境

首先，我们需要 创建一个 Vue 3 项目，并安装 Element Plus 组件库。

1. 创建 Vue 3 项目

在终端运行以下命令（确保已安装 node.js）：

npm create vite@latest ai-chat --template vue
cd ai-chat
npm install

2. 安装 Element Plus

npm install element-plus
npm install axios

3. 启动开发服务器

npm run dev

现在，我们已经创建好了 Vue 3 项目，并成功安装了 Element Plus。🎉

二、让 DeepSeek 生成 Vue 代码

💬 示例指令：

“请用 Vue 3 + Element Plus 实现一个 AI 聊天页面，支持用户输入、发送按钮、AI 回复，并调用 API（http://localhost:8080/api/chat）获取回答。”

DeepSeek 可能会返回如下代码：

1. 修改 `App.vue`

打开 src/App.vue，替换为以下代码：

<template>
  <div class="chat-container">
    <h2>AI 机器人聊天</h2>
    <el-card class="chat-box">
      <div v-for="(message, index) in messages" :key="index" class="chat-message">
        <p><strong>{{ message.sender }}：</strong> {{ message.text }}</p>
      </div>
    </el-card>
    
    <el-input v-model="userInput" placeholder="请输入您的问题..." @keyup.enter="sendMessage" />
    <el-button type="primary" @click="sendMessage">发送</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const userInput = ref("");
const messages = ref([]);

const sendMessage = async () => {
  if (!userInput.value.trim()) return;

  messages.value.push({ sender: "你", text: userInput.value });

  try {
    const response = await axios.post("http://localhost:8080/api/chat", {
      message: userInput.value,
    });

    messages.value.push({ sender: "AI", text: response.data });
  } catch (error) {
    messages.value.push({ sender: "AI", text: "出错了，请稍后再试！" });
  }

  userInput.value = "";
};
</script>

<style>
.chat-container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}
.chat-box {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
}
.chat-message {
  text-align: left;
  margin: 5px 0;
}
</style>

🔹 代码解析：
✅ el-card 作为聊天窗口，存放 AI 对话
✅ el-input 让用户输入问题
✅ el-button 触发 sendMessage()，调用后端 API
✅ axios.post() 发送 HTTP 请求到后端
✅ messages 存储聊天记录，动态渲染对话

三、运行 AI 聊天网站

1. 启动后端 API

确保 Spring Boot 服务器运行，API 访问地址为：
👉 http://localhost:8080/api/chat

2. 启动 Vue 项目

在 Vue 目录下运行：

npm run dev

然后在浏览器打开：
👉 http://localhost:5173/

你就可以在网页上与 AI 聊天了！🎉🎉

四、优化交互体验

目前，我们的 AI 机器人已经能聊天，但如果页面更炫酷、体验更流畅，会不会更吸引人呢？

1. 让 AI 生成更好的样式

💬 示例指令：

“请优化 Vue 3 AI 机器人聊天页面的 UI，使其更现代化，并加上 loading 动画。”

DeepSeek 可能会返回如下优化代码：

<template>
  <div class="chat-container">
    <h2>🌟 AI 机器人聊天 🌟</h2>
    
    <el-card class="chat-box">
      <div v-for="(message, index) in messages" :key="index" class="chat-message">
        <p :class="{ 'user-message': message.sender === '你', 'ai-message': message.sender === 'AI' }">
          <strong>{{ message.sender }}：</strong> {{ message.text }}
        </p>
      </div>
      <p v-if="loading" class="loading">AI 正在思考...</p>
    </el-card>
    
    <el-input v-model="userInput" placeholder="请输入您的问题..." @keyup.enter="sendMessage" />
    <el-button type="primary" :disabled="loading" @click="sendMessage">
      {{ loading ? "处理中..." : "发送" }}
    </el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const userInput = ref("");
const messages = ref([]);
const loading = ref(false);

const sendMessage = async () => {
  if (!userInput.value.trim() || loading.value) return;

  messages.value.push({ sender: "你", text: userInput.value });
  loading.value = true;

  try {
    const response = await axios.post("http://localhost:8080/api/chat", {
      message: userInput.value,
    });

    messages.value.push({ sender: "AI", text: response.data });
  } catch (error) {
    messages.value.push({ sender: "AI", text: "出错了，请稍后再试！" });
  } finally {
    loading.value = false;
  }

  userInput.value = "";
};
</script>

<style>
.chat-container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}
.chat-box {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
  background: #f9f9f9;
}
.chat-message {
  text-align: left;
  margin: 10px 0;
}
.user-message {
  color: blue;
}
.ai-message {
  color: green;
}
.loading {
  color: gray;
  font-style: italic;
}
</style>

🔹 优化点：
✅ 添加 Loading 提示，让用户知道 AI 在思考
✅ 区分用户和 AI 颜色，让对话更清晰
✅ 美化聊天窗口，更符合现代 UI 设计