張萬方，李 翔，王媛媛

(淮陰工學院 計算機與軟件工程學院，江蘇 淮安 223003)

WEB開發(fā)技術(shù)課程被計算機類本科專業(yè)(數(shù)據(jù)科學與大數(shù)據(jù)技術(shù)專業(yè))人才培養(yǎng)方案設(shè)置為專業(yè)必修課，是計算機、大數(shù)據(jù)專業(yè)等方向本科學生必備的專業(yè)基礎(chǔ)知識和技能之一。近年來，全棧工程師(Full Stack Developer，也稱為全端工程師)的概念被廣泛提及，已經(jīng)成為當今最熱門和需求量最大的 IT 職位之一。全棧工程師可以勝任一個完整項目的前端、后端開發(fā)和測試、網(wǎng)站策劃宣傳過程中的一系列環(huán)節(jié)，WEB前端開發(fā)技術(shù)正是全棧工程師技術(shù)需求的最重要的必備基礎(chǔ)技能和需求。

WEB開發(fā)技術(shù)主要分WEB前端和后端開發(fā)技術(shù)。在目前的項目和產(chǎn)品開發(fā)中，由于除產(chǎn)品功能外，用戶體驗也是測試產(chǎn)品成功率的標準之一，因此WEB前端技術(shù)變得越來越重要。項目用戶體驗取決于前端技術(shù)的實現(xiàn)，WEB前端技術(shù)例如HTML5，CSS3，JavaScript，前端框架，例如Vue，Angular，React，或第三方庫BootStrap，JQuery，Element UI，LayUI，ECharts，LESS以及SASS等[1-2]。WEB后端開發(fā)技術(shù)主要包括多種后端編程語言，例如Python，Java，Go，PHP，C#，Ruby，Perl等；良好的開發(fā)框架，例如JAVA Spring，MyBatis，Hibernate，Python Django，PHP thinkphp，nodeJs express，beego等；數(shù)據(jù)存儲調(diào)用，例如MySQL，MongoDB，Redis，Oracle，SQLServer以及API接口等；WEB項目發(fā)布技術(shù)，例如Tomcat，Nginx，IIS等[3]。

數(shù)據(jù)科學與大數(shù)據(jù)技術(shù)專業(yè)作為新開設(shè)的計算機類本科專業(yè)之一，從2016年全國首批3所高校獲批至2019年全國共有470多所高校獲批該專業(yè)。眾多高校設(shè)立了大數(shù)據(jù)專業(yè)，我們可能面對一些共性問題：(1)教學中的大數(shù)據(jù)從哪里來？(2)相同課程在大數(shù)據(jù)專業(yè)怎么教學？(3)大數(shù)據(jù)實踐教學平臺怎么構(gòu)建？(4)大數(shù)據(jù)實訓真實案例怎么構(gòu)建？

針對上述問題(2)，研究WEB開發(fā)技術(shù)課程在大數(shù)據(jù)專業(yè)的教學，通過對當前WEB開發(fā)技術(shù)知識點進行分解，針對大數(shù)據(jù)專業(yè)人才培養(yǎng)目標，探討大數(shù)據(jù)專業(yè)開設(shè)WEB開發(fā)技術(shù)課程的必要性、WEB前端技術(shù)教學內(nèi)容、WEB后端技術(shù)教學內(nèi)容以及WEB前后端分離教學方案。

1 大數(shù)據(jù)專業(yè)開設(shè)WEB開發(fā)技術(shù)課程的必要性

