新工科背景下Web前端课程教学改革

李嘉明 李慧芬

摘要：在新工科背景下，对新型工程技术人才的培养提出了新的要求，以Web前端课程为例，针对传统教学存在的弊端，结合当下前端工程化开发的先进理念，从教学目标、教学内容、教学方法、考核方式四个方面提出了具体的教学改革措施，以期培养出科学基础厚、工程能力强、综合素质高的新型工科人才。

关键词：新工科;Web前端;前端工程化;教学改革;新型工科人才

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2020）24-0159-02

Abstract：Under the background of new engineering， new requirements are put forward for the cultivation of new engineering talents. Taking the web front-end course as an example， aiming at the disadvantages of traditional teaching and combining with the current advanced concept of front-end engineering development， specific teaching reform measures are proposed from four aspects of teaching objectives， teaching contents， teaching methods and assessment methods， in order to cultivate a scientific foundation and engineering A new type of engineering talents with strong ability and high comprehensive quality.

Key words：new engineering;web front-end;front-end engineering;teaching reform;new engineering talents

1 引言

在国家实施创新驱动发展、“中国制造2025”“互联网+”等重大发展战略的背景下，需要大量新型工科人才参与建设发展，需要高校探索更符合服务地区经济发展的人才培养模式，以支撑服务新技术、新业态、新产业、新模式为特点的新经济蓬勃发展[1]。

新工科提出于2016年，该概念提出后的一年多时间内，教育部组织高校进行深入探讨，形成“复旦共识”和“天大行动”[2]。与传统工科专业教学过程相比，新工科更为注重教学模式、教学方法、教学内容的实用创新性和交叉融合性，以培养科学基础厚、工程能力强、综合素质高的复合型人才[3]。本文以应用型本科院校的Web前端开发类课程为例，探索顺应时代发展要求的人才培养模式。

2 教学现状

随着Web2.0技术的普及，以及前后端分离方案与Web前端组件化思想的广泛传播，各大行业对Web前端开发方面的需求大幅提升[4-5]，同时也提高了前端工程师这一工作岗位的准入门槛。目前很多高校在Web前端开发课程教学方面存在的问题日益凸显，主要体现在课程教学目标与新工科工程教育的理念缺乏有效融合、教学内容与就业岗位需求存在一定的差距、教学方法仍停留在“满堂灌”阶段、考核评价方式相对单一。上述的种种原因造成了学生在就业市场上缺乏竞争力，而企业方面也不能招聘到符合岗位要求的人才，不利于地区经济的发展。由此可见，传统的Web前端课程教育模式无法适应新工科背景，急需提出新工科背景下Web前端课程的改革方案。

3 教学改革

针对以上前端工程课程现存的弊端，立足于应用型本科院校的实际情况，从教学目标、教学内容、教学方法、考核方式四个方面提出Web前端课程的改革方案。

（1）教学目标改革

教学目标是课程教学的出发点，只有選取合适的教学目标，Web前端课程的教学才能有的放矢，才能将教学成果有效地落实到学生的进步与发展上。

Web前端课程原有的教学目标是通过各占总课时一半的理论课和上机课，使学生在掌握扎实理论基础的同时，强化学生的动手实践能力，加强学生对Web编程概念的理解。然而，在实际上机课的教学中，只侧重于让学生完成给定的上机任务，忽略了对学生综合能力的培养。此外，由于每次上机课时间受限，且每次上机课之间的内容缺乏连贯性，上机课布置的任务相对简单、零散，不利于培养学生解决复杂工程问题的能力，不符合新工科背景下对学生能力的培养要求。

改革后的教学目标定位在项目驱动的基础上，课堂上引入真实的企业案例或学科竞赛的参赛题目，提高学生的工程实践能力。学生分组完成一个完整的工程实践项目，在完成工程实践项目的过程中，组内成员相互协作、配合，分工完成整个项目，逐步培养组内成员的团队协作能力和解决实际工程项目的能力。

