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

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

news 来源：原创 2025/8/16 12:12:57

在前两篇文章中，我们已经使用 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 更加智能！💡