📌 项目简介
MoZhiCourse 是一个基于前后端分离架构的在线课程学习平台,支持学生注册、课程学习、视频播放、社区讨论、教师管理、学习行为分析等功能。
- Node.js + Express
- MySQL 数据库
- JWT 身份验证
- RESTful API 设计
- Sequelize ORM(可选,根据实际使用)
- Vue 3 + Vue Router + Vuex/Pinia(根据实际使用)
- Axios 网络请求
- Element Plus 或自定义 UI 组件
- Vite 或 Webpack 构建工具
backend/
├── config/ # 配置文件
├── controllers/ # 控制器
│ ├── community/ # 社区相关控制器
│ ├── coursevideo/ # 课程视频控制器
│ ├── authController.js # 认证控制器
│ ├── courseController.js # 课程控制器
│ └── ... # 其他控制器
├── models/ # 数据模型
│ ├── community/ # 社区相关模型
│ ├── coursevideo/ # 视频相关模型
│ ├── Course.js # 课程模型
│ ├── userModel.js # 用户模型
│ └── ... # 其他模型
├── routes/ # 路由定义
│ ├── community/ # 社区路由
│ ├── auth.js # 认证路由
│ ├── courses.js # 课程路由
│ └── ... # 其他路由
├── middleware/ # 中间件
│ ├── auth.js # 认证中间件
│ └── errorHandler.js # 错误处理中间件
├── services/ # 业务逻辑层
├── utils/ # 工具函数
├── data/ # 静态数据
├── .env # 环境变量配置
├── index.js # 应用入口(可选)
├── server.js # 服务器入口
├── package.json
└── package-lock.json
frontend/
├── public/ # 静态资源
│ ├── videos/ # 视频文件
│ └── index.html # HTML 入口
├── src/
│ ├── api/ # API 接口定义
│ │ ├── auth.js # 认证相关 API
│ │ ├── courses.js # 课程相关 API
│ │ └── ... # 其他 API
│ ├── assets/ # 静态资源
│ │ ├── student.css # 学生端样式
│ │ └── teacher.css # 教师端样式
│ ├── components/ # 组件
│ │ ├── course/ # 课程相关组件
│ │ ├── layout/ # 布局组件
│ │ └── ... # 其他组件
│ ├── views/ # 页面视图
│ │ ├── Home.vue # 首页
│ │ ├── Login.vue # 登录页
│ │ ├── CourseDetail.vue# 课程详情
│ │ └── ... # 其他页面
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口
│ └── README.md
├── package.json
└── package-lock.json
- Node.js(建议版本 16.x 或更高)
- MySQL(建议版本 8.0 或更高)
- Git
# 克隆项目到本地
git clone https://github.com/calla-27/MoZhiCourse.git
cd MoZhiCourse- 创建数据库
CREATE DATABASE mzcourse CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;- 导入数据库文件
# 导入 SQL 文件(确保 mzcourse.sql 文件位于根目录或指定路径)
mysql -u root -p mzcourse < mzcourse.sql- 安装依赖
cd backend
npm install- 配置环境变量
在backend/目录下创建或修改.env文件和config/database.js文件:
# 服务器配置
PORT=4000
NODE_ENV=development
# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=mzcourse
# JWT 配置
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=7d
# 文件上传配置
UPLOAD_PATH=./uploads
MAX_FILE_SIZE=50MBconst dbConfig = {
host: '127.0.0.1',
port: 3306,
user: 'root',
password: '123456',
database: 'mzcourse',
charset: 'utf8mb4',
connectionLimit: 10,
};- 启动后端服务器
# 开发模式
npm run dev
# 或生产模式
npm start后端服务默认运行在:
- 安装依赖
# 返回项目根目录
cd ..
cd frontend
npm install- 配置 API 基础 URL
检查frontend/src/api/目录下的 API 文件,确保baseURL指向正确的后端地址:
// 例如在 request.js 或 axios 配置中
const baseURL = 'http://localhost:4000/api';- 启动前端开发服务器
npm run dev
# 或
npm run serve前端服务默认运行在:
| 用户名 | 密码 | 角色 | 说明 |
|---|---|---|---|
| student | 123456 | 学生 | 学生端账号 |
| teacher | 123456 | 教师 | 教师端账号 |
- ✅ 用户注册/登录
- ✅ 课程浏览与搜索
- ✅ 课程学习(视频播放)
- ✅ 学习进度跟踪
- ✅ 社区讨论与评论
- ✅ 个人中心
- ✅ 学习行为分析
- ✅ 课程管理(增删改查)
- ✅ 章节与视频管理
- ✅ 学生管理
- ✅ 成绩统计分析
- ✅ 教学中心
- ✅ 响应式布局
- ✅ 用户认证与授权
- ✅ 实时讨论
- ✅ 文件上传(头像、视频等)
- 检查 MySQL 服务是否启动
- 确认
.env文件和config/database.js中的数据库配置正确 - 确保数据库用户有足够权限
- 检查后端服务是否正常启动
- 确认前端 API 配置的端口与后端一致
- 查看浏览器控制台是否有 CORS 错误(需要在后端配置 CORS)
- 确保视频文件已正确上传到
public/videos/目录 - 检查视频文件的访问权限
- 确认视频格式支持(建议使用 MP4 格式)
mysqldump -u root -p mzcourse > mzcourse_backup.sqlmysql -u root -p mzcourse < mzcourse_backup.sql- GitHub 仓库: https://github.com/calla-27/MoZhiCourse.git
- 接口文档: 查看
backend/routes/目录下的路由文件
- 使用 ES6+ 语法
- 遵循 RESTful API 设计原则
- Vue 组件使用 Composition API
git add .
git commit -m "feat: 添加新功能" # 新功能
git commit -m "fix: 修复BUG" # 修复问题
git commit -m "docs: 更新文档" # 文档更新
git commit -m "style: 代码格式化" # 代码样式本项目仅供学习和演示使用。
最后更新: 2025年12月
维护者: calla-27