Web前端开发实践课程教学探索与实践

朱秋云, 肖涛, 文琦

摘要：Web前端开发是软件工程专业的核心课程，具有技术更新快、内容多等特点，对实践性要求高。该文对Web前端实践课程的课程体系、实践课程内容、项目化教学和实践考核等方面进行了相关的探索和实践。

关键词：Web前端开发；实践教学体系；项目化教学；实践考核

0.引言

Web前端开发课程包含的内容多、实践性强、相关技术更新快，理顺Web前端开发技术栈，设计相关的实践课程体系是必然的要求。

Web前端技术的快速发展，使得学校的实践课程建设跟不上技术的进步，不能满足社会生产需求。实践内容体系较单一，没有触及前端主流技术，主要针对这个三个基础技术来开展，缺乏对主流框架、工具的引入，不能满足实践项目开发。在前端框架方面的实践课时比较少，内容比较简单，未形成完整的Web前端实践体系。实践过程和实践考核方式有待改进，实践考核以小组学生做的成果为主，不能很好的反映每个学生分析问题、设计方案、解决问题的综合应用能力水平。

1.Web前端知识体系

Web前端工程师在知识体系上既要有广度，又要有深度，前端开发知识体系可从核心技术、扩展技术、编程思想、工程开发方面划分，如图1所示：

图1 前端技术知识体系

Web前端开发以模块化为基础，形成组件化、工程化、自动化的开发模式，衍生出前端开发框架。前端开发框架很多，体系复杂，大致可以分为两大类：JS框架和UI框架。JS框架是JavaScript的类库框架，目前是Angular、React、Vue三足鼎立。UI框架组合HTML、CSS、JS，Bootstrap是其中的佼佼者。

2.进阶式实践教学体系设计与构建

Web前端开发教学注重实践性，除了基础的前端开发技术课程之外，还设计了多个后续的、综合的实践课程，如表1所示。设计在大二上学期开设Web前端开发技术基础课程，包括理论和上机课；大二下学期开设Web前端开发的进阶实践课程；大三开设后端开发技术相关的理论和实践课程；大四开设Web应用程序开发的综合实践课程，包括完整的前后端开发实践。

表1  渐进式Web前端开发实训阶段设计

阶段	课程	知识目标	能力目标
Web前端基础	Web前端开发技术	掌握HTML的常用标签；掌握CSS常用样式、布局，CSS3的应用；掌握Javascript基础语法、BOM操作、DOM操作	培养Web前端开发的基本能力，包括代码编写、调试；能够制作出完整的网页
Web前端进阶	专业基础技能实践	熟悉Bootstrap框架;熟悉Vue基础语法、组件化、路由；掌握Vue-cli用法；了解Node.js，Webpack等	能够制作响应式网页；能够制作小型的单页面应用网站的前端
Web应用综合	专业综合实训	Vue框架的高级用法；前后端交互技术；熟悉原型设计、git等工具	完成完整的、较复杂的Web应用程序

4.项目化教学探索

项目化教学以学生为中心、以项目为支撑，将传授知识点融入到项目中，激励学生“做中学”、“学中做”，提高学生的积极性、自主性。教师设计项目目标任务，学生调研分析、学习、讨论、设计实施项目；项目总结、展示、评价。在项目化教学中遵循一下几点原则：

1. 项目目标难易适中，具有典型性

项目目标应该难易适中，让学生能够运用已有知识和技能，通过自主学习和讨论、合作，付出一定的努力后能够较好的完成目标任务。学生有了成就感，也能进一步促进学习积极性。选择的项目要具有典型性，目标清晰、重点突出。例如以前介绍列表的应用和美化时，通常是展示水平菜单、垂直菜单效果，然后编码演示菜单的制作过程。应用项目化，重新设计教学过程，以结果为导向，以能力为目标，学生通过学习、实践，能够设计制作网页菜单，扩展了学生的知识面，提高了要求。项目以任务单的方式发放给学生，如表2所示。

表2  网页菜单项目——任务单

班级：        小组号：    小组成员：

一、目标任务

制作网页菜单。

二、学习指南

通过观看阅读教材、教学PPT、教学视频，了解列表的应用、菜单的制作 通过互联网搜集网页菜单案例

三、学习任务

1）调研了解有哪些常见菜单类型？ 2）菜单的html结构有哪些？必须用列表吗？ 3）怎么样制作弹出菜单？ 4）制作两个不通类型的菜单，简要说明实现原理。粘贴效果图，以附件方式提交项目文件。

2. 项目设计循序渐进

教学项目设计由简单到复杂、循序渐进，从简单网页、响应式网页到网站前端（多页面、多组件）。用2-3个教学项目贯穿整个Web前端开发实践的课程，同样的网站主题，鼓励学生由易到难的、使用多种开发技术来实现。例如前端开发基础课程选择以我们学院的主页为例，从分析网页结构、特效开始，参照主页效果自己实现一遍，然后进一步要求学生自己设计实现一下；到了前端进阶课程要求用响应式、单页面应用的重新设计实现。学生对选题熟悉、素材容易获取，有利于提高学生积极性。

3. 监督指导项目实施

通过项目分析、讨论、实施及相关知识点学习，让师生共同参与到项目任务的开发和实践中。监督学生项目的实施，确保小组选题、分工、项目设计、项目实现等过程的真实有效。教师作为引导者，为学生的实践提供意见和建议，引导学生“做中学，学中做”，激发学生的自主性、创造性。

5.实践考核探索

实践考核从实训过程（平时成绩30%）和作品成果（项目成绩70%）两个方面评价，由学生和教师共同评分来评定学生成绩。对学生选题、项目设计方案、阶段性成果、最终成果等实践过程开展过程监控，对各个任务设计评价指标。在实践不同阶段，让小组进行汇报，设计评价标准，采用学生自评、小组成员互评、小组间互评等方式开展评价，最终成绩由教师评价（60%）和学生评价（40%）构成，提高学生参与实践项目的积极性，提升学生的综合实践能力，锻炼学生文档撰写能力。

平时成绩的评定依托泛雅（学习通）平台上的学习情况统计数据，评价项目包括：课程资料学习情况、考勤、课题活动、作业等。             

学生作品根据项目效果、项目报告、项目答辩情况评定，从功能性、美观性、创新性、作品展示及答辩等方面进行评定。

6.结语

根据学生实际情况和需求，渐进式的开设Web前端开发实践系列课程，包括Web前端基础、进阶、综合应用等相关课程。在泛雅平台建设在线课堂，建设实践配套资源，利用平台功能逐步开展混合式教学实践。开展了项目式教学，培养学生的职业能力，实现专业培养目标。今后要在学生竞赛、校企合作等方面进行新的探索。

参考文献

[1]李娟,李宏博,苏丹等.Web前端开发课程项目式教学改革与实践[J].高师理科学刊,2022,42(10):78-81.

[2]杨云,张剑.web前端应用开发技术课程混合式教学探索与实践[J].高教学刊,2022,8(30):121-124.DOI:10.19980/j.CN23-1593/G4.2022.30.030.

[3]李永锋.应用型本科院校软件技术类课程的教学实践研究[J].计算机教育,2019,No.300(12):117-121.DOI:10.16512/j.cnki.jsjjy.2019.12.029.

[4]褚建萍.基于Web前端开发技术的应用研究[J].电子技术与软件工程,2022,No.233(15):41-44.

第一作者简介：朱秋云（1979-），女，汉族，硕士，讲师。研究方向：软件工程、Web前端开发。