Web前端应用开发项目式教程（基于uni-app框架） 教案-教学设计 任务8　实现文章发布与文章分页功能

教学整体设计任务名称任务8实现文章发布与文章分页功能开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现启嘉校园社区模块的文章发布和文章列表分页功能。通过该任务的实现让学生掌握uni-app上传组件的应用方法、页面间通信方法，以及移动端最为常见的“下拉刷新”和“上拉加载”分页方式。教学目标素质目标1.通过对uni.uploadFile文件上传方法的学习，培养学习者乐于探究、勇于创新的精神。2.通过完成“专业交流”版块的开发，增强学习者职业认同感。3.通过合理选择图片储存方式，培养学习者服务意识。知识目标1.了解图片、视频等文件托管储存的优点和实现原理。2.掌握uni.uploadFile文件上传方法的使用。3.掌握uni-app页面通讯方法的使用。能力目标1.能够使用uni.uploadFile方法实现图片上传功能。2.能够使用组件通讯方法在页面间传递数据。学情分析知识基础1.已了解ajax请求封装的方法及其优点。2.已掌握uni.request方法进行接口调用的方法。技能基础1.已具备基本的功能分析与理解能力。2.已能够完成ajax数据请求的调用。学习特点与诉求1.初步掌握了ajax请求封装的方法，希望得到更多的练习。2.在已有简单功能实现的基础上，希望尝试更复杂业务逻辑的实现。教学重点1.uni.uploadFile文件上传。2.下拉刷新和上拉加载分页功能的实现。3.uni-app页面间通讯教学难点1.uni-app页面间通讯。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前任务“了解移动端应用程序常见的分页方式”，锻炼学生自主检索、善于观察和总结规律的能力；通过布置课前任务“预习uni.uploadFile文件上传方法的使用”，锻炼学生自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置异步数据请求的相关知识测验，教师可以更好地了解学生数据请求基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。教师活动学生活动1.发布任务。通过职教云或其他线上教学平台发布预习任务：（1）了解移动端应用程序常见的分页方式。（2）预习uni.uploadFile文件上传方法的使用。2.发布测验。通过职教云或其他线上教学平台发布异步数据请求的相关知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习uni.uploadFile方法的使用，并了解移动端常见分页方式。2.基础测验。通过职教云完成教师发布的数据请求相关知识的测验，并整理易错题，写好技术笔记。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合文章发布和文章列表页分析功能的实际开发过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生文章发布功能和分页功能的实操技能和职业素养，保证教学过程与工作一致，教学评价与企业评价一致。教学过程中采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景导入与任务描述1(10分钟)1.展示生活中常用的几款移动应用的列表页分页方式。美团外卖瀑布流分页美团外卖瀑布流分页腾讯新闻下拉加载分页腾讯新闻下拉加载分页铁路1铁路12306圆点分页2.引出知识储备中《8.4.1常见的分页方式》的内容。3.发布课堂讨论：总结常见移动端的分页方式都有哪些。1.观察并体验教师演示的几款常见应用的分页方式。2.小组讨论，再分析自己熟悉的移动应用的常见分页方式。3.总结本组讨论的结果，参与课堂讨论。知识储备讲解1(35分钟)1.讲解瀑布流分页和常规数字分页的实现原理。2.重点讲解下拉刷新和上拉加载的实现过程。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。1.听教师讲解知识。2.理解实现逻辑。3.根据教师的讲解，完成代码的编写。4.遇到问题，请教老师或同学。5.易错点整理笔记。第2学时情景导入与任务描述2(10分钟)1.提问：文件上传有哪些应用场景？更换微信头像更换微信头像发布抖音视频发布抖音视频2.引出知识储备中《8.4.2uni.uploadFile文件上传》的内容。3.引发思考：文件上传功能的实现，前端的开发是什么？文件提交给后端，后端又需要执行什么操作？1.观察并体验文件上传操作的执行逻辑。2.思考问题并小组讨论，分析文件上传操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。知识储备讲解2(35分钟)1.讲解uni.uploadFile方法的语法格式及参数说明。2.案例式、分步骤、由浅入深讲解。（1）基本文件上传功能实现的逻辑讲解。（2）files参数、success回调、fail回调、complete回调函数的定义。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。3.教学重点：回调函数的正确应用。4.教学难点：使用uploadTask对象实时显示上传进度。重难点解决办法：教师教师演示、学生反复练习。1.听教师讲解知识，理解实现逻辑。2.完成代码的编写。uni.chooseImage({success:(chooseImageRes)=>{consttempFilePaths=chooseImageRes.tempFilePaths;uni.uploadFile({url:'/upload',//仅为示例，非真实的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:(uploadFileRes)=>{console.log(uploadFileRes.data);}});}});4.调试、改bug，易错点整理笔记。第3学时情景导入与任务描述3(10分钟)1.通过设问引导教学内容：uni-app页面间通信的包括几种方式？2.带领学生一起回顾之前学过的页面之间的通信方式。3.引导学生思考文章发布后的实现逻辑：当文章发布成功后，点击“返回”按钮，回到列表页，列表页应该有何变化？有几种实现方式？（1）重新调用列表页接口（2）单独调用新发布文章的数据，并将其添加到列表页最上面。（3）从性能和用户易用性方面分析，那种解决方案更好？4.设问：如何在发布文章成功后，直接让列表页调用最新发布成功的文章信息？1.跟随教师思考并回答问题。2.认真听教师梳理授课思路。3.在了解最优解决方案后，思考编码逻辑，并认真听教师后面的讲解。知识储备讲解3(35分钟)1.讲解uni.$emit、uni.$on、uni.$once、uni.$off方法的功能。2.讲解利用自定义事件实现页面间通信的原理。（教学重难点）执行u执行uni.$on方法绑定事件执行uni.$emit方法触发事件页面A页面页面A页面B解释：页面A通过原生事件处理程序（如，点击事件、失去焦点事件等）调用uni.$emit方法，从而触发目标页面（页面B）的事件监听（前提是页面B事先利用uni.$on注册了自定义事件的监听），在页面B触发自定义事件的处理函数中利用参数获取到页面A传递给它的数据。3.讲解并演示uni.$emit、uni.$on、uni.$once、uni.$off四个方法的使用，重点讲解前两个。1.认真听教师讲解，思考并回答问题。2.练习代码。代码段一：uni.$emit('update',{msg:'页面更新'})代码段二：uni.$on('update',function(data){ console.log('监听到事件来自update，携带参数msg为：'+data.msg);})3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第4学时任务实施逻辑分析1(10分钟)1.任务及约束分析：教师带领学生一起进行子任务的需求功能分析，理解文章发布中涉及到的每一个字段、字段的功能及其字数和字符类型的限制。2.思政融入：通过对功能的分析引导学生“维护小程序平台的安全和健康，营造合法合规、良好道德规范的网络环境”社会责任感。3.组织学生以小组为单位阅读教材中p223-224页的业务实现逻辑分析，并理解其实现逻辑4.抽查1~2个小组对实现逻辑的理解。5.对理解错误或者不完善的地方教师进行补充说。1.以小组为单位分析此部分的实现逻辑分析。2.总结归纳：（1）文本（标题和正文）：重点，使用v-model实现数据双向绑定。（2）图片：上传图片个数验收，超出进行提示，成功后回调函数逻辑。（3）话题：“专业交流”和“表白墙”切换和传递参数的差别。3.回答问题，查漏补缺。任务实施编码实现1(35分钟)1.教师演示获取话题列表接口的封装过程。2.指导学生跟随练习上传图片接口的封装操作。3.巡回指导，并纠错。4.重点问题集中讲解，个别问题单独辅导。1.学生跟随教师练习获取话题接口的练习。importrequestfrom"@/api/index.js"//获取话题列表exportfunctiongetTopicListApi(){returnrequest({url:`/article-classify/topic-list`,method:'get'})}2.有问题请教老师或同组同学。3.调试代码，修改bug，整理笔记。4.帮助其他同学修改代码。第5学时任务实施编码实现2(30分钟)1.在职教云发布任务：按照获取话题列表接口的封装原理和封装步骤，封装发布文章接口的方法。2.巡回指导，并纠错。3.重点问题集中讲解，个别问题单独辅导。4.检查职教云提交的作业。5.点评作业。1.反复锤炼。2.认真完成教师发布的任务。//发布文章exportfunctionpostArticlesApi(familyId,articleTitle,articleContent,imgpath){returnrequest({url:'/IntactArticle',method:'post',data:{"familyId":familyId,"title":articleTitle,"content":articleContent,"imageLink":imgpath}})}3.提交职教云作业。4.认真听取教师对作业的点评。5.整理笔记，记录易错点。任务实施逻辑分析2(15分钟)1.讲解图片上传组件的实现逻辑。（1）定义data中的页面变量，保存上传数据和页面状态数据。（2）调用uni.chooseImage选择要上传的图片。（3）调用方法验证选择的图片数量和图片大小.（4）验证成功后，调用本地的图片上传方法。（5）调用uni.uploadFile并保存上传任务对象uploadTask。（6）为uploadTask定义onProgressUpdate事件的处理程序，随着上传的进度来更新页面显示的上传进度（7）定义上传成功和上传失败的回调函数。2.使用流程图为学生梳理上述的实现逻辑。选择图片——>验证图片——>上传图片——>进度监听——>成功或失败的处理。3.让学生理解上述处理，逻辑重点问题集中讲解，个别问题单独辅导。4.发布任务：学生以小组为单位实现图片的验证规则。1.理解实现逻辑。2.分组讨论实现过程。3.以小组为单位编写图片的验证逻辑。4.屏幕共享，讲解本小组编码逻辑的实现过程。5.组间互测，检查代码实现的逻辑是否正确。6.倾听其他小组的编码实现逻辑。7.整理笔记，记录易错点。第6学时任务实施编码实现3(30分钟)1.讲解并演示图片上传组件的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施重点问题讲解(15分钟)1.重点问题回顾与讲解（1）Promise实例的封装（2）在Promise.then()方法中实现异步事件处理教学重难点1.听讲和认真理解。2.做技术笔记。第7学时任务实施逻辑分析3(10分钟)1.分析任务。要求学生以小组为单位阅读教材中《8.5.2获取文章列表》部分内容，完成以下三个部分的分析：（1）列表刷新功能分析。（2）实现逻辑分析。（3）后端接口分析。2.任意抽选3个不同的小组，上台展示本组分析成果。3.点评各组分析结果，使学生对这三部分的理解达到共识。4.教学重难点根据功能和接口参数，构建接口调用逻辑，实现真实数据展示使用图示法解决教学重难点！1.阅读教材资料。2.以小组为单位分析问题。3.上台表达本小组的成果。4.对本部分内容达成共识。5.设计图分析进行接口调用逻辑构建。任务实施编码实现4(25分钟)1.讲解并演示获取文章列表页面接口调用的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施编码实现5(10分钟)1.讲解并演示真实数据页面绑定的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。第8学时任务测试(35分钟)1.任务介绍。教师介绍本次课要进行测试的测试任务，UI页面测试、功能测试（页面跳转、修改、保存等按钮功能）。2.知识讲解。教师介绍测试的概念，并对照企业测试流程讲解，测试要按照需求分析、计划、用例、执行、总结，五步流程进行测试。3.情景故事。教师播放测试相关情景动画，指明测试工作的重要性，提高学生对测试工作的责任心。4.需求分析讲解。教师讲解需求分析的方法，并以部分需求说明书为例，演示如何正确进行需求分析，提取测试功能点。5.分配小组。根据任务实施同学完成情况及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。6.制定计划讲解。教师引导学生小组内，要交叉进行测试，如A同学测试B同学的项目，测试之前先制定自己的测试计划并形成文字。7.编写用例讲解。教师讲解编写测试用例的技巧，并以部分功能为例进行演示。8.执行用例讲解。教师讲解执行用例注意要点。9.总结报告讲解。教师讲解编写总结报告要点。10.组间巡回指导。教师在组间进行巡回指导，遇到共性问题，在班级内统一点拨。1.知晓任务。认真听取教师讲解本次课的测试任务。2.学习测试