大数据专业WEB开发技术教学研究

张万方，李 翔，王媛媛

(淮阴工学院 计算机与软件工程学院，江苏 淮安 223003)

WEB开发技术课程被计算机类本科专业(数据科学与大数据技术专业)人才培养方案设置为专业必修课，是计算机、大数据专业等方向本科学生必备的专业基础知识和技能之一。近年来，全栈工程师(Full Stack Developer，也称为全端工程师)的概念被广泛提及，已经成为当今最热门和需求量最大的 IT 职位之一。全栈工程师可以胜任一个完整项目的前端、后端开发和测试、网站策划宣传过程中的一系列环节，WEB前端开发技术正是全栈工程师技术需求的最重要的必备基础技能和需求。

WEB开发技术主要分WEB前端和后端开发技术。在目前的项目和产品开发中，由于除产品功能外，用户体验也是测试产品成功率的标准之一，因此WEB前端技术变得越来越重要。项目用户体验取决于前端技术的实现，WEB前端技术例如HTML5，CSS3，JavaScript，前端框架，例如Vue，Angular，React，或第三方库BootStrap，JQuery，Element UI，LayUI，ECharts，LESS以及SASS等[1-2]。WEB后端开发技术主要包括多种后端编程语言，例如Python，Java，Go，PHP，C#，Ruby，Perl等；良好的开发框架，例如JAVA Spring，MyBatis，Hibernate，Python Django，PHP thinkphp，nodeJs express，beego等；数据存储调用，例如MySQL，MongoDB，Redis，Oracle，SQLServer以及API接口等；WEB项目发布技术，例如Tomcat，Nginx，IIS等[3]。

数据科学与大数据技术专业作为新开设的计算机类本科专业之一，从2016年全国首批3所高校获批至2019年全国共有470多所高校获批该专业。众多高校设立了大数据专业，我们可能面对一些共性问题：(1)教学中的大数据从哪里来？(2)相同课程在大数据专业怎么教学？(3)大数据实践教学平台怎么构建？(4)大数据实训真实案例怎么构建？

针对上述问题(2)，研究WEB开发技术课程在大数据专业的教学，通过对当前WEB开发技术知识点进行分解，针对大数据专业人才培养目标，探讨大数据专业开设WEB开发技术课程的必要性、WEB前端技术教学内容、WEB后端技术教学内容以及WEB前后端分离教学方案。

1 大数据专业开设WEB开发技术课程的必要性

大数据专业的核心课程主要包括Python程序设计、数据库原理及应用、数据挖掘、操作系统、大数据采集与存储和大数据分析及可视化等课程[4]。这些课程中很多需要通过WEB系统或者移动APP应用对数据进行展示，比如大数据采集与存储课程中需要学生使用网络爬虫对互联网数据进行爬取，爬取的首要步骤就是对目标网站的HTML代码进行分析，使用XPath或者CSS选择器进行WEB元素定位，然后进行数据爬取，最后对爬取到的数据还需要进行可视化并通过WEB系统进行展示，这些都需要用到WEB开发相关技术。另外，大数据专业学生将来完成学业后走向工作岗位，企业不仅需要学生使用所学知识对数据进行搜集、清洗、预处理和分析，也会需要我们培养的学生能够使用所学的知识完成相关的WEB系统和移动APP应用开发。综上所述，在数据科学与大数据技术专业开设WEB开发技术课程十分必要。

2 大数据专业WEB前端开发技术教学研究

2.1 大数据专业WEB前端开发技术

在大数据专业教学中，前端开发技术基本与计算机科学与技术或者软件工程专业的学生差不多，主要包括HTML、CSS、JavaScript、UI设计四大部分。其中CSS部分会加入一个Bootstrap框架的扩展、JavaScript部分会加入一个jQuery框架的扩展。UI设计中，主要讲授Web图像处理的Logo和Banner制作方法。在开发工具方面，前端课程中可以使用例如HBuilder，Visual Studio Code，WebStorm和Sublime等开发工具。开发环境主要采用Node.js，Npm，Cnpm，Webpack，ECMAScript6，基于 Promise 的 HTTP 请求客户端axios，以及为开发者、设计师和产品经理设计的基于Vue 2.0 的组件库Element UI。

