基于項目驅動的Web程序設計基礎課程改革研究

孫勇 韋偉 路紅 徐逸卿 陳小云

*項目來源：南京理工大學紫金學院產教融合型一流課程建設課題“Web程序設計基礎”（課程號：03032031）；南京理工大學

紫金學院精品課程建設課題“Web程序設計基礎”（課程號：03032031）。

作者簡介：孫勇，高級工程師；韋偉、路紅、徐逸卿，副教授；陳小云，講師。

DOI：10.3969/j.issn.1671-489X.2024.10.078

摘? 要? 針對傳統(tǒng)Web程序設計基礎教學中存在的理論知識講授和實踐能力培養(yǎng)脫節(jié)、教學內容陳舊、缺乏項目工程思維等問題，分析課程改革的必要性，探討基于項目驅動的Web程序設計基礎課程改革思路。通過分析實踐項目的案例，詳細闡述基于項目驅動的Web程序設計基礎課程的教學模式和教學方法，并且對該教學模式進行評估和總結。實踐結果表明，基于項目驅動的Web程序設計基礎課程教學模式是一種有效的教學方法，學生能夠深入理解并掌握Web程序設計的基本原理和技術，并且在實踐中積累經驗，提升綜合素質和實際應用能力。

關鍵詞? 項目驅動；Web程序設計基礎；教學改革

中圖分類號：G642.0? ? 文獻標識碼：B

文章編號：1671-489X（2024）10-0078-04

0? 引言

隨著互聯(lián)網的快速發(fā)展和普及，Web程序設計逐漸成為一門重要的技術和工具。Web程序設計作為一種基于Web的開發(fā)技術，覆蓋的知識點非常廣泛，如HTML、CSS、JavaScript、Ajax等。同時，Web程序設計在各個領域都有廣泛應用，如企業(yè)級應用開發(fā)、移動互聯(lián)網等，因此，Web程序設計已成為各大高校計算機專業(yè)的一門核心課程。但傳統(tǒng)的Web程序設計基礎課程教學模式往往存在一些問題，如理論知識講授和實踐能力培養(yǎng)脫節(jié)、教學內容陳舊、缺乏項目工程思維等。為了更好地培養(yǎng)學生的項目實踐能力，使課程教學更好地適用于應用型人才的培養(yǎng)要求[1]，基于項目驅動的教學模式被引入Web程序設計基礎課程，通過實踐項目來培養(yǎng)學生的實際應用能力和實際解決問題的能力。本文對該教學模式進行評估和總結，以提高Web程序設計基礎課程教學質量和學生的實際應用能力。

1? 課程教學現狀分析

傳統(tǒng)的Web程序設計基礎課程通常采用理論與實踐相結合的教學模式。其中，理論課程主要包括HTML、CSS、JavaScript等前端技術知識以及MySQL等后端技術知識；實踐課程主要包括基礎實驗和綜合實驗，通過實踐操作來鞏固和應用理論知識。然而傳統(tǒng)的Web程序設計基礎課程教學模式存在一些問題。

1.1? 教學知識點涉獵面較寬

Web程序設計基礎課程知識點涉獵面較寬，知識點包括HTML、CSS、JavaScript、Ajax等。其中HTML包含大量的標簽、屬性，CSS包含各種選擇器和頁面布局的方式，JavaScript包含腳本語言、對象模型，Ajax主要涉及網頁數據的異步傳輸。課程的知識點相對分散，學生想要快速掌握全部知識點難度很大，其中個別知識點存在前后不連貫的情況，特別是一旦涉及多個知識點的組合，需要動手實踐時往往感到無從下手[2]。

1.2? 理論知識講授和實踐能力培養(yǎng)脫節(jié)

