1、在线教育平台制作项目案例2/28预习检查 教员根据上节课布置的预习内容进行集中测试3/28技能要求 使用HTML5+CSS3+JS+第三方库完成页面布局 使用Django完成数据绑定、页面路由等操作 通过xadmin+UEditor完成Django后台重构 使用MySQL与SQLite3完成数据库支持 使用jQuery第三方库完成网页轮播图特效4/28任务描述 开发在线教育平台演示示例01:在线教育平台5/28整体开发思路分析 项目框架搭建 xadmin+UEditor接入 页面开发首页、课程详情页、章节页、机构介绍页、机构课程页、机构讲师页 切换到MySQL数据库6/28开发计划5-1用例1
2、:项目框架搭建项目初始化xadmin+UEditor接入各个应用Model设计静态HTML模板引入完成时间:完成时间:40分钟分钟完成时间:完成时间:40分钟分钟完成时间:完成时间:60分钟分钟完成时间:完成时间:60分钟分钟7/28开发计划5-2用例2:制作首页首页布局调整首页轮播图数据动态绑定首页课程数据动态绑定完成时间:完成时间:50分钟分钟完成时间:完成时间:40分钟分钟完成时间:完成时间:40分钟分钟8/28开发计划5-3用例3:制作课程详情页、章节页课程详情页、章节页布局动态绑定页面数据完成时间:完成时间:50分钟分钟完成时间:完成时间:40分钟分钟9/28开发计划5-4用例4:制
3、作机构页面及实现其功能机构介绍页面数据绑定机构讲师列表页面数据绑定机构课程列表页面数据绑定完成时间:完成时间:40分钟分钟完成时间:完成时间:60分钟分钟完成时间:完成时间:40分钟分钟10/28开发计划5-5用例5:xadmin后台配置及切换到MySQL数据库xadmin后台配置执行SQL语句生成数据表项目数据库配置完成时间:完成时间:50分钟分钟完成时间:完成时间:50分钟分钟完成时间:完成时间:50分钟分钟11/28用例1:项目框架搭建3-1 需求说明完成项目的初始化,创建应用(课程应用、机构应用、banner应用)q创建项目命令:django-admin startproject ke
4、proq创建应用命令:python manage.py startapp coursesq注册到setting.py中xadmin+UEditor接入q将提供的xadmin+UEditor文件拷贝到项目中讲解需求说明完成时间:完成时间:80分钟分钟练习练习12/28用例1:项目框架搭建3-2 需求说明根据课程应用、机构应用、banner应用设计每个应用下的modelsq课程应用:CourseClass、Course、Lesson、Videoq机构应用:CourseOrg、Teacherqbanner应用:BannerImg讲解需求说明完成时间:完成时间:120分钟分钟练习练习13/28用例1:
5、项目框架搭建3-3 需求说明基础配置qINSTALLED_APPS配置q模板配置q静态文件配置q数据库配置q路由配置讲解需求说明完成时间:完成时间:120分钟分钟练习练习14/28用例2:首页轮播图 需求说明调整静态HTML模板上首页样式,完成首页轮播图数据绑定讲解需求说明完成时间:完成时间:90分钟分钟练习练习15/28用例2:首页课程 需求说明首页课程根据对应的课程分类进行数据绑定,并可以传参到课程详情页讲解需求说明完成时间:完成时间:40分钟分钟练习练习16/28共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 17/28用例3:课程详情页练习练习需求说明课程
6、详情页包含课程的基本信息绑定,如名称、机构、难度、时长等相关课程推荐显示,通过课程标签作为查询条件完成时间:完成时间:50分钟分钟讲解需求说明18/28用例3:课程章节页练习练习需求说明完成课程章节页面数据绑定,包括课程关联章节、讲师、课程描述等完成时间:完成时间:40分钟分钟讲解需求说明19/28共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 20/28用例4:机构介绍页需求说明当鼠标单击“课程详情页”的机构名称/logo进入到“机构介绍页”,通过路由参数实现不同的机构切换不同内容练习练习完成时间:完成时间:40分钟分钟讲解需求说明21/28用例4:机构课程页需
7、求说明实现机构课程列表的布局根据机构的ID查询该机构下所有的课程信息,并将数据显示在页面中练习练习完成时间:完成时间:60分钟分钟讲解需求说明22/28用例4:机构讲师页需求说明实现机构讲师页面的布局根据机构ID查询该机构下所关联的讲师信息,并将数据显示在页面中练习练习完成时间:完成时间:40分钟分钟讲解需求说明23/28共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 24/28用例5:xadmin后台配置需求说明目前项目采用xadmin作为后台系统,除基础操作模型外,还可以在xadmin后台进行灵活配置q配置xadmin后台的头部和底部信息的自定义设置q配置xa
8、dmin中的换肤功能,可以自由切换后台皮肤练习练习完成时间:完成时间:50分钟分钟讲解需求说明25/28用例5:切换到MySQL数据库需求说明将Django默认的SQLite3存储切换到MySQL数据库中q执行SQL语句,生成所需数据表及数据q修改项目数据库配置项练习练习完成时间:完成时间:50分钟分钟讲解需求说明DATABASES=default:ENGINE:django.db.backends.mysql,NAME:onlinedb,USER:root,PASSWORD:123456,HOST:127.0.0.1 26/28共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧共性问题集中讲解 27/28作业 课后作业教员备课时根据班级情况在此添加内容,应区分必做、选做内容,以满足不同层次学员的需求 预习作业教员备课时根据班级情况在此添加预习内容