基于項目驅(qū)動的Web程序設(shè)計基礎(chǔ)課程改革研究

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

*項目來源：南京理工大學(xué)紫金學(xué)院產(chǎn)教融合型一流課程建設(shè)課題“Web程序設(shè)計基礎(chǔ)”（課程號：03032031）；南京理工大學(xué)

紫金學(xué)院精品課程建設(shè)課題“Web程序設(shè)計基礎(chǔ)”（課程號：03032031）。

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

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

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

關(guān)鍵詞? 項目驅(qū)動；Web程序設(shè)計基礎(chǔ)；教學(xué)改革

中圖分類號：G642.0? ? 文獻(xiàn)標(biāo)識碼：B

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

0? 引言

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

1? 課程教學(xué)現(xiàn)狀分析

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

1.1? 教學(xué)知識點涉獵面較寬

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

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

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

1.3? 教學(xué)內(nèi)容陳舊

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

1.4? 缺乏項目工程思維

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

2? 課程教學(xué)改革思路

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

2.1? 以學(xué)生為中心

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

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

2.2? 以實踐項目為主

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

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

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

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

2.3? 自由度高

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

2.4? 課程思政的育人性

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

2.5? 評價機(jī)制多樣化

基于項目驅(qū)動的Web程序設(shè)計基礎(chǔ)課程教學(xué)模式的評價機(jī)制是多樣化的，包括項目進(jìn)度和成果的評估、團(tuán)隊合作和溝通協(xié)調(diào)能力的評估、個人能力和貢獻(xiàn)的評估等多個方面。這樣的設(shè)計可以更全面地評價學(xué)生的學(xué)習(xí)成果和能力，促進(jìn)學(xué)生綜合素質(zhì)的全面提升。

3 基于項目驅(qū)動的Web程序設(shè)計基礎(chǔ)課程教學(xué)模式實踐案例

3.1? 實踐項目主題和技術(shù)棧的選擇

基于項目驅(qū)動的Web程序設(shè)計基礎(chǔ)課程教學(xué)模式中，實踐項目主題和技術(shù)棧的選擇是非常關(guān)鍵的。在本案例中，筆者選擇一個社交網(wǎng)絡(luò)應(yīng)用程序作為實踐項目主題，技術(shù)棧包括HTML、CSS、JavaScript、React、Node.js和MongoDB等。

3.2? 實踐項目的設(shè)計和實現(xiàn)

在實踐項目的設(shè)計和實現(xiàn)過程中，可以按照以下步驟進(jìn)行。

3.2.1? 需求分析和功能設(shè)計

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

3.2.2? 技術(shù)選型和架構(gòu)設(shè)計

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

質(zhì)量。

3.2.3? 代碼實現(xiàn)和測試

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

3.3? 實踐效果評價

在本案例中，筆者采用多個評價指標(biāo)對實踐效果進(jìn)行評價，包括項目成果質(zhì)量、團(tuán)隊合作和溝通能力、個人能力和貢獻(xiàn)等。評價結(jié)果如下。

3.3.1? 項目成果質(zhì)量

社交網(wǎng)絡(luò)應(yīng)用程序?qū)崿F(xiàn)預(yù)期的功能，界面設(shè)計美觀、用戶體驗良好，代碼質(zhì)量高，符合工程化標(biāo)準(zhǔn)，能夠滿足實際需求。

3.3.2? 團(tuán)隊合作和溝通協(xié)調(diào)能力

團(tuán)隊合作緊密，每個成員都有自己的任務(wù)和進(jìn)度，能夠相互協(xié)作和學(xué)習(xí)，溝通協(xié)調(diào)能力強(qiáng)，及時解決問題和調(diào)整方向。

3.3.3? 個人能力和貢獻(xiàn)

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

4 基于項目驅(qū)動的Web程序設(shè)計基礎(chǔ)課程教學(xué)模式優(yōu)點和待改進(jìn)之處

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

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

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

3）學(xué)生能夠通過團(tuán)隊合作和溝通協(xié)調(diào)能力的培養(yǎng)，增強(qiáng)綜合素質(zhì)和競爭力。

4）評價機(jī)制多樣化，能夠更全面地評價學(xué)生的學(xué)習(xí)成果和能力，促進(jìn)學(xué)生綜合素質(zhì)的全面提升。

4.2? 教學(xué)模式的待改進(jìn)之處

1）對于一些學(xué)生而言，自由度過高可能導(dǎo)致學(xué)習(xí)效率和質(zhì)量下降，需要教師指導(dǎo)和幫助。

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

3）項目驅(qū)動的教學(xué)需要耗費更多的時間和精力，需要更加嚴(yán)謹(jǐn)?shù)慕虒W(xué)計劃和評價機(jī)制，以確保教學(xué)效果和質(zhì)量。

4）學(xué)生個人能力和興趣的差異可能導(dǎo)致團(tuán)隊內(nèi)部合作和溝通協(xié)調(diào)的困難，需要教師的指導(dǎo)和調(diào)整。

5? 結(jié)論

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

6? 參考文獻(xiàn)

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

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

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

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

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

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