大數據專業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開發技術課程教學提供借鑒。