Web程序設計基礎課程對于實踐性要求非常高，課程目標是學習市場主流的Web技術，提高學生的個人編程能力、團隊合作能力，為企業(yè)輸出更多合格的技能人才。但傳統(tǒng)的Web程序設計基礎課程教學模式側重課程理論的講授，對實踐能力的培養(yǎng)存在不足，學生只是通過一些基礎實驗和綜合實驗來鞏固與應用理論知識；實驗的設計和實現過程往往也是固定的，缺少自由度和實踐性，時間久了容易挫傷學生學習的主動性、積極性，進而造成部分學生對課程失去興趣[3]。

1.3? 教學內容陳舊

隨著Web應用的日益普及，用戶對于B/S架構系統(tǒng)的完善性、體驗性要求也越來越高。B/S架構中涉及的Web技術進入一個快速發(fā)展的領域，整個技術體系的更新升級非常頻繁。但目前授課過程中往往還是采用老舊的教材，教材中涉及的知識點、案例、題庫、開發(fā)工具都相對陳舊，比如CSS最新的標準已經更新到CSS3，HTML已經完成第五次重大修改升級為HTML5。陳舊的教材與市場主流的Web技術已經脫節(jié)，教學無法滿足企業(yè)對應用型人才的培養(yǎng)要求。

1.4? 缺乏項目工程思維

編程不僅僅是為了實現功能，還需要注重代碼的可讀性、可擴展性。但目前大部分學生在編寫代碼時往往只注重功能點的完成，忽略了項目工程思維，編寫的代碼存在命名不規(guī)范、編程沒有縮進、代碼布局不合理、隨意在代碼中添加空格和注釋等問題。另外，學生在編寫代碼時沒有考慮后期需求的變更、功能點的新增，導致后期牽一發(fā)而動全身，往往因為新增一個小需求而對代碼進行大刀闊斧的修改，后期代碼的擴展性非常差，這些都需要在前期設計階段做好足夠的擴展設計。

2? 課程教學改革思路

基于項目驅動的Web程序設計基礎課程教學模式是一種以實踐項目為主導的教學模式，它將傳統(tǒng)的課堂教學轉化為項目驅動的教學，通過實踐項目來培養(yǎng)學生的實際應用能力和實際解決問題的能力。該教學模式改革思路如下。

2.1? 以學生為中心

課前，教師發(fā)布本次課程的理論學習視頻，讓學生利用課前時間進行知識預習，通過預習可以提前了解本次課程學習的方向以及知識的重點與難點；課中，通過課前發(fā)布學習視頻進行預習，可以發(fā)現等到上課時不再是教師的覆蓋式講解，而是重點解決學生有疑惑的知識點和難點，并結合生生、師生互動探討課程的知識點，最大限度地提高了課堂的利用效率以及學生的積極性[4]；課后，當完成某一塊知識點的理論教學之后，將安排一次實踐環(huán)節(jié)，幫助學生及時通過動手實踐來鞏固和遷移所學知識。在實踐中，教師主要針對學生遇到的共性問題和難點問題進行講解與演示，指導學生順利完成實驗內容，以達到知識鞏固和利用的學習目標。

通過以上方式，一方面讓學生養(yǎng)成課前預習的習慣，解決教學課時數量不足的問題；另一方面提高學生學習的自主性和積極性，通過合理地將教學單元設置為課前、課中和課后不同的形式，促進學生更加高效地學習。

2.2? 以實踐項目為主

課程改革注重企業(yè)主流技術的融入和實踐能力的培養(yǎng)，將合作企業(yè)真實的開發(fā)項目融入教學過程中，以項目驅動授課[5]，按照實際工作流程，遵循學生的認知規(guī)律，將項目模塊分解到各個教學知識點中，與企業(yè)共同設計教學資源，如課程目標、培養(yǎng)標準、教學大綱等。每年保證課程資源一定比例的更新，使得課程設計具有較強的實用性和時效性。通過企業(yè)項目驅動授課，讓學生學習市場主流的Web技術，不至于與市場脫節(jié)，也有利于提升學生的動手實踐能力。