大數(shù)據(jù)專業(yè)的核心課程主要包括Python程序設(shè)計、數(shù)據(jù)庫原理及應用、數(shù)據(jù)挖掘、操作系統(tǒng)、大數(shù)據(jù)采集與存儲和大數(shù)據(jù)分析及可視化等課程[4]。這些課程中很多需要通過WEB系統(tǒng)或者移動APP應用對數(shù)據(jù)進行展示，比如大數(shù)據(jù)采集與存儲課程中需要學生使用網(wǎng)絡(luò)爬蟲對互聯(lián)網(wǎng)數(shù)據(jù)進行爬取，爬取的首要步驟就是對目標網(wǎng)站的HTML代碼進行分析，使用XPath或者CSS選擇器進行WEB元素定位，然后進行數(shù)據(jù)爬取，最后對爬取到的數(shù)據(jù)還需要進行可視化并通過WEB系統(tǒng)進行展示，這些都需要用到WEB開發(fā)相關(guān)技術(shù)。另外，大數(shù)據(jù)專業(yè)學生將來完成學業(yè)后走向工作崗位，企業(yè)不僅需要學生使用所學知識對數(shù)據(jù)進行搜集、清洗、預處理和分析，也會需要我們培養(yǎng)的學生能夠使用所學的知識完成相關(guān)的WEB系統(tǒng)和移動APP應用開發(fā)。綜上所述，在數(shù)據(jù)科學與大數(shù)據(jù)技術(shù)專業(yè)開設(shè)WEB開發(fā)技術(shù)課程十分必要。

2 大數(shù)據(jù)專業(yè)WEB前端開發(fā)技術(shù)教學研究

2.1 大數(shù)據(jù)專業(yè)WEB前端開發(fā)技術(shù)

在大數(shù)據(jù)專業(yè)教學中，前端開發(fā)技術(shù)基本與計算機科學與技術(shù)或者軟件工程專業(yè)的學生差不多，主要包括HTML、CSS、JavaScript、UI設(shè)計四大部分。其中CSS部分會加入一個Bootstrap框架的擴展、JavaScript部分會加入一個jQuery框架的擴展。UI設(shè)計中，主要講授Web圖像處理的Logo和Banner制作方法。在開發(fā)工具方面，前端課程中可以使用例如HBuilder，Visual Studio Code，WebStorm和Sublime等開發(fā)工具。開發(fā)環(huán)境主要采用Node.js，Npm，Cnpm，Webpack，ECMAScript6，基于 Promise 的 HTTP 請求客戶端axios，以及為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理設(shè)計的基于Vue 2.0 的組件庫Element UI。

隨著移動設(shè)備的普及，要使用戶通過各種尺寸的移動設(shè)備瀏覽網(wǎng)站可以獲得更好的視覺效果，教學內(nèi)容不僅面向PC端的WEB應用，也面向移動APP的WEB應用，如在響應式布局Bootstrap環(huán)節(jié)中會用到自適應的流式布局。此外在前端開發(fā)框架中會給學生介紹到目前比較流行的Vue.js框架，Vue.js是一個用于構(gòu)建用戶界面的開源JavaScript的WEB應用框架，可以更好地組織和簡化WEB開發(fā)，Vue有著近百分之九十的開發(fā)者滿意度。Vue基于MVVM(Model-View-ViewModel)設(shè)計思想，提供MVVM數(shù)據(jù)雙向綁定的庫。Vue所關(guān)注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數(shù)據(jù)更新，并通過組件內(nèi)部特定的方法實現(xiàn)視圖與模型的交互。組件系統(tǒng)是 Vue 的核心概念，Vue的組件化應用構(gòu)建思想，使用小型、獨立和通常可復用的組件通過相互引用構(gòu)建大型應用項目，實現(xiàn)了如搭積木的方法構(gòu)建頁面。然而，由于課時有限，這個環(huán)節(jié)可以放在綜合實訓里面。瀏覽器兼容性教學上，這兩年由于Windows10的普及，淘汰了很多IE10版本以下的IE瀏覽器，課程在教學中采用Google的Chrome瀏覽器進行演示和調(diào)試。圖1為常用的WEB前端開發(fā)技術(shù)路線，用五角星(★)標注了大數(shù)據(jù)專業(yè)推薦的前端開發(fā)技術(shù)路線。

2.2 WEB前端開發(fā)課程階段考核

