孙勇 韦伟 路红 徐逸卿 陈小云
*项目来源：南京理工大学紫金学院产教融合型一流课程建设课题“Web程序设计基础”（课程号：03032031）；
南京理工大学
紫金学院精品课程建设课题“Web程序设计基础”（课程号：03032031）。
作者简介：孙勇，高级工程师；
韦伟、路红、徐逸卿，副教授；
陈小云，讲师。
DOI：10.3969/j.issn.1671-489X.2024.10.078
摘 要 针对传统Web程序设计基础教学中存在的理论知识讲授和实践能力培养脱节、教学内容陈旧、缺乏项目工程思维等问题，分析课程改革的必要性，探讨基于项目驱动的Web程序设计基础课程改革思路。通过分析实践项目的案例，详细阐述基于项目驱动的Web程序设计基础课程的教学模式和教学方法，并且对该教学模式进行评估和总结。实践结果表明，基于项目驱动的Web程序设计基础课程教学模式是一种有效的教学方法，学生能够深入理解并掌握Web程序设计的基本原理和技术，并且在实践中积累经验，提升综合素质和实际应用能力。
关键词 项目驱动；
Web程序设计基础；
教学改革
中图分类号：G642.0 文献标识码：B
文章编号：1671-489X（2024）10-0078-04
0 引言
随着互联网的快速发展和普及，Web程序设计逐渐成为一门重要的技术和工具。Web程序设计作为一种基于Web的开发技术，覆盖的知识点非常广泛，如HTML、CSS、JavaScript、Ajax等。同时，Web程序设计在各个领域都有广泛应用，如企业级应用开发、移动互联网等，因此，Web程序设计已成为各大高校计算机专业的一门核心课程。但传统的Web程序设计基础课程教学模式往往存在一些问题，如理论知识讲授和实践能力培养脱节、教学内容陈旧、缺乏项目工程思维等。为了更好地培养学生的项目实践能力，使课程教学更好地适用于应用型人才的培养要求[1]，基于项目驱动的教学模式被引入Web程序设计基础课程，通过实践项目来培养学生的实际应用能力和实际解决问题的能力。本文对该教学模式进行评估和总结，以提高Web程序设计基础课程教学质量和学生的实际应用能力。
1 课程教学现状分析
传统的Web程序设计基础课程通常采用理论与实践相结合的教学模式。其中，理论课程主要包括HTML、CSS、JavaScript等前端技术知识以及MySQL等后端技术知识；
实践课程主要包括基础实验和综合实验，通过实践操作来巩固和应用理论知识。然而传统的Web程序设计基础课程教学模式存在一些问题。
1.1 教学知识点涉猎面较宽
Web程序设计基础课程知识点涉猎面较宽，知识点包括HTML、CSS、JavaScript、Ajax等。其中HTML包含大量的标签、属性，CSS包含各种选择器和页面布局的方式，JavaScript包含脚本语言、对象模型，Ajax主要涉及网页数据的异步传输。课程的知识点相对分散，学生想要快速掌握全部知识点难度很大，其中个别知识点存在前后不连贯的情况，特别是一旦涉及多个知识点的组合，需要动手实践时往往感到无从下手[2]。
1.2 理论知识讲授和实践能力培养脱节
Web程序设计基础课程对于实践性要求非常高，课程目标是学习市场主流的Web技术，提高学生的个人编程能力、团队合作能力，为企业输出更多合格的技能人才。但传统的Web程序设计基础课程教学模式侧重课程理论的讲授，对实践能力的培养存在不足，学生只是通过一些基础实验和综合实验来巩固与应用理论知识；
实验的设计和实现过程往往也是固定的，缺少自由度和实践性，时间久了容易挫伤学生学习的主动性、积极性，进而造成部分学生对课程失去兴趣[3]。
1.3 教学内容陈旧
随着Web应用的日益普及，用户对于B/S架构系统的完善性、体验性要求也越来越高。B/S架构中涉及的Web技术进入一个快速发展的领域，整个技术体系的更新升级非常频繁。但目前授课过程中往往还是采用老旧的教材，教材中涉及的知识点、案例、题库、开发工具都相对陈旧，比如CSS最新的标准已经更新到CSS3，HTML已经完成第五次重大修改升级为HTML5。陈旧的教材与市场主流的Web技术已经脱节，教学无法满足企业对应用型人才的培养要求。
1.4 缺乏项目工程思维
编程不仅仅是为了实现功能，还需要注重代码的可读性、可扩展性。但目前大部分学生在编写代码时往往只注重功能点的完成，忽略了项目工程思维，编写的代码存在命名不规范、编程没有缩进、代码布局不合理、随意在代码中添加空格和注释等问题。另外，学生在编写代码时没有考虑后期需求的变更、功能点的新增，导致后期牵一发而动全身，往往因为新增一个小需求而对代码进行大刀阔斧的修改，后期代码的扩展性非常差，这些都需要在前期设计阶段做好足够的扩展设计。
2 课程教学改革思路
基于项目驱动的Web程序设计基础课程教学模式是一种以实践项目为主导的教学模式，它将传统的课堂教学转化为项目驱动的教学，通过实践项目来培养学生的实际应用能力和实际解决问题的能力。该教学模式改革思路如下。
2.1 以学生为中心
课前，教师发布本次课程的理论学习视频，让学生利用课前时间进行知识预习，通过预习可以提前了解本次课程学习的方向以及知识的重点与难点；
课中，通过课前发布学习视频进行预习，可以发现等到上课时不再是教师的覆盖式讲解，而是重点解决学生有疑惑的知识点和难点，并结合生生、师生互动探讨课程的知识点，最大限度地提高了课堂的利用效率以及学生的积极性[4]；
课后，当完成某一块知识点的理论教学之后，将安排一次实践环节，帮助学生及时通过动手实践来巩固和迁移所学知识。在实践中，教师主要针对学生遇到的共性问题和难点问题进行讲解与演示，指导学生顺利完成实验内容，以达到知识巩固和利用的学习目标。
通过以上方式，一方面让学生养成课前预习的习惯，解决教学课时数量不足的问题；
另一方面提高学生学习的自主性和积极性，通过合理地将教学单元设置为课前、课中和课后不同的形式，促进学生更加高效地学习。
2.2 以实践项目为主
课程改革注重企业主流技术的融入和实践能力的培养，将合作企业真实的开发项目融入教学过程中，以项目驱动授课[5]，按照实际工作流程，遵循学生的认知规律，将项目模块分解到各个教学知识点中，与企业共同设计教学资源，如课程目标、培养标准、教学大纲等。每年保证课程资源一定比例的更新，使得课程设计具有较强的实用性和时效性。通过企业项目驱动授课，让学生学习市场主流的Web技术，不至于与市场脱节，也有利于提升学生的动手实践能力。
在实践项目环节，学生需要自己设计和实现一个完整的Web应用程序，包括前端设计、后端开发和数据库设计等方面。同时，学生需要从理论到实践，从设计到实现，全面掌握相关知识，培养所学知识的应用能力和实际解决问题的能力。
另外，在学生学科竞赛环节邀请企业专家共同参与指导。学科竞赛不仅仅体现学生对课堂理论知识的掌握情况，也是学生动手实践能力的展示。通过学科竞赛，学生还能掌握行业最新动态，提高综合竞争力。
通过以项目驱动的方式促进学生掌握主流的Web开发技术，具备运用这些技术进行竞赛、提高创新的能力。在最后的课程设计和毕业设计环节，邀请企业专家共同参与学生的答辩与点评，对于表现优秀的学生优先推荐到企业中参与项目的实际研发，真正做到学以致用。
2.3 自由度高
项目驱动的Web程序设计基础课程教学模式的一个重要特点是自由度高，学生可以自主选择项目主题和项目技术栈，根据自己的兴趣和专业方向来设计与实现一个符合实际需求的Web应用程序。这样的设计可以大大激发学生的学习兴趣和积极性，也能够更好地发掘学生的潜力和创新能力。同时，学生需要组成团队共同完成整个项目，通过团队合作，学生可以相互协助解决项目实践中遇到的问题，相互协作和学习，培养良好的团队合作精神和沟通协调能力。
2.4 课程思政的育人性
学校定位应用型本科，面向软件行业。软件开发需要培养作风严谨、专业扎实，具有人文素质、国际视野、服务意识、创新精神和社会责任感，能够解决复杂工程问题的实用型、复合型软件开发人才[6]。在课堂中需要深度挖掘课程的思政元素，实现思政和专业课程的融合（表1），在教育教学中融入社会主义核心价值观的内容和要求，坚持理论学习、动手实践和思政教育相统一，做到润物无声、水到渠成。
2.5 评价机制多样化
基于项目驱动的Web程序设计基础课程教学模式的评价机制是多样化的，包括项目进度和成果的评估、团队合作和沟通协调能力的评估、个人能力和贡献的评估等多个方面。这样的设计可以更全面地评价学生的学习成果和能力，促进学生综合素质的全面提升。
3 基于项目驱动的Web程序设计基础课程教学模式实践案例
3.1 实践项目主题和技术栈的选择
基于项目驱动的Web程序设计基础课程教学模式中，实践项目主题和技术栈的选择是非常关键的。在本案例中，笔者选择一个社交网络应用程序作为实践项目主题，技术栈包括HTML、CSS、JavaScript、React、Node.js和MongoDB等。
3.2 实践项目的设计和实现
在实践项目的设计和实现过程中，可以按照以下步骤进行。
3.2.1 需求分析和功能设计
在需求分析和功能设计阶段，通过调研和用户访谈等方式确定社交网络应用程序的主要功能和特点，包括用户注册和登录、个人空间管理、好友管理、动态发布和评论等。在功能设计过程中，采用敏捷开发方法，将整个应用程序划分成多个小功能点，每个小功能点都可以独立进行开发和测试。
3.2.2 技术选型和架构设计
在技术选型和架构设计阶段，选择React作为前端框架，Node.js作为后端框架，MongoDB作为数据库，采用MERN（MongoDB、Express、React、Node.js）技术栈。这个技术栈具有一致性和高效性，可以使前后端开发人员高效协作，同时提高开发
质量。
3.2.3 代码实现和测试
在代码实现和测试阶段，采用Git进行版本控制，使用Trello进行项目管理，每个小功能的开发和测试都采用敏捷开发方法，每个开发人员都有自己的任务和进度，定期进行团队会议和代码评审，确保整个项目的质量和进度。
3.3 实践效果评价
在本案例中，笔者采用多个评价指标对实践效果进行评价，包括项目成果质量、团队合作和沟通能力、个人能力和贡献等。评价结果如下。
3.3.1 项目成果质量
社交网络应用程序实现预期的功能，界面设计美观、用户体验良好，代码质量高，符合工程化标准，能够满足实际需求。
3.3.2 团队合作和沟通协调能力
团队合作紧密，每个成员都有自己的任务和进度，能够相互协作和学习，沟通协调能力强，及时解决问题和调整方向。
3.3.3 个人能力和贡献
每个成员都有自己的专业领域和技术优势，能够充分发挥自己的能力和创新精神，也能够与团队成员相互协作和学习，贡献较大。
4 基于项目驱动的Web程序设计基础课程教学模式优点和待改进之处
4.1 教学模式的优点
1）学生能够更深入地理解和掌握Web程序设计的实践技术和方法。
2）学生能够在实践中培养创新思维和创业精神，发掘自身潜力和兴趣。
3）学生能够通过团队合作和沟通协调能力的培养，增强综合素质和竞争力。
4）评价机制多样化，能够更全面地评价学生的学习成果和能力，促进学生综合素质的全面提升。
4.2 教学模式的待改进之处
1）对于一些学生而言，自由度过高可能导致学习效率和质量下降，需要教师指导和帮助。
2）对于某些特殊的主题或项目，可能需要更专业的技术支持和指导，以保证项目的顺利实现和质量。
3）项目驱动的教学需要耗费更多的时间和精力，需要更加严谨的教学计划和评价机制，以确保教学效果和质量。
4）学生个人能力和兴趣的差异可能导致团队内部合作和沟通协调的困难，需要教师的指导和调整。
5 结论
本研究探讨基于项目驱动的Web程序设计基础课程教学模式的应用，通过实践案例的分析和评价，发现该教学模式能够有效地提高学生的学习兴趣和学习质量，培养学生的创新意识和创业精神，增强学生的综合素质和竞争力。但该模式需要更加严谨的教学计划和评价机制来确保教学效果和质量，也需要充分考虑学生个人能力和兴趣的差异，加强团队内部合作和沟通协调。
6 参考文献
[1] 韩保清.以新工科建设推动地方高校向应用型转变[J].中国高等教育，2021（2）：10-12.
[2] 古锐.贯穿式案例教学法在Web程序设计课程教学中的应用研究[J].电脑知识与技术，2019，15（11）：120-121.
[3] 高广银，储久良，成艳，等.线上线下混合式一流课程建设研究与实践：以“Web前端开发技术”课程为例[J].计算机时代，2022（4）：77-79.
[4] 罗剑，邢翠，聂鑫.混合式教学模式下Web前端技术教学资源建设研究[J].软件导刊，2021，20（7）：198-201.
[5] 随婷婷，陈年生，黎明.项目式驱动的Web程序设计教学改革研究[J].福建电脑，2019，35（12）：53-54.
[6] 谢玲，陆坤，迟宗正.工程认证背景下的软件人才培养体系探讨[J].实验室科学，2017，20（4）：232-235，240
猜你喜欢 项目驱动教学改革 项目驱动教学法在机械制造工程学课程教学中的应用考试周刊(2016年95期)2016-12-21以项目驱动为核心的电子技术综合设计课程教学改革与探索科技视界(2016年26期)2016-12-17依托工作室的软件工程实践教学研究电脑知识与技术(2016年24期)2016-11-14基于物联网项目驱动的嵌入式系统教学改革的研究与实践电脑知识与技术(2016年24期)2016-11-14基于“红色之旅”项目驱动的《调酒与咖啡》工作室制人才培养机制探讨文理导航(2016年30期)2016-11-12中职学校“生本课堂”的调查研究与实践成才之路(2016年25期)2016-10-08高校三维动画课程教学方法研究成才之路(2016年25期)2016-10-08基于人才培养的技工学校德育实效性研究成才之路(2016年25期)2016-10-08现代信息技术在高职数学教学改革中的应用研究科技视界(2016年20期)2016-09-29以职业技能竞赛为导向的高职单片机实践教学改革研究科技视界(2016年20期)2016-09-29