在實踐項目環(huán)節(jié)，學生需要自己設計和實現一個完整的Web應用程序，包括前端設計、后端開發(fā)和數據庫設計等方面。同時，學生需要從理論到實踐，從設計到實現，全面掌握相關知識，培養(yǎng)所學知識的應用能力和實際解決問題的能力。

另外，在學生學科競賽環(huán)節(jié)邀請企業(yè)專家共同參與指導。學科競賽不僅僅體現學生對課堂理論知識的掌握情況，也是學生動手實踐能力的展示。通過學科競賽，學生還能掌握行業(yè)最新動態(tài)，提高綜合競爭力。

通過以項目驅動的方式促進學生掌握主流的Web開發(fā)技術，具備運用這些技術進行競賽、提高創(chuàng)新的能力。在最后的課程設計和畢業(yè)設計環(huán)節(jié)，邀請企業(yè)專家共同參與學生的答辯與點評，對于表現優(yōu)秀的學生優(yōu)先推薦到企業(yè)中參與項目的實際研發(fā)，真正做到學以致用。

2.3? 自由度高

項目驅動的Web程序設計基礎課程教學模式的一個重要特點是自由度高，學生可以自主選擇項目主題和項目技術棧，根據自己的興趣和專業(yè)方向來設計與實現一個符合實際需求的Web應用程序。這樣的設計可以大大激發(fā)學生的學習興趣和積極性，也能夠更好地發(fā)掘學生的潛力和創(chuàng)新能力。同時，學生需要組成團隊共同完成整個項目，通過團隊合作，學生可以相互協(xié)助解決項目實踐中遇到的問題，相互協(xié)作和學習，培養(yǎng)良好的團隊合作精神和溝通協(xié)調能力。

2.4? 課程思政的育人性

學校定位應用型本科，面向軟件行業(yè)。軟件開發(fā)需要培養(yǎng)作風嚴謹、專業(yè)扎實，具有人文素質、國際視野、服務意識、創(chuàng)新精神和社會責任感，能夠解決復雜工程問題的實用型、復合型軟件開發(fā)人才[6]。在課堂中需要深度挖掘課程的思政元素，實現思政和專業(yè)課程的融合（表1），在教育教學中融入社會主義核心價值觀的內容和要求，堅持理論學習、動手實踐和思政教育相統(tǒng)一，做到潤物無聲、水到渠成。

2.5? 評價機制多樣化

基于項目驅動的Web程序設計基礎課程教學模式的評價機制是多樣化的，包括項目進度和成果的評估、團隊合作和溝通協(xié)調能力的評估、個人能力和貢獻的評估等多個方面。這樣的設計可以更全面地評價學生的學習成果和能力，促進學生綜合素質的全面提升。

3 基于項目驅動的Web程序設計基礎課程教學模式實踐案例

3.1? 實踐項目主題和技術棧的選擇

基于項目驅動的Web程序設計基礎課程教學模式中，實踐項目主題和技術棧的選擇是非常關鍵的。在本案例中，筆者選擇一個社交網絡應用程序作為實踐項目主題，技術棧包括HTML、CSS、JavaScript、React、Node.js和MongoDB等。

3.2? 實踐項目的設計和實現

在實踐項目的設計和實現過程中，可以按照以下步驟進行。

3.2.1? 需求分析和功能設計

在需求分析和功能設計階段，通過調研和用戶訪談等方式確定社交網絡應用程序的主要功能和特點，包括用戶注冊和登錄、個人空間管理、好友管理、動態(tài)發(fā)布和評論等。在功能設計過程中，采用敏捷開發(fā)方法，將整個應用程序劃分成多個小功能點，每個小功能點都可以獨立進行開發(fā)和測試。

3.2.2? 技術選型和架構設計

在技術選型和架構設計階段，選擇React作為前端框架，Node.js作為后端框架，MongoDB作為數據庫，采用MERN（MongoDB、Express、React、Node.js）技術棧。這個技術棧具有一致性和高效性，可以使前后端開發(fā)人員高效協(xié)作，同時提高開發(fā)

