我的知识库

Appearance

《VUE3 应用开发》期末大作业说明书 ​

一、 项目背景与目标 ​

项目名称：校园活动报名小助手 (Campus Event Hub)

项目简介：

这是一个模拟校园社团或班级活动管理的 单页 Web 应用。系统采用“伪多页”设计，底部设有导航栏，用户可以在 “活动广场” 和 “个人中心” 两个界面间切换。

学习目标：

通过本项目，考核大家对 Vue 3 基础知识的综合运用能力，重点包括：响应式数据 (reactive)、列表渲染 (v-for)、表单双向绑定 (v-model)、条件渲染 (v-show) 以及计算属性 (computed) 的使用。

二、 功能需求详解 ​

本项目包含一个主页面 (App.vue) 和一个子组件 (Header.vue)。虽然逻辑都在一个文件中，但在视觉上需要实现两个页面的切换效果。

1. 公共模块 ​

  • 顶部标题栏：页面顶部需固定显示“校园活动报名小助手”标题（必须作为一个独立的组件引入）。
  • 底部导航栏：页面底部需有两个按钮：“活动广场”和“个人中心”。
    • 功能要求：点击按钮，页面中间的主体内容区域应在“首页”和“我的”之间切换。
    • 状态要求：被选中的按钮需要高亮显示（例如变色或加粗）。

2. 页面一：活动广场 (Home) ​

这是系统的核心业务区，包含三个子功能：

  • A. 活动统计：
    • 在页面顶部实时显示当前正在报名的活动总数（例如：“当前共有 5 个活动”）。
    • 技术要求：必须使用 computed 计算属性来实现。
  • B. 发布活动：
    • 提供输入框让用户输入“活动名称”和“活动时间”。
    • 智能发布人（重点）：发布时，系统需自动读取 当前登录用户 的姓名作为发布人，不需要用户手动输入发布人名字。
    • 点击“立即发布”按钮后，新活动应立即出现在下方的列表中。
  • C. 活动列表：
    • 展示所有活动卡片，每张卡片需包含：活动名称、时间、发布人。
    • 删除功能：每行活动后面有一个“删除”按钮，点击后移除该条活动数据。

3. 页面二：个人中心 (Mine) ​

这是用户管理区，用于模拟多用户环境：

  • A. 个人信息设置：
    • 展示“当前登录用户”的昵称。
    • 提供一个输入框，允许用户修改自己的昵称。
    • 联动效果：修改昵称后，再去“活动广场”发布活动，发布人名字应变为修改后的新名字。
  • B. 切换账号 (模拟登录)：
    • 展示一个预置的用户列表（如：张社长、李班长、王同学）。
    • 点击列表中的某个人，系统将 “当前登录用户” 切换为该用户。
    • 联动效果：切换账号后，首页发布区的“当前发布人”应自动更新为新账号的名字。

4. 页面参考 ​

`

三、 技术实现要求 (Constraints) ​

为了保证大家能利用已学知识完成，本项目有以下严格的技术限制：

  1. 工程结构：
    • 必须使用 Vite 创建 Vue 3 项目。
    • 必须创建一个子组件 src/components/Header.vue (用于显示标题)。
    • 核心逻辑和页面布局编写在 src/App.vue 中。
  2. 数据管理：
    • 禁止使用 onMounted 或后台接口。请直接在 App.vue 中使用 reactive 定义初始数据（直接写死 2-3 条活动数据和 3 个用户数据作为默认值）。
    • 禁止使用 Vue Router (路由)。页面切换 必须 使用 v-show 或 v-if 指令控制 DOM 的显示与隐藏。
  3. 核心指令使用：
    • 列表渲染必须使用 v-for。
    • 表单输入必须使用 v-model。
    • 事件触发必须使用 v-on (或 @)。
    • 样式绑定建议使用 :class。

四、 推荐实现步骤 ​

  1. 搭建骨架：

    • 创建 Header.vue 并在 App.vue 中引入。
    • 在 App.vue 中写好底部导航栏的 HTML 结构。

  2. 设计数据结构：

    • 在 setup 中使用 reactive 定义一个大对象 data，建议结构如下：
    const data = reactive({
  currentView: 'home',      // 控制显示哪个页面
  currentUser: { ... },     // 存放当前登录人的对象
  users: [ ... ],           // 存放所有可切换的账号数组
  activities: [ ... ],      // 存放活动列表数组
  newActivity: { ... }      // 存放输入框绑定的临时数据
})

  3. 实现页面切换：

    • 使用 v-show="data.currentView === 'home'" 来控制活动广场 div 的显示。
    • 给底部导航按钮绑定点击事件，修改 data.currentView 的值。

  4. 开发业务逻辑：

    • 完成列表展示 (v-for)。
    • 完成删除功能 (数组 splice 方法)。
    • 完成发布功能 (数组 push 方法，注意 publisher 字段要取 data.currentUser.name)。
    • 完成切换用户功能 (将点击的用户赋值给 data.currentUser)。

五、 评分标准 (总分 100 分) ​

评分维度具体考核点分值
基础运行项目能正常启动，无控制台报错，成功引入并显示了 Header 组件。15分
视图交互底部导航栏能正常点击，页面切换流畅，且切换回来后输入框内容不丢失（v-show特性）。15分
列表功能首页能正确渲染活动列表，且必须包含“发布人”信息；点击删除能移除数据。25分
发布逻辑(核心难点) 发布新活动时，能自动获取“当前登录人”的姓名作为发布人，无需手动输入。20分
用户系统个人中心能修改昵称；点击用户列表能切换当前身份，且首页的“当前发布人”随之改变。15分
计算属性页面顶部能通过 computed 正确显示当前的活动总数。5分
代码规范代码缩进整齐，没有多余的死代码，界面布局工整。5分

六、 提交方式 ​

  1. 提交内容：请将项目文件夹打包为 .zip 格式（请务必删除 node_modules 文件夹，否则文件过大）。
  2. 提交时间：请于第 16 周周五前提交至教学平台。
  3. 命名格式：学号_姓名_Vue大作业.zip。

老师寄语：

这个作业看起来功能很多，但其实核心代码只有 100 行左右。请大家参考课件中的 v-model 和 v-for 的用法。重点在于理解数据是如何在页面间共享的（因为它们都在 App.vue 的同一个 data 对象里）。祝大家编码愉快！