完善机器人:让 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 更加智能!💡