（2）教学内容改革

教学内容是教学目标的支撑。随着Web2.0时代的到来，交互功能需求大幅提升，Web前端开发不再是开发仅供信息浏览的页面，而是更趋向于开发Web型的应用软件。为了提高Web型应用的前端渲染性能，涌现出众多优秀的JavaScript框架（Vue、React、Angular），这些新框架的出现，极大地颠覆了前端开发的开发模式，再加上具备模块化、组件化、规范化、自动化等特点的前端工程化解决方案的出现，前端开发的效率和质量得到了有效的保障[6]。Web前端课程教学内容也应与时俱进，使学生掌握至少一种主流的前端框架，并熟悉前端工程化的开发方法。

Web前端课程的教学内容由于知识点较多，分为“前端工程基础”和“前端工程设计”两门课程，分别为大二上学期、大二下学期的专业选修课。两门课程在教学内容连贯性上有所衔接，其中，“前端工程基础”是面向零基础学生的专业选修课，无其他先修课程要求，而“前端工程设计”的先修课程是“前端工程基础”，该课程要求学生具备一定的前端开发的基础知识。通过与企业讲师的多次探讨和一学年的实际教学探索，在获知了当下用人单位对前端工程师的用人要求之后，对教学内容做出了重大调整。其中，“前端工程基础”课程的变动不大，仍然是以HTML、CSS内容的学习为主，删除一些废弃的HTML标签的内容，新增了部分HTML5和CSS3的新特性。至于“前端工程设计”，保留JavaScript语法的教学内容，删减jQuery、Boostrap部分的教学内容，引入Vue.js框架知识点的学习。Vue.js是一个高效、灵活、易用的渐进式JavaScript框架，越来越多的企业在技术选型时，开始采用Vue.js。同时，Vue.js由于其渐进式的特点，既可以使用Vue.js构建小型项目或是项目中的某部分功能，也可以使用Vue.js构建大型复杂的Web应用，能够灵活地与现有的项目进行整合，学习曲线相对来说更为平滑，易于上手。因此，“前端工程设计”课程的教学内容以Vue.js框架的内容作为学习的主线。通过对Vue.js知识体系中vue-cli的学习，使得学生对前端工程化的理念有更加深刻的认识，进而能够开发出符合模块化、组件化、规范化、自动化等前端工程化要求的项目。

（3）教学方法改革

教学方法在很大程度上决定了学生的参与程度和互动效果，“满堂灌”的教学方法很难激发学生的学习热情，而教学方法创新的根本目的是在于提高教学质量。理论课和上机课的教学方法均实施了相应的改革措施。

理论课的授课场所是教室，采用线上、线下教学相结合的方式，在线下教学中加入抢答环节，激发学生的学习兴趣和成就感。上课前，利用慕课、超星平台上已有的优质教学资源，由任课老师指定特定的线上课程，组织学生在上课前完成对应章节的预习，学生带着问题进教室学习，听课效率会显著提高。上课期间，任课老师通过实际的代码演示，讲解每个重要知识点，学生借助一个个细致的案例代码，深刻理解并掌握相应的知识点。此外，在理论课上会设置抢答环节，能够极大地调动学生学习的积极性，并在课堂上主动思考，而不仅仅是被动地接收老师讲授的内容，进而提高学生的参与度，活跃课堂气氛。