質量。

3.2.3? 代碼實現和測試

在代碼實現和測試階段，采用Git進行版本控制，使用Trello進行項目管理，每個小功能的開發(fā)和測試都采用敏捷開發(fā)方法，每個開發(fā)人員都有自己的任務和進度，定期進行團隊會議和代碼評審，確保整個項目的質量和進度。

3.3? 實踐效果評價

在本案例中，筆者采用多個評價指標對實踐效果進行評價，包括項目成果質量、團隊合作和溝通能力、個人能力和貢獻等。評價結果如下。

3.3.1? 項目成果質量

社交網絡應用程序實現預期的功能，界面設計美觀、用戶體驗良好，代碼質量高，符合工程化標準，能夠滿足實際需求。

3.3.2? 團隊合作和溝通協(xié)調能力

團隊合作緊密，每個成員都有自己的任務和進度，能夠相互協(xié)作和學習，溝通協(xié)調能力強，及時解決問題和調整方向。

3.3.3? 個人能力和貢獻

每個成員都有自己的專業(yè)領域和技術優(yōu)勢，能夠充分發(fā)揮自己的能力和創(chuàng)新精神，也能夠與團隊成員相互協(xié)作和學習，貢獻較大。

4 基于項目驅動的Web程序設計基礎課程教學模式優(yōu)點和待改進之處

4.1? 教學模式的優(yōu)點

1）學生能夠更深入地理解和掌握Web程序設計的實踐技術和方法。

2）學生能夠在實踐中培養(yǎng)創(chuàng)新思維和創(chuàng)業(yè)精神，發(fā)掘自身潛力和興趣。

3）學生能夠通過團隊合作和溝通協(xié)調能力的培養(yǎng)，增強綜合素質和競爭力。

4）評價機制多樣化，能夠更全面地評價學生的學習成果和能力，促進學生綜合素質的全面提升。

4.2? 教學模式的待改進之處

1）對于一些學生而言，自由度過高可能導致學習效率和質量下降，需要教師指導和幫助。

2）對于某些特殊的主題或項目，可能需要更專業(yè)的技術支持和指導，以保證項目的順利實現和質量。

3）項目驅動的教學需要耗費更多的時間和精力，需要更加嚴謹的教學計劃和評價機制，以確保教學效果和質量。

4）學生個人能力和興趣的差異可能導致團隊內部合作和溝通協(xié)調的困難，需要教師的指導和調整。

5? 結論

本研究探討基于項目驅動的Web程序設計基礎課程教學模式的應用，通過實踐案例的分析和評價，發(fā)現該教學模式能夠有效地提高學生的學習興趣和學習質量，培養(yǎng)學生的創(chuàng)新意識和創(chuàng)業(yè)精神，增強學生的綜合素質和競爭力。但該模式需要更加嚴謹的教學計劃和評價機制來確保教學效果和質量，也需要充分考慮學生個人能力和興趣的差異，加強團隊內部合作和溝通協(xié)調。

6? 參考文獻

[1] 韓保清.以新工科建設推動地方高校向應用型轉變[J].中國高等教育，2021（2）：10-12.

[2] 古銳.貫穿式案例教學法在Web程序設計課程教學中的應用研究[J].電腦知識與技術，2019，15（11）：120-121.

[3] 高廣銀，儲久良，成艷，等.線上線下混合式一流課程建設研究與實踐：以“Web前端開發(fā)技術”課程為例[J].計算機時代，2022（4）：77-79.

[4] 羅劍，邢翠，聶鑫.混合式教學模式下Web前端技術教學資源建設研究[J].軟件導刊，2021，20（7）：198-201.

[5] 隨婷婷，陳年生，黎明.項目式驅動的Web程序設計教學改革研究[J].福建電腦，2019，35（12）：53-54.

[6] 謝玲，陸坤，遲宗正.工程認證背景下的軟件人才培養(yǎng)體系探討[J].實驗室科學，2017，20（4）：232-235，240