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

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


http://www.kler.cn/a/585785.html

相关文章:

  • 【Linux系统编程】管道
  • 什么是mysql索引回表?
  • 杨辉三角形(信息学奥赛一本通-2043)
  • 智慧应急消防解决方案(35页PPT)(文末有下载方式)
  • doris:SQL 方言兼容
  • 【0x80070666】-已安装另一个版本...(Tableau 安装失败)
  • 裸机开发-GPIO外设
  • Android的第一次面试(Java篇)
  • 为什么 JPA 可以通过 findByNameContaining 自动生成 SQL 语句?
  • 如何在PHP中实现数据加密与解密:保护敏感信息
  • 小语言模型(SLM)技术解析:如何在有限资源下实现高效AI推理
  • 《CircleCI:CircleCI:解锁软件开发持续集成(CI)和持续部署(CD)高效密码》:此文为AI自动生成
  • Windows 上安装配置 Maven
  • WVP前后端部署
  • Java 大视界 -- Java 大数据分布式计算中的资源调度与优化策略(131)
  • 基于Python的物联网智慧农业数据采集与管理系统设计方案
  • 登录认证-登录校验-Filter
  • c++常用的算术生成算法
  • Kotlin apply 方法的用法和使用场景
  • Windows10安装Rust 和ZED(失败)