前端开发进度记录

前端开发进度记录

一、前端开发

1. 教师端前端开发

1.1 开发工作量统计

1.1.1 页面数量与功能模块

总共开发了 7 个主要页面：

• 登录页面 (Login.vue, 783行)

  • 实现功能
    • 管理员/教师双模式登录
    • 登录/注册/忘记密码三合一界面
    • 表单验证与错误处理
    • JWT 认证与状态管理
  • 技术实现
    • 使用 Element Plus 组件库
    • Vue 3 Composition API
    • 响应式表单处理
    • 路由守卫实现权限控制

• 教师主页 (TeacherHome.vue, 210行)

  • 实现功能
    • 导航菜单
    • 用户信息展示
    • 快捷操作入口
  • 技术实现
    • 响应式布局
    • 动态路由生成
    • 用户状态管理

• 教师个人中心 (Profile.vue, 270行)

  • 实现功能
    • 个人信息展示
    • 信息修改
    • 密码修改
  • 技术实现
    • 表单验证
    • 文件上传
    • 数据更新

• 学生管理 (StudentManagement.vue, 966行)

  • 实现功能
    • 学生列表展示
    • 学生添加/删除
    • 学生信息查看
    • 分页查询
    • 批量操作
  • 技术实现
    • Element Plus 表格组件
    • 分页组件
    • 批量选择功能
    • 头像显示与错误处理
    • 状态标签管理

• 作业管理 (HomeWorkManagement.vue, 833行)

  • 实现功能
    • 作业列表展示
    • 作业创建
    • 作业编辑
    • 作业发布
    • 作业统计
    • 教学分析
  • 技术实现
    • 表格组件
    • 图表展示
    • 富文本编辑器
    • 文件上传
    • 状态管理
    • 数据分析

• 作业分配管理 (AssignmentManagement.vue, 1306行)

  • 实现功能
    • 题目管理
    • 作业发布
    • 截止时间设置
    • 批量导入
    • 题目搜索
  • 技术实现
    • 复杂表单处理
    • 文件导入导出
    • 日期选择器
    • 多选组件
    • 分页查询

• 教师首页 (Home.vue, 339行)

  • 实现功能
    • 数据概览
    • 快捷操作
    • 通知提醒
  • 技术实现
    • 数据统计展示
    • 实时更新
    • 消息通知

1.1.2 代码量统计

• 视图层（views）：约 5,000 行
  • 登录模块：约 800 行
  • 学生管理：约 1,000 行
  • 作业管理：约 900 行
  • 作业分配：约 1,300 行
  • 其他页面：约 1,000 行
• 组件层（components）：约 2,000 行
  • 通用组件：约 800 行
  • 业务组件：约 1,000 行
  • 布局组件：约 200 行
• API 层：约 800 行
  • TeacherAPI.js：约 400 行
  • AdminAPI.js：约 300 行
  • 其他 API：约 100 行
• 状态管理：约 300 行
  • auth.js：约 150 行
  • user.js：约 100 行
  • teacher.js：约 50 行
• 工具类（utils）：约 500 行
  • 请求工具：约 200 行
  • 工具函数：约 200 行
  • 常量定义：约 100 行
• 路由配置：约 200 行
• 样式文件：约 1,000 行
• 配置文件：约 100 行
• 前端总计：约 9,900 行代码

1.2 技术架构

1.2.1 状态管理

• Pinia 状态管理
  • auth.js：认证相关
    • 登录状态
    • 用户信息
    • 权限控制
  • teacher.js：教师相关
    • 教师信息
    • 教学数据
  • user.js：用户相关
    • 用户信息
    • 设置管理

1.2.2 API 层

• 模块化设计
  • TeacherAPI.js：教师相关接口
    • 作业管理
    • 学生管理
    • 统计分析
  • AdminAPI.js：管理员相关接口
    • 用户管理
    • 系统配置
  • StudentAPI.js：学生相关接口
    • 作业提交
    • 成绩查询
  • user.js：用户相关接口
    • 登录注册
    • 个人信息

1.2.3 路由管理

• 基于 Vue Router 的路由管理
  • 动态路由生成
  • 路由权限控制
  • 路由懒加载
  • 路由守卫

1.3 开发特点

