7.7 KiB
项目概述
👋
本作业要求实现一个在线学习管理平台的部分内容，涵盖前端与后端两部分。前端基于 React + TypeScript 技术栈构建，后端采用 Koa 开发。系统实现了用户登录认证、工作台数据可视化、课程管理、学生管理及学习总结展示等功能，支持数据的增删改查等操作。
二、功能需求
1. 登录认证
- 实现用户登录表单（用户名 + 密码），调用后端接口进行认证。
- 未登录状态下访问其他页面自动跳转到登录页。
- 固定测试账号/密码：
admin/admin123
2. 工作台（Dashboard）
-
展示 4 个统计卡片：课程总数、学生总数、发布率、活跃率。
-
展示 4 个图表：
-
柱状图：课程选课人数排行。
-
折线图：近 7 天学习活跃度（学习人数 + 学习时长）。
-
饼图：学生状态分布（活跃 / 非活跃）。
-
饼图：课程分类分布。
3. 课程管理
- 展示课程列表，支持分页（默认 10 条每页，可调整）、按课程名/讲师搜索、按状态和分类筛选。
- 支持选课人数列的服务端排序。
- 支持新增、编辑、删除课程及课程发布/下架状态切换（点击删除的时候出现气泡确认框，其他地方同理）。
4. 学生管理
- 展示学生列表，支持分页（默认 10 条每页，可调整）、按姓名/学号搜索、按班级和状态筛选。
- 支持新增、编辑、删除学生，可以进行多选课程。
5. 学习总结
- 从服务端获取 Markdown 格式的学习总结内容，前端进行解析渲染展示。
- 内容存储于
server/data/summary.md中，需要修改这个文件内容为自己真实的「前端学习总结」。
三、技术要求
前端
技术栈：Vite、React、TypeScript、Ant Design、Tailwind CSS 等（禁止使用第三方脚手架如 UmiJS 、飞冰、Ant Design Pro 等同类集成方案）。
后端
技术栈：Node.js、Koa、@koa/router、better-sqlite3、jsonwebtoken 等（给出代码中没有使用 ORM，如有需要可自行选择 Prisma 或 TypeORM 等），90% 的代码或接口已经提供，个别地方需要自己完善后端代码，例如下图：
如何启动后端项目？
cd server
npm install
npm start
# 服务端相关接口将在 http://localhost:3000/api/*** 提供
四、注意事项
🔔
开发
开发过程中，前端监听 5173 端口，此时浏览器打开 http://localhost:5173 访问，AJAX 请求也是向 5173 发送，但是因为真实的服务是在 3000，因此要使用 Vite 把请求代理到3000（前端的请求地址类似 /api/***）。
🔔
生产
前端代码执行 npm run build 打包后，默认会打包到 client/dist 目录中。正式环境中，要求打开 http://localhost:3000 可以直接查看打包后的项目（此时静态资源需要使用 Koa 来托管）。
👋
格外注意
由于批改作业需要，要求大家提交打包后的 course/client/dist 目录代码（实际开发中是不需要提交的）。
五、作业提交
-
作业放置于
week07/homework/course目录中，这个目录下有两个子目录，具体如下： -
client 目录：前端项目，在该目录下的 package.json 文件中至少有两个命令，分别是 npm run dev 用于启动项目（端口5173），npm run build 用于打包项目。编译后静态资源使用 Koa 服务器进行托管。
-
server 目录：后端项目目录，放置老师提供的后端代码。
-
视频要求
-
**时长：**控制在 5 分钟内（如超过可适当加速，禁止其他剪辑）
-
内容：
-
打包后的核心功能展示（至少包含：学生管理的增删改查、工作台和学习总结界面展示）。
-
你认为核心技术点的讲解或优化思考等。
-
其他你希望老师看到的内容（若有）。
-
录音：
-
视频开始前，请提前准备编辑好记事本，里面包含自己的学校，姓名和录制当天的日期。
-
视频第一句话必须打开记事本，请晰说出：“我是「学校名称」的「姓名」，学号后四位是「XXXX」,今天是「日期」，现在开始我的实战演示”。
-
操作的时候，介绍操作过程。
-
命名：
姓名_学号_在线学习后台.mp4，视频放在「武科大在线学习后台」 -
README.md，必须包含下面标题和内容：
- **项目基本信息：**至少包含你的姓名、学校、学号。
- **开发任务索引：**列出你完成的任务清单。
- **核心技术实现：**简要说明你实现关键逻辑的思路。
- 其他你希望老师看到的内容（若有）。
六、作业批改
- 进入
week07/homework/course/client目录，执行npm i，npm run build - 进入
week07/homework/course/server目录，执行npm i，npm start - 浏览器输入 http://localhost:3000 体验项目。
- 查看视频、README.md、代码等信息。
- 提交截止时间：等群通知