上机课的授课场所是机房，以往的授课方式是学生完成老师布置的上机任务，其间遇到问题后，举手示意老师，老师再上前解答疑问。这种授课方式的弊端有两点：一是部分学生在碰到问题后不是先经过自己认真思考，过度依赖老师的解答，不利于学生分析问题和解决问题能力的培养;二是部分学生在完成上机任务时缺少紧迫感，对完成任务的时间把握不好，而编程又是一份注重效率的工作，这将不利于学生日后走上相应的工作岗位。因此，为了培养学生的独立思考能力和竞争意识，将单次上机课的时间一分为二。在上半场，学生独立完成上机任务，老师只负责维护机房秩序。在下半场，老师解答学生疑问，在解答疑问之前，评选出完成最快且达标的前10名同学，计入加分名单，通过这种方式激发学生的成就感，提升编程效率，增强竞争意识。到了工程实践项目开发阶段，老师在课上引导学生进行项目选题、需求分析、概要设计，启发学生解决问题的思路，每组在组内进行讨论，确定分工，并拟定项目计划，每次上机课将项目进度表交由老师查阅，并汇报项目推进时遇到的问题，老师启发学生找到问题的解决方案。

（4）考核方式改革

传统的考核方式其评判标准相对单一，有待完善，改革后的考核方式更为多元化，兼顾理论考核、项目实施、资料查阅等多个方面，可以更加全面地评估学生的水平。

课程考核由六个部分组成，包括考勤、卷面、课堂抢答、基础作业、项目实践、技术探索。考勤占总成绩的10%，考勤情况一定程度上反映出学生的学习态度;卷面占总成绩的50%，通过期末考试完成，考点覆盖教学大纲中的知识点，考核学生对基本理论、基本概念、基本编程方法的掌握情况;课堂抢答占总成绩的5%，课堂抢答表现优异的学生，平时对知识点的掌握较好，这部分学生在该项得分中能够获得较高的分数;基础作业占总成绩的5%，基础作业指的是教师在上机课上布置的上机任务，教师对学生一学期下来作业的完成情况进行评分，每次完成作业用时较短且作业达到要求的学生，会获得较高的分数;项目实践占总成绩的20%，通过提交项目报告书和演示项目运行的方式完成，考核学生的团队协作能力和工程实践能力;技术探索占总成绩的10%，该部分每位学生需提交一份新技术探索报告，并上台作技术分享演讲，演讲时间控制在5至10分钟，课时不够的情况下，每位学生通过录制视频的方式取代上台演讲，此举的目的在于引导学生对学科相关的前沿科技进行初步的探索，开阔学生的學术视野及科技视野，提高学生的自主创新能力。

4 结束语

新工科背景下，高校需培养工程技术强、综合素质高的新型工科人才，通过引入工程实践项目，学生能够全面地掌握前端工程化开发的方法，提高学习成就感和市场竞争力。Web前端课程教学改革中教学目标的调整、教学内容的优化、教学方法的运用、考核方式的完善，顺应我国新型工科人才的培养目标，具有一定的借鉴意义。

参考文献：

[1] 谢涛，薄钧戈，房琛琛.新工科背景下Web编程技术课程的实验教学改革研究[J].计算机教育，2019（1）：63-67，71.

[2] 钟登华.新工科建设的内涵与行动[J].高等工程教育研究，2017（3）：1-6.

[3] 阮梦黎.新工科背景下软件工程专业新模式研究[J].中国现代教育装备，2019（21）：107-110.

[4] 赵大伟，陈刚.Web前端开发技术人才培养模式研究[J].电脑知识与技术，2015，11（24）：109-110.

[5] 张志飞.前端工程化的研究与实践[J].电脑知识与技术，2016，12（25）：224-226.

[6] 周伟，郑世珏.Web前端工程化解决方案研究[J].信息技术，2018，42（8）：44-47.

[7] 刘佳，石婧雯，谢海燕.专业认证视角下独立学院教学质量保障体系的构建——以华南理工大学广州学院为例[J].教育教学论坛，2018（52）：8-9.

[8] 刘磊.以工作过程为导向的《大前端开发》课程规划与设计[J].现代计算机（专业版），2015（33）：13-16.

[9] 张敏，陶建林.HTML5前端开发课程教学改革实践[J].教育现代化，2018，5（52）：94-95，101.

【通联编辑：王力】