• 模块化开发：每个功能模块独立封装
  • 组件复用
  • 代码解耦
  • 维护性好
• 组件化设计：复用性高
  • 通用组件
  • 业务组件
  • 布局组件
• 状态管理：集中式管理
  • 数据共享
  • 状态同步
  • 响应式更新
• API 封装：统一接口管理
  • 请求拦截
  • 响应处理
  • 错误处理
• 响应式设计：适配不同设备
  • 移动端适配
  • 布局优化
  • 交互优化

1.4 技术实现细节

1.4.1 登录模块

• 实现功能
  • 用户登录
  • 表单验证
  • 错误处理
  • 登录状态管理
• 技术实现
  • 使用 Element Plus 表单组件
  • JWT 认证
  • Pinia 状态管理
  • 路由守卫

1.4.2 学生管理模块

• 实现功能
  • 学生列表展示
  • 学生添加/删除
  • 学生信息查看
  • 分页查询
• 技术实现
  • 表格组件
  • 表单验证
  • 数据筛选
  • 批量操作
  • 头像处理

1.4.3 作业管理模块

• 实现功能
  • 作业列表
  • 作业创建
  • 作业编辑
  • 作业发布
• 技术实现
  • 富文本编辑器
  • 文件上传
  • 状态管理
  • 数据分析
  • 图表展示

1.4.4 作业分配模块

• 实现功能
  • 作业分配
  • 学生选择
  • 截止时间设置
  • 状态管理
• 技术实现
  • 复杂表单处理
  • 日期选择器
  • 多选组件
  • 批量导入
  • 数据验证

1.4.5 个人中心模块

• 实现功能
  • 个人信息展示
  • 信息修改
  • 密码修改
• 技术实现
  • 表单验证
  • 文件上传
  • 数据更新
  • 安全处理

1.5 API 接口对接

• 与后端接口对接
  • RESTful API 调用
  • 请求拦截器
  • 响应拦截器
• 错误处理
  • 统一错误处理
  • 错误提示
  • 异常重试

1.6 代码示例

1.6.1 API 封装示例

// TeacherAPI.js
class TeacherAPI {
    constructor(axiosUtil) {
        this.axiosUtil = axiosUtil;
    }

    async login(body) {
        try {
            const response = await this.axiosUtil.post('/teacher/login', body, false);
            if (response.data.code === 0) {
                return response.data;
            }
            throw new Error(response.data.message || '登录失败');
        } catch (error) {
            throw error;
        }
    }

    async getHomeworkList(account, token) {
        try {
            const params = {};
            if (account) {
                params.account = account;
            }
            const response = await this.axiosUtil.get('/teacher/homeworks', params, {
                'Authorization': token
            });
            if (response.data.code === 0) {
                return response.data;
            }
            throw new Error(response.data.message || '获取作业列表失败');
        } catch (error) {
            throw error;
        }
    }
}

1.6.2 状态管理示例

// auth.js
export const useAuthStore = defineStore('auth', {
    state: () => ({
        token: null,
        user: null,
        isAuthenticated: false,
        role: null,
    }),
    actions: {
        async teacherLogin(credentials) {
            try {
                const response = await teacherAPI.login(credentials);
                if (response.code === 0) {
                    this.setAuth(response.data);
                    return true;
                }
                throw new Error(response.message || '登录失败');
            } catch (error) {
                console.error('Teacher login failed:', error);
                return false;
            }
        },

        setAuth(authData) {
            this.token = authData.token;
            this.isAuthenticated = true;
            localStorage.setItem('token', authData.token);
        }
    }
});

1.6.3 组件实现示例