WEB前端開發(fā)教學中，可以根據(jù)HTML5，CSS3/LESS，JavaScript/JQuery/BootStrap，Vue.js/Element UI/ECharts四部分教學單元內(nèi)容分別布置知識點和主題風格具有延續(xù)性的四次單元作業(yè)。單元作品主題可以選擇學生興趣相關(guān)、個人博客、學生宿舍管理、教學管理、電商相關(guān)網(wǎng)站等，要求學生完成第一次的課程階段作品，教師分單元點評同學的作品并提出改進意見，采用教師指導學生在挑戰(zhàn)杯、江蘇省“互聯(lián)網(wǎng)+”大賽、計算機設(shè)計等大賽中的優(yōu)秀作品作為展示樣例。課程考核體現(xiàn)面向工程教育認證和以能力培養(yǎng)為目標的教學理念，為了更真實、準確地反應學生對WEB開發(fā)技能的實際掌握情況，課程考核重點是測試學生運用所學知識對實際項目進行分析、設(shè)計、編碼的能力。課程期末作品要求應用課程核心知識結(jié)構(gòu)設(shè)計和開發(fā)一個完整的前端項目。圖2為WEB前端開發(fā)技術(shù)課程階段考核路線，用五角星(★)標注了大數(shù)據(jù)專業(yè)推薦的WEB前端階段考核階段作品。

圖1 WEB前端開發(fā)技術(shù)路線

圖2 WEB前端開發(fā)技術(shù)課程階段考核路線

3 大數(shù)據(jù)專業(yè)WEB后端開發(fā)技術(shù)教學研究

3.1 大數(shù)據(jù)專業(yè)WEB后端開發(fā)技術(shù)

常用的WEB后端編程語言有Java，C#，Python，PHP，Go，R等[5]，其中Python，Java，R，Go在大數(shù)據(jù)領(lǐng)域應用更廣泛[6]。目前大數(shù)據(jù)專業(yè)主要開設(shè)的編程語言是Python和JAVA。由于Python有著非常豐富的工具包，具備Python基礎(chǔ)編程能力的開發(fā)者只需要調(diào)用各類工具包就可以輕松完成很多任務(wù)，相當于“前人栽樹，后人乘涼”。因此，Python在人工智能、機器學習、數(shù)據(jù)挖掘、數(shù)據(jù)可視化、WEB開發(fā)、自動化運維等方面有著廣泛的應用。綜上所述，我們推薦大數(shù)據(jù)專業(yè)學生采用Python作為WEB后端語言進行開發(fā)，這樣可以更好地發(fā)揮Python語言“膠水語言”的作用，使一個項目可以從數(shù)據(jù)爬取、數(shù)據(jù)清洗、數(shù)據(jù)分析、數(shù)據(jù)可視化、WEB服務(wù)展示均用Python實現(xiàn)，真正做到“Python全棧開發(fā)”。圖3為常用的WEB后端開發(fā)技術(shù)，由于編程語言較多，在Web后端開放框架中只列舉了大數(shù)據(jù)專業(yè)常用Python和Java語言的WEB后端框架，用五角星(★)標注了大數(shù)據(jù)專業(yè)推薦的后端開發(fā)技術(shù)路線。

圖3 常用的WEB后端開發(fā)技術(shù)

3.2 WEB后端框架教學研究

WEB后端開發(fā)中有一些功能是可以復用的，如用戶注冊、用戶登錄、窗體輸入、網(wǎng)站數(shù)據(jù)庫連接、數(shù)據(jù)庫增、刪、改、查等。于是各種編程語言出現(xiàn)了集成部分通用功能模塊的網(wǎng)站框架(WEB Framework)，開發(fā)者可以使用一些簡單的命令生成一個WEB系統(tǒng)的基本框架，然后遵循框架的設(shè)計說明，系統(tǒng)且結(jié)構(gòu)化地設(shè)計出符合用戶實際項目的WEB應用系統(tǒng)。Python語言常用的WEB后端框架主要包括Django，F(xiàn)lask，Tornado和Twisted[7]，其中Django以開發(fā)速度快、代碼結(jié)構(gòu)清晰以及功能齊全等優(yōu)點，成為最受開發(fā)者青睞的WEB開放框架。

