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

在前两篇文章中，我们已经使用 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 设计

五、总结：AI 让前端开发更高效！

通过 AI，我们可以 快速生成 Vue 代码 ，并结合 Element UI 美化界面，最终实现一个完整的 AI 聊天机器人网页！🚀

🌟 复习本系列文章 🌟

✅ 第一篇 ：用 DeepSeek 生成 Java代码，实现一个简单的问答机器人

✅ 第二篇 ：完善机器人：让 DeepSeek 生成 API 接口，并在网页上调用

✅ 第三篇（本篇）：完善机器人：让 DeepSeek 使用Vue Element UI快速搭建 AI 交互页面

这样，我们就 从零到一 搭建了一个完整的 AI 机器人！🎉🎉

下一步 ？你可以尝试 添加更多 AI 功能 ，比如 语音输入、图片生成 等，让你的 AI 更加智能！💡