基于deepseek的小学生智能题目生成问答系统（八）

FindWuShuang

875人浏览 · 2025-06-15 23:50:27

FindWuShuang · 2025-06-15 23:50:27 发布

一、阶段目标

这个阶段，我们致力于实现一个功能丰富的Vue学习助手系统，包含三个核心组件：公告栏(Announcement)、智能宠物球(PetBall)和个人中心(Personal)。这些组件共同为用户提供了流畅的学习体验，包含系统通知、互动宠物助手和个人信息管理等功能。

二、公告栏组件

        功能特点：
        垂直轮播展示系统公告
        平滑的CSS过渡动画效果
        自动循环播放（每3秒切换一次）

关键代码解析：

<template>
  <div class="announcement-container">
    <div class="announcement-content" :style="{ transform: `translateY(-${currentIndex * 40}px)` }">
      <div v-for="(notice, index) in notices" :key="index" class="notice-item">
        {{ notice.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [
        { content: '欢迎使用在线答题系统！' },
        // 其他公告...
      ],
      currentIndex: 0,
      timer: null
    }
  },
  mounted() {
    this.startScroll() // 组件挂载后启动轮播
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.notices.length
      }, 3000) // 每3秒切换公告
    }
  }
}
</script>

        实现原理：
                使用CSS transform的translateY属性实现垂直滚动
                通过定时器动态修改currentIndex实现轮播
                每个公告项高度固定为40px，计算偏移量

二、 PetBall.vue - 智能宠物球组件
        功能亮点：
                可拖拽的浮动宠物球
                显示实时时间和天气信息
                随机对话功能
                跳跃动画效果

关键技术点：

<script setup>
// 拖拽功能实现
const startDrag = (e) => {
  isDragging = true;
  dragOffset = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y
  };
  document.addEventListener('mousemove', onDrag);
};

// 获取天气信息
const getWeather = async () => {
  try {
    const ipResponse = await axios.get('https://api.ipify.org?format=json');
    const ip = ipResponse.data.ip;
    const weatherResponse = await axios.get(`https://api.qweather.com/v7/weather/now`, {
      params: { key: 'API_KEY', location: ip }
    });
    // 处理天气数据...
  } catch (error) {
    // 错误处理
  }
};

// 宠物说话功能
const speak = () => {
  showDialog.value = true;
  isSpeaking.value = true;
  currentDialog.value = dialogs[Math.floor(Math.random() * dialogs.length)];
  setTimeout(() => {
    showDialog.value = false;
  }, 2000);
};
</script>

功能实现：

                拖拽功能：通过mousedown、mousemove和mouseup事件实现
                天气获取：先通过IP定位API获取位置，再请求天气API
                动画效果：使用CSS动画实现跳跃、眨眼和说话效果
                时间显示：每秒更新当前时间
        具体功能效果展示：
                在未点击桌宠时，它会自动循环多个信息，便于和同学们进行互动

当点击桌宠时，它会有跳跃的动态效果展示，并之后显示出当前的时间日期及天气

桌宠还能实现拖动的效果展示，这里不便动态演示，只演示它在板边和中心的效果展示

三、 Personal.vue - 个人中心组件
        功能模块：
                用户信息展示（头像、名称、邮箱）
                功能导航（我的对话、题目、错题集、学习报告）
                最近活动记录
                学习统计图表
                头像上传功能

关键功能实现：

<script setup>
// 头像上传处理
const handleFileChange = async (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    avatarUrl.value = e.target.result; // 预览新头像
  };
  reader.readAsDataURL(file);
  await uploadAvatar(file); // 上传到服务器
};

// 头像上传API调用
const uploadAvatar = async (file) => {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("userId", userStore.id);
  
  const response = await axios.post("/api/avatar/user", formData, {
    headers: { "Content-Type": "multipart/form-data" }
  });
  
  if (response.data.code === 200) {
    userStore.updateAvatar(avatarUrl.value); // 更新全局状态
  }
};

// 退出登录
const handleLogout = () => {
  document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  userStore.clearUserInfo();
  router.push("/login");
};
</script>

UI设计特点：

                毛玻璃效果：backdrop-filter: blur(20px)
                渐变背景：background: linear-gradient(135deg, ...)
                悬停动画：卡片悬停时有轻微上浮效果
                响应式布局：适配不同屏幕尺寸
                动态徽章：会员徽章有闪烁动画
        界面显示效果展示：

同样也做到了在不同窄宽比的显示下都有不同的显示效果

比如在iPad和三星上的显示如下：

左下为iPad、右下为三星

项目亮点总结
        1.丰富的交互体验
        宠物球的拖拽、跳跃和对话功能
        公告栏的平滑轮播效果
        个人中心卡片的悬停动画
        2.实用的功能模块
        实时时间天气显示
        头像上传与预览
        学习数据统计可视化
        多维度学习报告
        3.精心设计的UI/UX
        一致的渐变色彩方案（#667eea → #764ba2）
        毛玻璃效果增强现代感
        响应式布局适配各种设备
        交互动画增强用户参与感
        健壮的错误处理
        天气API失败时使用模拟数据
        头像上传时的文件类型和大小验证
        API请求的异常捕获和处理