Web前端开发课程建设的探索与实践

龙军，王家宁

摘要：本文介绍Web前端发展史及相关技术，阐述Web前端开发职业技能等级证书知识体系、考纲和考点，研究Web前端开发课程体系构建，开展教材及课程内容的教学改革实践，进行计算机相关专业1+X证书教育教学的探索总结。

关键词：1+X;职业证书;前端开发;Web全栈开发

中图分类号：TN91 1-34    文献标识码：A

文章编号：1009-3044（2021）19-0196-03

前端开发指用HTML、CSS、JavaScript及衍生的技术、框架、解决方案创建Web/App前端界面的过程。随着用户体验和交互重要性提升，界面设计更加精美、人性化和个性化，Web前端开发人才需求大，大学生就业前景广阔。

2019年3月，工信部发布《Web前端开发职业技能等级标准》（简称该标准），明确初、中、高三个等级的具体内容和要求。4月教育部、发改委等部门印发《关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案》，开启“1+X证书”试点，进行复合型人才培养的改革，拓展技术技能人才就业创业本领。之后教育部发布《关于做好首批1+X证书制度试点工作》，将Web前端开发职业技能等级证书纳入首批启动试点证书。

1 Web前端开发的发展历史

Web前端开发从网页制作开始，伴随互联网发展逐步壮大。Web1.0时，初期是以图片和文字为主的静态网站，随着ASP、JSP、PHP等交互型技术出现，动态网站开始普及。2005年Web2.0时，类似桌面软件的Web应用涌现，网页更加生动、交互更加友好，用户从浏览者发展为参与者和创造者。目前是Web3.0初期，特点是分布式，以网络化和个性化提供更多人工智能服务，完全基于Web，用浏览器即可实现复杂软件的功能。同时移动互联网带来大量高性能的移动终端和无线网络，移动端开发成为趋势。

2 Web前端开发核心技术

Web前端开发由美工、浏览器兼容、CSS、HTML、交互式设计和视觉设计等组成。

HTML超文本标记语言是Web页面的主体，用于描述文本结构。HTML5是HTML最新版本，引入多项新技术，增强了对应用的支持，使Web技术接近原生技术。

CSS层叠样式表用一系列规则美化网页元素，把网页内容结构代码和格式风格代码分离。

JavaScript是基于ECMAScript规范的直译式脚本语言。ES6规范泛指2015年发布的JavaScript标准及新增特性。

Apache是开源网页服务器，能在多数操作系统中运行，可通过API进行扩充。

Node.js是运行在服务端的JavaScript，使用事件驱动、非阻塞式I/O模型。

jQuery是一快速JavaScript库，简化HTML文档节点查找、Ajax互动、事件处理和动画。

jQueryMobile是移动Web应用框架，用HTML5、CSS3和少量脚本对页面进行布局。

Bootstrap是推特公司基于HTML、CSS、JavaScript的前端开发框架。

Vue.js是构建交互式的Web界面库，采用MVVM框架模式，通过API实现响应的数据绑定和组合的视图组件。

Laravel是开源PHP框架，采用MVC框架模式，重用不同框架的现有组件，设计的Web应用程序更加结构化和实用。

Django是用Python写的开源Web开发框架，采用MTV框架模式，有众多第三方插件，具有较强的可扩展性。

3 该标准的考纲

该标准依据专业活动、围绕专业技能，充分考虑从业人员的职业发展，以职业素养、职业技能、知识水平为主要框架，有HTML、CSS、JavaScript、ES6标准、数据库应用、项目模块化开发、复杂交互与优化等知识和能力模块，能根据技术发展进行灵活调整。标准密切贴合国家、产业、市场和学生就业需要。

主要岗位：Web/App网页设计与制作，构建响应式页面，搭建、规划、设计网站。

职业技能特征：较强逻辑思维能力，良好代码编写习惯，沟通能力强，运用色彩搭配、点线面布局来设计较好用户体验网站页面的能力。

考核方式：采用上机形式的闭卷考试，包括理论和实操，两项成绩均合格才能获得相应级别的职业技能等级证书。

4 该标准的知识体系

该标准分为初、中、高三级，依次具有静态网页开发能力、动态网页设计开发能力、复杂网页设计开发和网站架构设计规划能力。

初级证书考查100%初级知识模块，中级证书考查20%初级和80%中级知识模块，高级证书考查17%初级、29%中级和54%高级知识模块。

5 该标准的考点

该标准涵盖静态网站、动态网站、移动端静态网站、移动端动态网站4个工作领域，各级知识能力模块逐级深化。

6 Web前端开发的课程体系

Web前端开发有HTML5+CSS3、JavaScript+Ajax、PHP+MySQL、RESTful、jQuery/jQuery Mobile、开发框架、移动App、软件工程等多门课程，由不同教师跨多个学期组织教学，知识点不连贯或重复，学生对课程衔接理解不深。

通過对就业岗位研究，以需求和应用为导向，结合考证，打破课程间的隔阂，用模块化教学模式，打通Web前端开发人才岗位链、能力链、技术链和知识链，将不同课程优化融合成一门课程，建立起循序渐进、螺旋上升的模块化课程体系。

课程基于分布式应用系统，以Restful为纽带，将各类应用连接起来，实现不同系统的数据共享，进行Web应用全栈开发。着力培养学生的Web编程技能、工程实践能力、创新创业素质和职业道德素养，将课程的教育教学与考证结合，加入软件工程和测试模块，为培养Web应用全栈工程师奠定基础。