【源码】基于 React Hooks 和 Redux 的在线课程系统

项目简介

本项目为前后端分离设计的在线课程系统。前端运用 React Hooks、React Redux、React Router Dom 和 TypeScript 构建，具备课程展示、购买等功能。后端通过 RESTful API 与前端交互，负责业务逻辑处理和数据存储。系统拥有完整的用户注册、登录流程以及课程购买功能。

项目的主要特性和功能

1. 用户功能：支持用户注册与登录，方便用户使用系统，用户可浏览课程列表并进行课程购买操作。
2. 技术特性：使用 React Hooks 管理组件状态和逻辑，结合 React Redux 进行全局状态管理，提升代码可维护性与扩展性；采用 Webpack5 进行项目构建打包，从时间和空间上优化，提高构建速度并减小代码体积；封装 axios 对请求与响应预处理，路由切换时取消未完成请求，增强用户体验；运用 Redux 设计合理的数据流转结构，便于前端数据变更的维护和拓展。
3. 工程化规范：遵循 JS 编码原则，通过 eslint 统一代码风格；采用 commitlint 规范 git commit，使用 husky 管理 commit 生命周期；可使用 conventional-changelog-cli 生成变更日志。
4. 其他特性：使用 React Developer Tools 和 Redux Devtools 进行调试；采用 CSS Modules + Less 进行样式管理；运用淘宝的 flexibale 方案进行移动端适配；搭配 Ant Design UI 组件库，提高开发效率。

安装使用步骤

前端

1. 进入项目目录：cd course-system-client
2. 安装依赖：yarn install
3. 启动开发服务器：yarn start

后端

1. 进入项目目录：cd course-system-server
2. 安装依赖：根据后端项目的具体要求安装相应依赖
3. 启动后端服务：执行后端项目对应的启动命令

访问系统

在浏览器中访问前端项目启动后的地址，即可体验在线课程系统的各项功能。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】