Django框架采用MTV(Model- Template-View)設(shè)計模式，其借鑒了經(jīng)典的MVC(Model-View-Controller)設(shè)計思想，將交互過程分成了三層，各層之間松耦合[8]。其中， Model層是數(shù)據(jù)存取層，處理與數(shù)據(jù)相關(guān)的所有事務(wù)； Template層是處理頁面的顯示；View層是業(yè)務(wù)邏輯層，是Model層與Template層之間的橋梁，用來存取模型和調(diào)取模板的相關(guān)邏輯。Django的MTV設(shè)計模式交互過程如圖4所示。

圖4 Django MTV設(shè)計模式交互過程

Django支持對象關(guān)系映射(Object Relational Mapping，ORM)，能夠把對象與數(shù)據(jù)庫中的表關(guān)聯(lián)起來，對象的屬性映射到表的各個字段，同時還把對表的操作對應到對對象的操作，實現(xiàn)了對象-SQL、SQL-對象的雙向過程轉(zhuǎn)換。Django為ORM提供了全面的支持，適配多種常用的數(shù)據(jù)庫，包括MySQL，PostgreSQL，Oracle，SQLite，MongoDB等。

4 WEB“前后端分離”教學研究

目前，前后端分離設(shè)計模式已經(jīng)成為互聯(lián)網(wǎng)項目開發(fā)的業(yè)界標準使用方式，是WEB開發(fā)中新的技術(shù)標桿，通過Tomcat，Ngnix，Node.js工具有效地進行前后端解耦，前端HTML頁面通過Ajax調(diào)用后端的Restuful API接口并使用Json數(shù)據(jù)進行交互。前后端分離能夠為后續(xù)的大型分布式(Distributed)架構(gòu)、彈性計算(Elastic Compute)架構(gòu)、微服務(wù)(Microservices)架構(gòu)、多終端化服務(wù)(多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等)提供快速、靈活的可擴展方案。前后端開發(fā)分離的核心思想是前端HTML頁面通過Ajax調(diào)用后端的接口并使用Json數(shù)據(jù)進行交互。

實現(xiàn)前后端分離的優(yōu)勢主要有：提高工作效率、分工明確，提高了性能和可擴展性；前后端代碼分離，提高代碼復用率和接口復用率，前后端分離的工作效率遠大于耦合工作的工作效率。前端結(jié)構(gòu)(HTML)、樣式(CSS)、行為(JS)分離，后臺只需提供API接口，前端調(diào)用Ajax實現(xiàn)數(shù)據(jù)呈現(xiàn)。前端不再需要向后臺提供模板或是后臺在前端HTML中嵌入后臺代碼。一套服務(wù)支持多個客戶端的業(yè)務(wù)體系；前端JS可以做很大部分的數(shù)據(jù)處理工作，減少后端服務(wù)器的并發(fā)/負載壓力。后端開發(fā)追求的是高并發(fā)，高可用和高性能，安全，存儲，業(yè)務(wù)等；前端開發(fā)追求的是頁面表現(xiàn)，速度流暢，兼容性，用戶體驗等。后端對于前端來說就是一個接口的集合，服務(wù)端提供各種各樣的接口供前端使用。由于Node層的存在，因此不用局限服務(wù)接口的形式。對于后端開發(fā)，只需關(guān)心業(yè)務(wù)代碼的接口實現(xiàn)。

前端技術(shù)負責View(視圖層/做HTML頁面的展示)和Controller(邏輯層/書寫業(yè)務(wù)邏輯)層。后端技術(shù)負責Model(數(shù)據(jù)層/數(shù)據(jù)的增刪改查)層。前后端分離主要就是將數(shù)據(jù)操作和顯示分離出來，前端專注做數(shù)據(jù)顯示，通過文字、圖片或者圖標等方式讓數(shù)據(jù)顯示出來，后端專注的做數(shù)據(jù)的操作。前端把數(shù)據(jù)發(fā)給后端，然后后端對數(shù)據(jù)進行修改。而后端提供接口給前端調(diào)用，來觸發(fā)后端對數(shù)據(jù)的操作。

