当前位置:首页>资源汇总>学习课程>React + Next.js 开发学成在线教育平台课程

React + Next.js 开发学成在线教育平台课程

学成在线是一个在线教育的 Web 应用平台,用户可以在线选课、购买课程、在线交流等。数据服务子系统使用 Node.js + Mysql 来实现网站数据的相关操作和状态管理,以及支付管理。网站子系统使用 React 服务端渲染框架 Next.js 进行架构,再结合 Redux 实现系统数据流的管控。

本课程为项目实战课,以在线教育平台“学成在线”为课程主线,系统讲解数据服务子系统与网站子系统的开发。项目整体基于React技术架构,采取前后端完全分离式的模式进行开发,分为数据服务(教师端)与网站(学生端)两大子系统。学完本项目,学员能够掌握React核心技术架构体系,具备独立完成在线教育项目或电商类平台项目开发的能力。

课程目录

01.项目介绍
01-项目介绍以及SPA和服务端渲染.mp4
02-系统开发流程介绍.mp4

02.搭建项目结构
03-项目框架初步搭建和端口的修改.mp4
04-项目集成css和less文件解析和集成antd.mp4
05-重写_document.js完成antd的全部组件样式导入.mp4
06-头部和底部抽离分析和代码实现.mp4
07-头部和底部组件样式调整.mp4

03.项目介绍和框架搭建
08-redux执行过程分析.mp4
09-1-redux代码实现1.mp4
09-2-redux代码实现2.mp4
09-3-redux代码实现总结.mp4
10-利用redux-persist完成将store中的state保存到localStorage中.mp4
11-1- 利用fetch实现数据请求封装get方法.mp4
11-2- 利用fetch实现数据请求封装post.mp4
11-3- 测试封装好的fetch方法.mp4

04.项目业务-登录
12-1-登录过程中浏览器与服务器的处理过程分析(理解Session状态管理机制).mp4
12-2- 登录功能实现1.mp4
12-3- 登录功能实现2.mp4
13-1登录成功跳转以及sessionStorage存储用户信息-前半部分.mp4
13-2登录成功跳转以及sessionStorage存储用户信息-后半部分.mp4
13-3利用antd中的表单组件实现登录页面用户名手机号码正则验证.mp4
13-4 登录组件样式的两种写法演示-3.mp4

05.注册功能
14-1注册功能分析业务分析和单独在Register实现注册页面原因.mp4
14-2注册页面静态页面结构实现.mp4
14-3注册页面表单元素合法性检查初步实现.mp4
14-4 完成手机号码是否已经被注册业务逻辑.mp4
14-5 完善手机号码是否被注册检查业务逻辑-点击注册按钮时也应该检查.mp4
14-6 完成点击注册按钮业务逻辑代码.mp4
14-7 完成点击获取验证码请求服务器业务代码.mp4
14-8 获取验证码按钮倒计时业务实现.mp4
14-9 使用antd中的表单中的自定义验证规则完成再次输入密码的一致性检查.mp4

06.项目业务-学生端首页
15-1 学生端首页页面分析和静态结构实现.mp4
15-2 学生端首页-通过getInitialProps轮播图数据并且动态渲染.mp4
15-3 学生端首页-通过getInitialProps课程导航数据并且动态渲染.mp4
15-4 学生端首页-通过componentWillMount实现精品课程的数据获取和渲染.mp4
15-5 学生端首页-通过componentWillMount实现不同课程分组的数据获取和渲染.mp4
15-6 学生端首页- 实现课程标签的动态化和修复map遍历时报没有定义key的错误.mp4