<!-- StudentManagement.vue -->
<template>
    <div class="student-management">
        <div class="management-header">
            <div class="page-title">
                <h2>学生管理</h2>
            </div>
            <div class="search-area">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="学生姓名">
                        <el-input v-model="searchForm.name" placeholder="输入学生姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchStudents">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="filteredStudents" v-loading="loading">
            <el-table-column prop="name" label="学生姓名">
                <template #default="scope">
                    <div class="student-name">
                        <img :src="getAvatar(scope.row)" alt="头像" class="avatar">
                        <span>{{ scope.row.name }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

1.7 遇到的问题与解决方案

1.7.1 状态管理问题

• 问题：状态同步不及时

  • 表现：用户登录后，部分组件未及时更新状态
  • 原因：Pinia 状态更新后，部分组件未正确订阅状态变化
  • 解决方案：
    • 使用 storeToRefs 确保响应式
    • 在组件挂载时主动获取最新状态
    • 实现状态变更事件通知机制

• 问题：状态持久化

  • 表现：页面刷新后状态丢失
  • 原因：未实现状态持久化存储
  • 解决方案：
    • 使用 localStorage 存储关键状态
    • 实现状态恢复机制
    • 添加状态版本控制

1.7.2 性能优化问题

• 问题：大数据列表渲染卡顿
  • 表现：学生列表和作业列表数据量大时页面卡顿
  • 原因：一次性渲染大量 DOM 节点
  • 解决方案：
    • 添加分页加载

1.7.3 用户体验问题

• 问题：表单验证体验差
  • 表现：表单验证提示不及时
  • 原因：验证逻辑复杂，响应慢
  • 解决方案：
    • 实现实时验证
    • 优化验证规则
    • 添加友好的错误提示

2. 学生端前端开发

2.1. 文件结构与功能概览

文件名	模块名称	核心功能描述	代码行数估计
main.dart	应用入口	设置主题、启动主页、包含未使用的计数器页面	~100 行
homepage.dart	主页面导航	底部导航栏、页面切换、AppBar 构建与抽屉按钮	~80 行
shitsumon.dart	AI 问答抽屉	构建抽屉界面，展示标题栏	~30 行

---

2.2. main.dart 功能拆解

• 应用启动：通过 runApp(const MyApp()) 启动应用。
• 主题配置：使用 ThemeData 设置全局主题，采用种子色构建 ColorScheme。
• 页面结构：MyApp 设置首页为 Homepage，页面结构标准。
• 多余模块：包含未实际使用的 MyHomePage 和 _MyHomePageState 计数器演示页面，建议删除以简化项目。

---

2.3. homepage.dart 功能拆解

• 状态管理：使用 _selectedIndex 控制底部导航切换。
• 页面结构：
  • AppBar 根据当前选项动态设置标题；
  • BottomNavigationBar 实现三页面切换；
  • endDrawer 使用 Shitsumon 组件作为右侧抽屉。
• 按钮构建：使用 Builder 构建抽屉按钮，通过 Scaffold.of(context).openEndDrawer() 打开抽屉。
• 代码可优化：_buildAppBar 三个分支结构重复，可合并精简。

---

2.4. shitsumon.dart 功能拆解

• 抽屉组件：作为 Drawer 嵌入在主页中。
• 界面结构：包含一个 AppBar 和空的主体内容（后续可扩展为聊天或输入区）。
• 布局控制：设置宽度为屏幕宽度的 85%，为后续内容留出展示空间。
• 设计风格：延续整体风格，顶部标题为“向AI提问”，样式统一。

---

2.5. 后续功能开发

• 当前实现完成了主界面结构、抽屉按钮与导航功能的搭建。
• 后续工作重点应放在：
  • Shitsumon 抽屉内容填充（如 AI 问答交互界面）；
  • 页面主体（_buildBody()）内容构建；
  • 多页面管理（_selectedIndex 切换对应实际页面）；
  • 重复代码优化（如 AppBar 构建部分）；

二、总结

本次前端开发工作涉及两个主要模块：教师端前端和学生端前端。教师端开发总计约 9,900 行代码，主要实现了登录、学生管理、作业管理、个人中心等多个功能模块。通过使用 Vue 3 和 Element Plus 组件库，结合 Pinia 状态管理和 Vue Router 路由管理，构建了一个响应式、模块化、易于维护的应用结构。每个模块的设计都注重了代码的复用性和可维护性，同时也采用了良好的权限控制和数据管理机制，确保了功能的完善和用户体验的流畅性。学生端前端开发则主要侧重于主页面结构与导航功能的搭建，代码量约为 300 行，使用 Flutter 框架实现了简单的导航栏和 AI 问答抽屉功能，后续将重点扩展问答交互界面和多页面管理。整体前端代码结构清晰，响应式设计和用户交互优化充分，确保了在不同设备上的良好适配与使用体验。