前后端分離并非僅僅只是一種開發(fā)模式，而是一種架構(gòu)模式(前后端分離架構(gòu))。前端項目與后端項目是兩個項目，放在兩個不同的服務(wù)器，需要獨立部署，兩個不同的工程，兩個不同代碼庫，不同開發(fā)人員。前后端工程師需要約定交互接口，實現(xiàn)并行開發(fā)，開發(fā)結(jié)束后需要進行獨立部署，前端通過Ajax來調(diào)用HTTP請求調(diào)用后端的Restful API。前端只需要關(guān)注頁面的樣式與動態(tài)數(shù)據(jù)的解析和渲染，而后端專注于具體業(yè)務(wù)邏輯。

Django的普通項目采用的是MTV設(shè)計模式，而Django的前后端分離項目則是采用MVVM(Model View ViewModel)設(shè)計模式，解耦更加徹底，前后端完全分離，甚至可以分離到前后端是兩個項目。在MVVM中，View和Model不直接進行通信，他們之間存在ViewModel充當觀察者的角色。用戶操作View，ViewModel感知到變化后通知Model。MVVM設(shè)計模式交互過程如圖5所示。

圖5 Django MVVM設(shè)計模式交互過程

為了讓大數(shù)據(jù)專業(yè)的學生走出校門能夠和公司實際技術(shù)崗位無縫銜接，我們可以在教學中擴展前后端分離技術(shù)。大數(shù)據(jù)專業(yè)的前后端分離教學內(nèi)容，可以在WEB后端框架教學研究的基礎(chǔ)上前端采用Vue.js框架，后端采用MVVM設(shè)計模式的Django REST framework框架[9]。Django REST framework框架是一個基于Django實現(xiàn)RESTful風格的API框架，主要功能組件包括權(quán)限組件、認證組件、訪問頻率限制組件、序列化組件、路由組件、視圖組件、分頁組件、解析器組件、渲染器組件和版本組件。針對大數(shù)據(jù)專業(yè)的特點，前后端分離的WEB開發(fā)技術(shù)方案如圖6所示。

圖6 前后端分離的WEB開發(fā)技術(shù)路線

5 建立“基礎(chǔ)—大創(chuàng)—競賽”的三層培養(yǎng)體系

課程采用興趣主導、項目驅(qū)動、以賽促學、以賽促教等教學方法，學生根據(jù)自己“興趣”來選擇項目。項目規(guī)模分為三類，單知識點項目，多知識點項目、全知識點項目。全面構(gòu)建“基礎(chǔ)—大創(chuàng)—競賽”三層培養(yǎng)體系。基礎(chǔ)層，夯實對基礎(chǔ)知識點的理解和使用，有效增加實踐課程難度；大創(chuàng)層，將大創(chuàng)所用到的知識加入到課堂教學，提高學生的編程能力，培育計算機專業(yè)素養(yǎng)；競賽層，尋找部分有潛質(zhì)的學生，同時為學生創(chuàng)造豐富的課外自主學習條件。鼓勵學生積極參加各級學科競賽、創(chuàng)新創(chuàng)業(yè)項目, 在競賽和項目實際開發(fā)中開闊視野、增長實踐能力，使學生出校門能與企業(yè)無縫銜接。

6 結(jié)語

通過對WEB開發(fā)技術(shù)課程教學內(nèi)容進行研究，并根據(jù)數(shù)據(jù)科學與大數(shù)據(jù)專業(yè)人才培養(yǎng)目標，將WEB開發(fā)技術(shù)中的前端開發(fā)技術(shù)和后端開發(fā)技術(shù)分開進行教學內(nèi)容設(shè)計，設(shè)計出符合大數(shù)據(jù)專業(yè)技術(shù)特點的WEB開發(fā)技術(shù)教學路線，為大數(shù)據(jù)專業(yè)的WEB開發(fā)技術(shù)課程教學提供借鑒。