07.项目业务-学生端详情页
16-1 学生端课程详情页面实现思路分析.mp4
16-2 学生端课程详情页中利用withRouter实现url传参值的获取.mp4
16-3 学生端课程详情页面静态结构实现(使用了antd中的Tab组件.mp4
16-4 学生端课程详情页顶部数据获取(使用getInitialProps方式).mp4
16-5 学生端课程详情页课程详情、常见问题、授课老师数据展示.mp4
16-6 学生端课程详情页课程大纲实现1.mp4
16-6 学生端课程详情页课程大纲实现2.mp4

08.购物车&订单确认&支付
└─08.购物车&订单确认&支付
17-1 分析购物车实现业务以及加入购物车按钮实现思路.mp4
17-2 实现加入购物车按钮功能1.mp4
17-2 实现加入购物车按钮功能2.mp4
17-2 实现加入购物车按钮功能3.mp4
17-3 实现购物车列表数据展示.mp4
17-3-1 实现购物车列表数据删除.mp4
17-3-2 实现购物车列表勾选商品总价格计算和控制结算按钮是否可用.mp4
17-4-1 分析订单确认和下单操作业务.mp4
17-4-2 将用户勾选购物车中的课程数据使用redux管理起来.mp4
17-4-3 实现订单确认页面业务代码.mp4
17-4-4 分析和实现订单确认页面中的下单按钮逻辑.mp4
17-4-5 分析支付页面要实现的业务和数据来源以及接口调用.mp4
17-4-6 实现支付页面支付链接的二维码生成.mp4

资料
├─2018-11-19
│ ├─代码
│ │ 01-online项目基本结构搭建解析less,css重写_document.js,_app.js.rar
│ │ 02-实现头部和底部组件静态结构的设计.rar
│ │
│ └─讲义
│ 02 – 底部组件设计.png
│ 头部和底部组件1.png
│ 讲义.rar

├─2018-12-2
│ ├─代码
│ │ gzfe-learning_online-v0.1.2集成redux但未将store持久化到localStorage中.zip
│ │ gzfe-learning_online-v0.1.3利用redux-persist实现store持久化到localStorage中.zi
│ │ gzfe-learning_online-v0.1.4featch封装和调用测试.zip
│ │ gzfe-learning_online-v0.1.5实现登录和和退出功能.rar
│ │
│ └─笔记
│ 02框架搭建讲义.pdf
│ login.png
│ redux.png
│ 登录功能讲义.pdf
│ 网站讲义.zip

├─2018-12-23
│ ├─14-注册功能
│ │ ├─代码
│ │ │ 14-1到6的所有功能代码.zip
│ │ │ 14-7到9的所有功能代码.rar
│ │ │
│ │ └─讲义和图解
│ │ │ 1.png
│ │ │ checkuser.png
│ │ │ 点击注册验证用户是否被使用检查.png
│ │ │ 验证码按钮业务分析.png
│ │ │
│ │ └─讲义
│ │ │ 05注册功能.md
│ │ │
│ │ └─img
│ │ checkuser.png
│ │ p14.png
│ │ p15.png
│ │ p16.png
│ │ redux.png
│ │
│ └─15-学生端首页
│ ├─代码
│ │ 15-1到3代码-学生端首页轮播和导航代码实现.rar
│ │
│ └─讲义和图解
│ │ 1-首页导航和轮播实现分析.png
│ │
│ └─讲义
│ │ 06学生端首页.md
│ │
│ └─img
├─2018-12-29
│ ├─15-学生端首页
│ │ ├─代码
│ │ │ 15-1到3代码-学生端首页轮播和导航代码实现.rar
│ │ │ 15-4到6代码.rar
│ │ │
│ │ └─讲义和图解
│ │ │ 1-首页导航和轮播实现分析.png
│ │ │ 2-学生端首页-精品课程.png
│ │ │
│ │ └─讲义
│ │ │ 06学生端首页.md
│ │ │
│ │ └─img
│ └─16-学生端详情页
│ ├─代码
│ │ 16-1到3的代码.zip
│ │ 16-4代码.zip
│ │ 16-6代码.zip
│ │
│ └─讲义和图解
│ 07学生端详情页面和播放页面.md

└─2019-1-6
├─17-购物车&订单确认&支付
│ ├─代码
│ │ 17-1到2代码.zip
│ │ 17-3-1 到 17-4-4 代码.zip
│ │ 17-3代码.zip
│ │ 17-4-5 到 17-4-6 代码.zip
│ │
│ └─笔记
│ 01-加入购物车功能.png
│ 02-购物车页面实现.png
│ 03-订单确认和支付页面.png
│ 04-支付页面.png

├─18-个人中心
│ └─代码
│ 18-1到3(1).rar
│ 18-4到5.zip

├─19-完善课程详情页面
│ 19 完善课程详情页面免费和收费课程播放权限的控制.rar

├─20-播放页面
│ └─代码
│ 20-1到20-6-3全部代码.rar

└─21-后台管理系统
└─代码
21-11到21-13代码.rar
21-1到21-4代码.rar
21-5到21-7代码online.rar
21-8 完成新增课程post数据功能.rar
21-9到21-10代码.rar

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • 其他用户
    办理会员后下载

查看演示

  • {{attr.name}}:
您当前等级为
登录后免费下载登录 黑名单用户禁止下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)已用完,明日重置 支付积分以后下载立即支付 支付以后下载立即支付 您当前用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
重要声明

本站资源均来自网络分享,仅用于站内学习或测试研究使用。如有侵犯您的权益请私信留言,我们会第一时间审核。未经原版权作者许可,禁止用于任何商业途径,请在下载二十四小时内删除!


如果遇到需要升级才可获取的素材,建议升级对应的权限。 全站 90% 以上的素材“均有备份”。 本站资源均以主流网盘分享,以 7z、rar、分卷等常见的格式压缩,为防止有人压缩软件不支持 7z 格式,7z 解压,建议下载 7-zip,zip、rar 解压,建议下载 WinRAR 手机下载解压教程详见 帮助中心 。

学习课程

SpringCloud 微服务 2021 实战课程

2021-07-26 00:00

学习课程

原价 9540 元的黑马程序员 Java 架构师训实战练营课程 [141.6G]

2021-07-26 00:04

3 条回复 A文章作者 M管理员
  1. 无道丿扗虖

    感谢分享

    • 彭于晏

      您好,请问一下您还有这个资源吗?

    • 彭于晏

      您好,请问这个还有吗。

个人中心
今日签到
有新私信 私信列表
站内搜索