Web前端应用开发项目式教程（基于uni-app框架） 教案-教学设计 任务9　实现文章详情页相关功能

教学整体设计任务名称任务9实现文章详情页相关功能开课学期第3学期课程类型专业核心课授课班级授课学时8学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现启嘉校园社区模块文章详情页中的相关功能。用户通过单击社区首页文章列表中的文章卡片可以进入文章详情页，文章详情页需要实现的功能包括展示文章的标题、正文、作者、发布日期；展示文章获得的点赞、转发和评论数量以及评论列表；对文章进行评论、点赞和转发，也可以对其他用户发布的评论进行回复和点赞；关注或取关作者。教学目标素质目标1.通过使用条件编译解决多端兼容，培养学习者科学、系统解决问题的意识。2.通过分享、点赞功能的实现，培养学习者尊重他人劳动成果、传播正能量的意识。知识目标1.了解H5端实现转发功能的方法。2.掌握uni.showLoading和uni.hideLoading显示和隐藏加载状态方法使用。3.掌握利用分割和拼接的方式实现字符串与数组之间的转换。能力目标1.能够使用条件编译兼容微信小程序端和H5端转发功能实现的差异。2.能够使用uni.showLoading和uni.hideLoading方法实现显示和隐藏接口数据请求中的加载状态。3.能够将图片地址字符串按指定字符分割成图片数组。学情分析知识基础1.已了解ajax请求封装的方法及其优点。2.已掌握uni.request方法进行接口调用的方法。技能基础1.已具备基本的功能分析与理解能力。2.已能够完成ajax数据请求的调用。学习特点与诉求1.初步掌握了ajax请求封装的方法，希望得到更多的练习。2.在已有简单功能实现的基础上，希望尝试更复杂业务逻辑的实现。教学重点1.uni.showLoading和uni.hideLoading显示和隐藏加载状态方法使用。2.微信小程序端和H5端转发功能实现。3.完成文章点赞、转发与关注作者功能、文章评论功能。教学难点1.微信小程序端和H5端转发功能实现。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前任务“商品评论区模块常见的功能有哪些”，锻炼学生自主检索、善于观察和总结规律的能力；通过布置课前任务“预习任务9实现文章详情页相关功能”，锻炼学生自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置异步数据请求的相关知识测验，教师可以更好地了解学生数据请求基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。教师活动学生活动1.发布任务。通过职教云或其他线上教学平台发布预习任务：（1）了解评论区互动形式的分类、多向评论区展示结构。（2）预习任务9实现文章详情页相关功能。2.发布测验。通过职教云或其他线上教学平台发布异步数据请求的相关知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习实现文章详情页相关功能的相关知识，并了解评论区互动形式的分类、多向评论区展示结构。2.基础测验。通过职教云完成教师发布的数据请求相关知识的测验，并整理易错题，写好技术笔记。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合启嘉校园社区模块文章详情页中的相关功能的实际开发过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生文章详情页、点赞、转发与关注作者功能、文章评论功能的实操技能和职业素养，保证教学过程与工作一致，教学评价与企业评价一致。教学过程中采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“学会分享、关爱和尊重他人的良好品质，传播正能量，树立正确的人生观和价值观”的思想，让学生形成“尊重他人劳动成果、传播正能量”的意识；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。教学环节教师活动学生活动第1学时情景导入与任务描述1(10分钟)1.展示生活中常用的几款移动应用的文章详情页相关功能。学习强国文章详情页学习强国文章详情页京东商城商品详情页京东商城商品详情页2.引出知识储备中《9.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.引出任务实施中《9.5.1获取文章详情》的内容。3.引发思考：文章详情页经常会包含哪些子功能？1.观察并体验文章详情页的执行逻辑。2.思考问题并小组讨论，分析文章详情页操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。任务实施编码实现2(35分钟)1.讲解文章详情页逻辑分析。2.分析文章详情页接口。3.编写调用获取文章详情接口的方法。2.案例式、分步骤、由浅入深讲解。（1）文章详情页功能实现的逻辑讲解。（2）利用分割和拼接的方式实现字符串与数组之间的转换。（3）关键代码演示。（4）指导学生仿作。（5）个别问题单独辅导，普遍问题集中讲解。3.教学重点：回调函数的正确应用。4.教学难点：能将图片地址字符串按指定字符分割成图片数组。重难点解决办法：教师教师演示、学生反复练习。1.听教师讲解知识，理解实现逻辑。2.完成代码的编写。在/api/community目录下新建article-details.js文件，编写调用获取文章详情接口的方法，关键代码如下：在article-details.vue中，调用getArticleContentApi方法获取文章详情数据，关键代码如下：3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第3学时情景导入与任务描述3(10分钟)1.通过小组讨论导入教学内容：（1）文章点赞/取消点赞功能如何实现？2.任务及约束分析：教师带领学生一起进行子任务的需求功能分析，理解文章点赞/取消点赞功能中涉及到的每一个字段、字段的功能及其字数和字符类型的限制。引出任务实施中《9.5.2实现文章点赞、转发与关注作者功能》的内容。3.思政融入：通过对功能的分析引导学生“学会分享、关爱和尊重他人的良好品质，传播正能量，树立正确的人生观和价值观”。4.引导思考：如何实现文章点赞功能的逻辑分析？1.跟随教师思考并回答问题。2.认真听教师梳理授课思路。3.在了解实现过程，思考编码逻辑，并认真听教师后面的讲解。任务实施编码实现3(35分钟)1.讲解文章点赞/取消点赞功能的实现逻辑。2.讲解文章点赞/取消点赞接口详情。3.讲解并演示文章点赞/取消点赞功能的代码实现。4.指导学生跟随练习实现文章点赞/取消点赞功能接口的封装操作。5.巡回指导，并纠错。6重点问题集中讲解，个别问题单独辅导。1.认真听教师讲解，思考并回答问题。2.仿写代码。3.调试、改bug，易错点整理笔记。4.帮助本组内其他同学解决问题。第4学时情景导入与任务描述4(10分钟)1.小组讨论：（1）转发文章功能如何实现？（2）关注/取关用户功能如何实现？文章点赞/取消点赞功能如何实现？2.组织学生以小组为单位阅读教材中转发文章功能和关注/取关用户功能的业务实现逻辑分析，并理解其实现逻辑3.抽查1~2个小组对实现逻辑的理解。4.对理解错误或者不完善的地方教师进行补充说。1.以小组为单位分析此部分的实现逻辑分析。2.总结归纳代码实现逻辑3.回答问题，查漏补缺。任务实施编码实现4(35分钟)1.教师演示转发文章功能接口的封装过程。2.指导学生跟随练习实现转发文章功能接口的封装操作。3.教师演示关注/取关用户功能接口的封装过程。4.指导学生跟随练习实现关注/取关用户功能接口的封装操作。5.巡回指导，并纠错。6重点问题集中讲解，个别问题单独辅导。1.学生跟随教师练习，完成转发文章功能接口、关注/取关用户功能接口的练习。2.有问题请教老师或同组同学。3.调试代码，修改bug，整理笔记。4.帮助其他同学修改代码。第5学时情景导入与任务描述5(10分钟)1.提问：文章评论功能有几种评论形式？2.引出任务实施中《9.5.3实现文章评论功能》的内容。3.引发思考：文章评论功能经常会包含哪些子功能？1.观察并体验文章评论功能的执行逻辑。2.思考问题并小组讨论，分析文章评论功能操作时，前后端的执行逻辑。3.总结本组讨论的结果，参与课堂互动。任务实施逻辑分析5(35分钟)1.教师演示查询文章评论功能的封装过程。2.指导学生跟随练习实现查询文章评论功能的封装操作。3.巡回指导，并纠错。4.重点问题集中讲解，个别问题单独辅导。5.发布任务：学生以小组为单位实现查询文章评论功能。1.理解实现逻辑。2.分组讨论实现过程。3.以小组为单位编写文章评论功能的验证逻辑。4.屏幕共享，讲解本小组编码逻辑的实现过程。5.组间互测，检查代码实现的逻辑是否正确。6.倾听其他小组的编码实现逻辑。7.整理笔记，记录易错点。第6学时任务实施编码实现6(30分钟)1.教师演示发布文章评论功能的封装过程。2.指导学生跟随练习实现发布文章评论功能的封装操作。3.讲解并演示删除评论的实现过程。4.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。5.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施重点问题讲解(15分钟)1.重点问题回顾与讲解（教学重难点）（1）props方法的使用（2）评论组件的使用1.听讲和认真理解。2.做技术笔记。第7学时任务实施逻辑分析7(10分钟)1.分析任务。要求学生以小组为单位阅读教材中《9.5.3实现文章评论功能》部分内容，完成以下三个部分的分析：（1）文章评论点赞/取消点赞接口功能分析。（2）实现逻辑分析。（3）后端接口分析。2.任意抽选3个不同的小组，上台展示本组分析成果。3.点评各组分析结果，使学生对这三部分的理解达到共识。4.教学重难点根据功能和接口参数，构建接口调用逻辑，实现真实数据展示使用图示法解决教学重难点！1.阅读教材资料。2.以小组为单位分析问题。3.上台表达本小组的成果。4.对本部分内容达成共识。5.设计图分析进行接口调用逻辑构建。任务实施编码实现7(25分钟)1.讲解并演示获取文章评论点赞/取消点赞页面接口调用的实现过程。2.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。3.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务实施编码实现8(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.学习测试概念及流程。认真听取教师讲解软件测试的概念及软件测试的基本流程。3.观看动画。认真观看教师播放的动画故事，并思考如何高效准确的进行测试。4.需求分析。认真听取教师讲解需求分析的方法，并跟随教师演示，同步