随着移动设备的普及，要使用户通过各种尺寸的移动设备浏览网站可以获得更好的视觉效果，教学内容不仅面向PC端的WEB应用，也面向移动APP的WEB应用，如在响应式布局Bootstrap环节中会用到自适应的流式布局。此外在前端开发框架中会给学生介绍到目前比较流行的Vue.js框架，Vue.js是一个用于构建用户界面的开源JavaScript的WEB应用框架，可以更好地组织和简化WEB开发，Vue有着近百分之九十的开发者满意度。Vue基于MVVM(Model-View-ViewModel)设计思想，提供MVVM数据双向绑定的库。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。组件系统是 Vue 的核心概念，Vue的组件化应用构建思想，使用小型、独立和通常可复用的组件通过相互引用构建大型应用项目，实现了如搭积木的方法构建页面。然而，由于课时有限，这个环节可以放在综合实训里面。浏览器兼容性教学上，这两年由于Windows10的普及，淘汰了很多IE10版本以下的IE浏览器，课程在教学中采用Google的Chrome浏览器进行演示和调试。图1为常用的WEB前端开发技术路线，用五角星(★)标注了大数据专业推荐的前端开发技术路线。

2.2 WEB前端开发课程阶段考核

WEB前端开发教学中，可以根据HTML5，CSS3/LESS，JavaScript/JQuery/BootStrap，Vue.js/Element UI/ECharts四部分教学单元内容分别布置知识点和主题风格具有延续性的四次单元作业。单元作品主题可以选择学生兴趣相关、个人博客、学生宿舍管理、教学管理、电商相关网站等，要求学生完成第一次的课程阶段作品，教师分单元点评同学的作品并提出改进意见，采用教师指导学生在挑战杯、江苏省“互联网+”大赛、计算机设计等大赛中的优秀作品作为展示样例。课程考核体现面向工程教育认证和以能力培养为目标的教学理念，为了更真实、准确地反应学生对WEB开发技能的实际掌握情况，课程考核重点是测试学生运用所学知识对实际项目进行分析、设计、编码的能力。课程期末作品要求应用课程核心知识结构设计和开发一个完整的前端项目。图2为WEB前端开发技术课程阶段考核路线，用五角星(★)标注了大数据专业推荐的WEB前端阶段考核阶段作品。

图1 WEB前端开发技术路线

图2 WEB前端开发技术课程阶段考核路线

3 大数据专业WEB后端开发技术教学研究

3.1 大数据专业WEB后端开发技术

常用的WEB后端编程语言有Java，C#，Python，PHP，Go，R等[5]，其中Python，Java，R，Go在大数据领域应用更广泛[6]。目前大数据专业主要开设的编程语言是Python和JAVA。由于Python有着非常丰富的工具包，具备Python基础编程能力的开发者只需要调用各类工具包就可以轻松完成很多任务，相当于“前人栽树，后人乘凉”。因此，Python在人工智能、机器学习、数据挖掘、数据可视化、WEB开发、自动化运维等方面有着广泛的应用。综上所述，我们推荐大数据专业学生采用Python作为WEB后端语言进行开发，这样可以更好地发挥Python语言“胶水语言”的作用，使一个项目可以从数据爬取、数据清洗、数据分析、数据可视化、WEB服务展示均用Python实现，真正做到“Python全栈开发”。图3为常用的WEB后端开发技术，由于编程语言较多，在Web后端开放框架中只列举了大数据专业常用Python和Java语言的WEB后端框架，用五角星(★)标注了大数据专业推荐的后端开发技术路线。

图3 常用的WEB后端开发技术

3.2 WEB后端框架教学研究

WEB后端开发中有一些功能是可以复用的，如用户注册、用户登录、窗体输入、网站数据库连接、数据库增、删、改、查等。于是各种编程语言出现了集成部分通用功能模块的网站框架(WEB Framework)，开发者可以使用一些简单的命令生成一个WEB系统的基本框架，然后遵循框架的设计说明，系统且结构化地设计出符合用户实际项目的WEB应用系统。Python语言常用的WEB后端框架主要包括Django，Flask，Tornado和Twisted[7]，其中Django以开发速度快、代码结构清晰以及功能齐全等优点，成为最受开发者青睐的WEB开放框架。

Django框架采用MTV(Model- Template-View)设计模式，其借鉴了经典的MVC(Model-View-Controller)设计思想，将交互过程分成了三层，各层之间松耦合[8]。其中， Model层是数据存取层，处理与数据相关的所有事务； Template层是处理页面的显示；View层是业务逻辑层，是Model层与Template层之间的桥梁，用来存取模型和调取模板的相关逻辑。Django的MTV设计模式交互过程如图4所示。

图4 Django MTV设计模式交互过程

Django支持对象关系映射(Object Relational Mapping，ORM)，能够把对象与数据库中的表关联起来，对象的属性映射到表的各个字段，同时还把对表的操作对应到对对象的操作，实现了对象-SQL、SQL-对象的双向过程转换。Django为ORM提供了全面的支持，适配多种常用的数据库，包括MySQL，PostgreSQL，Oracle，SQLite，MongoDB等。

