129 lines
7.7 KiB
Markdown
129 lines
7.7 KiB
Markdown
# 项目概述
|
||
|
||
👋
|
||
|
||
本作业要求实现一个在线学习管理平台的部分内容，涵盖前端与后端两部分。前端基于 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`](http://localhost:5173/) 访问，AJAX 请求也是向 5173 发送，但是因为真实的服务是在 3000，因此要**使用 Vite 把请求代理到3000**（前端的请求地址类似 /api/***）。
|
||
|
||
🔔
|
||
|
||
**生产**
|
||
|
||
前端代码执行 `npm run build` 打包后，默认会打包到 client/dist 目录中。正式环境中，要求打开 [`http://localhost:3000`](http://localhost:3000/) 可以直接查看打包后的项目（此时静态资源需要使用 Koa 来托管）。
|
||
|
||
👋
|
||
|
||
**格外注意**
|
||
|
||
由于批改作业需要，要求大家提交打包后的 course/client/dist 目录代码（实际开发中是不需要提交的）。
|
||
|
||
# 五、作业提交
|
||
|
||
1. 作业放置于 `week07/homework/course` 目录中，这个目录下有两个子目录，具体如下：
|
||
|
||
2. **client 目录**：前端项目，在该目录下的 package.json 文件中至少有两个命令，分别是 npm run dev 用于启动项目（端口5173），npm run build 用于打包项目。编译后静态资源使用 Koa 服务器进行托管。
|
||
3. **server 目录**：后端项目目录，放置老师提供的后端代码。
|
||
|
||
4. **视频要求**
|
||
|
||
5. **时长：**控制在 5 分钟内（如超过可适当加速，禁止其他剪辑）
|
||
6. **内容：**
|
||
|
||
7. **打包后的核心功能展示**（至少包含：学生管理的增删改查、工作台和学习总结界面展示）。
|
||
8. 你认为核心技术点的讲解或优化思考等。
|
||
9. 其他你希望老师看到的内容（若有）。
|
||
|
||
10. **录音：**
|
||
|
||
11. 视频开始前，请提前准备编辑好记事本，里面包含自己的学校，姓名和录制当天的日期。
|
||
12. 视频第一句话必须打开记事本，请晰说出：“我是「学校名称」的「姓名」，学号后四位是「XXXX」,今天是「日期」，现在开始我的实战演示”。
|
||
13. 操作的时候，介绍操作过程。
|
||
|
||
14. **命名：**`姓名_学号_在线学习后台.mp4`，视频放在「[武科大在线学习后台](https://f.kdocs.cn/g/IMnWCbXH/)」
|
||
|
||
15. **README.md**，**必须包含下面标题和内容：**
|
||
|
||
- **项目基本信息：**至少包含你的姓名、学校、学号。
|
||
- **开发任务索引：**列出你完成的任务清单。
|
||
- **核心技术实现：**简要说明你实现关键逻辑的思路。
|
||
- 其他你希望老师看到的内容（若有）。
|
||
|
||
# 六、作业批改
|
||
|
||
1. 进入 `week07/homework/course/client` 目录，执行 `npm i`，`npm run build`
|
||
2. 进入 `week07/homework/course/server` 目录，执行 `npm i`，`npm start`
|
||
3. 浏览器输入 [http://localhost:3000](http://localhost:3000/) 体验项目。
|
||
4. 查看视频、README.md、代码等信息。
|
||
5. 提交截止时间：等群通知 |