4 WEB“前后端分离”教学研究

目前，前后端分离设计模式已经成为互联网项目开发的业界标准使用方式，是WEB开发中新的技术标杆，通过Tomcat，Ngnix，Node.js工具有效地进行前后端解耦，前端HTML页面通过Ajax调用后端的Restuful API接口并使用Json数据进行交互。前后端分离能够为后续的大型分布式(Distributed)架构、弹性计算(Elastic Compute)架构、微服务(Microservices)架构、多终端化服务(多种客户端，例如：浏览器，车载终端，安卓，IOS等)提供快速、灵活的可扩展方案。前后端开发分离的核心思想是前端HTML页面通过Ajax调用后端的接口并使用Json数据进行交互。

实现前后端分离的优势主要有：提高工作效率、分工明确，提高了性能和可扩展性；前后端代码分离，提高代码复用率和接口复用率，前后端分离的工作效率远大于耦合工作的工作效率。前端结构(HTML)、样式(CSS)、行为(JS)分离，后台只需提供API接口，前端调用Ajax实现数据呈现。前端不再需要向后台提供模板或是后台在前端HTML中嵌入后台代码。一套服务支持多个客户端的业务体系；前端JS可以做很大部分的数据处理工作，减少后端服务器的并发/负载压力。后端开发追求的是高并发，高可用和高性能，安全，存储，业务等；前端开发追求的是页面表现，速度流畅，兼容性，用户体验等。后端对于前端来说就是一个接口的集合，服务端提供各种各样的接口供前端使用。由于Node层的存在，因此不用局限服务接口的形式。对于后端开发，只需关心业务代码的接口实现。

前端技术负责View(视图层/做HTML页面的展示)和Controller(逻辑层/书写业务逻辑)层。后端技术负责Model(数据层/数据的增删改查)层。前后端分离主要就是将数据操作和显示分离出来，前端专注做数据显示，通过文字、图片或者图标等方式让数据显示出来，后端专注的做数据的操作。前端把数据发给后端，然后后端对数据进行修改。而后端提供接口给前端调用，来触发后端对数据的操作。

前后端分离并非仅仅只是一种开发模式，而是一种架构模式(前后端分离架构)。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同代码库，不同开发人员。前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过Ajax来调用HTTP请求调用后端的Restful API。前端只需要关注页面的样式与动态数据的解析和渲染，而后端专注于具体业务逻辑。

Django的普通项目采用的是MTV设计模式，而Django的前后端分离项目则是采用MVVM(Model View ViewModel)设计模式，解耦更加彻底，前后端完全分离，甚至可以分离到前后端是两个项目。在MVVM中，View和Model不直接进行通信，他们之间存在ViewModel充当观察者的角色。用户操作View，ViewModel感知到变化后通知Model。MVVM设计模式交互过程如图5所示。

图5 Django MVVM设计模式交互过程

为了让大数据专业的学生走出校门能够和公司实际技术岗位无缝衔接，我们可以在教学中扩展前后端分离技术。大数据专业的前后端分离教学内容，可以在WEB后端框架教学研究的基础上前端采用Vue.js框架，后端采用MVVM设计模式的Django REST framework框架[9]。Django REST framework框架是一个基于Django实现RESTful风格的API框架，主要功能组件包括权限组件、认证组件、访问频率限制组件、序列化组件、路由组件、视图组件、分页组件、解析器组件、渲染器组件和版本组件。针对大数据专业的特点，前后端分离的WEB开发技术方案如图6所示。

图6 前后端分离的WEB开发技术路线

5 建立“基础—大创—竞赛”的三层培养体系

课程采用兴趣主导、项目驱动、以赛促学、以赛促教等教学方法，学生根据自己“兴趣”来选择项目。项目规模分为三类，单知识点项目，多知识点项目、全知识点项目。全面构建“基础—大创—竞赛”三层培养体系。基础层，夯实对基础知识点的理解和使用，有效增加实践课程难度；大创层，将大创所用到的知识加入到课堂教学，提高学生的编程能力，培育计算机专业素养；竞赛层，寻找部分有潜质的学生，同时为学生创造丰富的课外自主学习条件。鼓励学生积极参加各级学科竞赛、创新创业项目, 在竞赛和项目实际开发中开阔视野、增长实践能力，使学生出校门能与企业无缝衔接。

6 结语

通过对WEB开发技术课程教学内容进行研究，并根据数据科学与大数据专业人才培养目标，将WEB开发技术中的前端开发技术和后端开发技术分开进行教学内容设计，设计出符合大数据专业技术特点的WEB开发技术教学路线，为大数据专业的WEB开发技术课程教学提供借鉴。