《前端框架技術(shù)》教學(xué)大綱適用范圍：202X版本科人才培養(yǎng)方案課程代碼：08150711課程性質(zhì)：專業(yè)選修課學(xué)分：4學(xué)分學(xué)時：64學(xué)時（理論48學(xué)時，實驗16學(xué)時）先修課程：跨平臺腳本開發(fā)技術(shù)后續(xù)課程：移動應(yīng)用開發(fā)新技術(shù)適用專業(yè)：軟件工程開課單位：計算機科學(xué)與技術(shù)學(xué)院一、課程說明《前端框架技術(shù)》是軟件工程學(xué)生的一門專業(yè)技術(shù)選修課，涉及網(wǎng)頁設(shè)計、CSS樣式、JavaScript、面向?qū)ο蟪绦蛟O(shè)計，響應(yīng)式、前端常用框架等內(nèi)容，通過本課程的學(xué)習(xí)，學(xué)生能夠了解web前端開發(fā)中，使用面向?qū)ο缶幊趟枷脒M行代碼封裝的基本方法與基本思路；在此基礎(chǔ)上學(xué)習(xí)目前較為流行的、優(yōu)秀的前端框架Vue.js，并且通過這些框架的學(xué)習(xí)和使用，培養(yǎng)學(xué)生運用新技術(shù)，解決web前端開發(fā)的綜合能力。本課程注重代碼基本理論知識的學(xué)習(xí)和實操能力的培養(yǎng)，強調(diào)培養(yǎng)運用理論知識和實踐能力解決軟件開發(fā)過程中實際問題的能力，兼顧web開發(fā)新技術(shù)、新框架及其發(fā)展趨勢的介紹，培養(yǎng)“厚基礎(chǔ)、寬口徑、高素質(zhì)、強能力”的人才。二、課程目標(biāo)通過本課程的學(xué)習(xí)，使學(xué)生達到如下目標(biāo)：課程目標(biāo)1：掌握前端開發(fā)常用的框架技術(shù)，能夠運用合適的前端框架進行項目的設(shè)計、開發(fā)與測試。課程目標(biāo)2：掌握J(rèn)avaScript和Vue.js框架的基本知識、JS對象與集合、DOM框架、Vue.js框架基礎(chǔ)知識、事件處理、表單綁定、結(jié)構(gòu)渲染、組件等知識；會運用JS和Vue.js框架設(shè)計的Web交互程序，從而提高程序的交互性和體驗性。課程目標(biāo)3：理解前端框架技術(shù)有關(guān)的行業(yè)標(biāo)準(zhǔn)、常用框架以及相關(guān)知識產(chǎn)權(quán)、行業(yè)政策等；培養(yǎng)學(xué)生使用馬克思主義的世界觀和方法論認(rèn)識、分析和綜合解決問題的能力；讓學(xué)生在學(xué)好專業(yè)知識的同時堅定理想信念，不斷增強科技強國的使命感和責(zé)任感。三、課程目標(biāo)與畢業(yè)要求《跨平臺腳本開發(fā)技術(shù)》課程教學(xué)目標(biāo)對軟件工程專業(yè)畢業(yè)要求的支撐見表1。表1課程教學(xué)目標(biāo)與畢業(yè)要求關(guān)系畢業(yè)要求指標(biāo)點課程目標(biāo)支撐強度3.設(shè)計/開發(fā)解決方案3.3能夠在社會、健康、安全、法律、文化等現(xiàn)實約束下，對設(shè)計方案的可行性進行研究，并對其進行優(yōu)選和改進，體現(xiàn)創(chuàng)新意識。課程目標(biāo)1：掌握前端開發(fā)常用的框架技術(shù)，能夠運用合適的前端框架進行項目的設(shè)計、開發(fā)與測試。M5.使用現(xiàn)代工具5.3能夠使用現(xiàn)代工程工具對復(fù)雜軟件工程問題和設(shè)計方案進行預(yù)測與模擬，理解其局限性。課程目標(biāo)2：掌握J(rèn)avaScript和Vue.js的基本應(yīng)用、DOM與BOM事件處理機制、會運用JS和Vue.js框架設(shè)計跨平臺的Web交互程序，最終達到熟練使用JavaScript技術(shù)和Vue.js框架來制作項目，從而提高網(wǎng)頁交互性和體驗性。H6.工程與社會6.2能夠分析軟件工程與社會各因素之間的關(guān)系，合理評價復(fù)雜工程問題對社會、健康、安全、法律以及文化的影響，并理解應(yīng)承擔(dān)的責(zé)任。課程目標(biāo)3：理解前端框架技術(shù)有關(guān)的行業(yè)標(biāo)準(zhǔn)、常用框架以及相關(guān)知識產(chǎn)權(quán)、行業(yè)政策等；培養(yǎng)學(xué)生使用馬克思主義的世界觀和方法論認(rèn)識、分析和綜合解決問題的能力；讓學(xué)生在學(xué)好專業(yè)知識的同時堅定理想信念，不斷增強科技強國的使命感和責(zé)任感。M注：表中“H（高）、M（中）”表示課程與相關(guān)畢業(yè)要求的關(guān)聯(lián)度。四、教學(xué)內(nèi)容、基本要求與學(xué)時分配1.理論部分理論部分的教學(xué)內(nèi)容、基本要求與學(xué)時分配見表2。表2教學(xué)內(nèi)容、基本要求與學(xué)時分配教學(xué)內(nèi)容教學(xué)要求，教學(xué)重點難點理論學(xué)時實驗(上機)學(xué)時對應(yīng)的課程目標(biāo)1.JavaScript語言基礎(chǔ)與函數(shù)1.1JavaScript語言基礎(chǔ)1.2JavaScript運程序控制語句1.3程序控制語句1.4對象與集合1.5類與原型鏈1.6DOM框架教學(xué)要求：使學(xué)生掌握J(rèn)avaScript的基礎(chǔ)語法、變量定義、理解運算符表達式、函數(shù)的定義與調(diào)用、數(shù)組的使用。重點：運算符JavaScript函數(shù)、運算符優(yōu)先級、對象與集合、類與原型鏈、DOM對象操作。難點：JavaScript框架封裝、DOM對象操作1241、2、32.Vue開發(fā)基礎(chǔ)2.1Vue是什么、開發(fā)模式概述2.2基本語法2.3條件判斷與列表2.4計算屬性與偵聽器2.5樣式綁定教學(xué)要求：使學(xué)生了解Vue.js的基本語法知識、開發(fā)模式，掌握Vue的基礎(chǔ)特性，引入方式，掌握條件判斷與列表渲染、樣式的綁定。重點：條件判斷與列表渲染。難點：列表渲染、樣式綁定。1241、2、33.Vue深入應(yīng)用3.1Vue處理事件3.2Vue表單綁定3.3Vue組件3.4Vue動畫教學(xué)要求：使學(xué)生了解Vue框架的深入應(yīng)用；掌握Vue事件監(jiān)聽的原理與應(yīng)用；掌握Vue表單綁定方法；了解Vue框架組件以及動畫的用法。重點：Vue框架事件處理、表單綁定難點：Vue組件1241、2、34.Vue綜合應(yīng)用4.1常用插件4.2單頁web應(yīng)用4.3狀態(tài)管理4.4綜合案例教學(xué)要求：使學(xué)生了解Vue框架的插件引入和開發(fā)的方法；掌握路由管理插件的使用方法；會綜合運用Vue框架知識和事件進行項目的開發(fā)。重點：Vue-router實現(xiàn)路由。難點：Vue綜合案例1241、2、3合計48162.實驗(上機)部分實驗(上機)部分的教學(xué)內(nèi)容、基本要求與學(xué)時分配見表3。表3實驗(上機)項目、實驗(上機)內(nèi)容與學(xué)時實驗(上機)項目實驗(上機)內(nèi)容和要求實驗(上機)學(xué)時對應(yīng)的課程目標(biāo)1.制作動態(tài)表格-學(xué)生信息登記表實驗(上機)內(nèi)容：設(shè)計動態(tài)表格—學(xué)生信息登記表。實驗(上機)要求：掌握J(rèn)avaScriptDOM事件的概念，會根據(jù)不同的事件采用不同的處理方法。41、22.創(chuàng)建動態(tài)表單-學(xué)生成績登記表實驗(上機)內(nèi)容：利用Vue框架創(chuàng)建動態(tài)表單—學(xué)生成績登記表。實驗(上機)要求：掌握Vue框架的基本使用方法，會根據(jù)需求不同的采用不同的處理方法。41、23.制作購物車實驗(上機)內(nèi)容：利用Vue框架制作一個購物車頁面。實驗(上機)要求：掌握Vue框架處理事件、表單綁定、調(diào)用方法、DOM操作等。424.制作滴答清單-我的待辦小程序?qū)嶒?上機)內(nèi)容：利用Vue框架綜合知識，制作一個待辦事項程序。實驗(上機)要求：掌握Vue框架的多種控制方法；會綜合運用Vue框架進行實際項目的開發(fā)。42合計16五、教學(xué)方法及手段本課程以課堂講授為主，結(jié)合討論、案例、視頻資源共享、作業(yè)、實驗等教學(xué)手段完成課程教學(xué)任務(wù)和相關(guān)能力的培養(yǎng)。學(xué)生能夠比較全面地理解JavaScript語法知識和Vue.js框架的基本概念和使用方法，在掌握相關(guān)知識方法的基礎(chǔ)上，具有跨平臺腳本設(shè)計的初步能力。在上機實驗教學(xué)環(huán)節(jié)中，通過啟發(fā)式教學(xué)、討論式教學(xué)培養(yǎng)學(xué)生將理論知識轉(zhuǎn)化為動手能力的基本技能。同時培養(yǎng)學(xué)生自主學(xué)習(xí)能力、實際動手能力，激發(fā)學(xué)生的創(chuàng)新思維。在上機實驗教學(xué)環(huán)節(jié)中，著重講授如何用科學(xué)的手段來完成理論知識應(yīng)用于實踐的方法；如何組織實驗、編寫代碼和分析實驗現(xiàn)象；介紹Vue.js框架開發(fā)的原理、構(gòu)造和使用及實驗內(nèi)容的思路和方案設(shè)計等。采用教師講授和學(xué)生動手操作的方法；在實驗前學(xué)生應(yīng)復(fù)習(xí)和掌握與本實驗有關(guān)的教學(xué)內(nèi)容、認(rèn)真閱讀相關(guān)資料；在實驗中要嚴(yán)格遵守實驗紀(jì)律，按操作規(guī)程使用計算機設(shè)備；實驗結(jié)束后，按規(guī)定將計算機關(guān)機；每完成一項實驗，要認(rèn)真完成一份實驗報告。六、課程資源1.推薦教材：（1）溫謙.JavaScript+Vue.jsWeb開發(fā)案例教程[M].北京:人民郵電出版社,2022.06.（2）儲久良.Vue.js前端框架技術(shù)與實戰(zhàn)（微課視頻版）[M].北京:清華大學(xué)出版社,2022.01.2.參考書：（1）霍春陽.Vue.js設(shè)計與實現(xiàn)[M].北京:清華大學(xué)出版社,2015.09.（2）孫衛(wèi)琴.精通Vue.js：Web前端開發(fā)技術(shù)詳解（微課視頻版）[M].北京:清華大學(xué)出版社,2022.05.（3）張益琿.循序漸進Vue.js3前端開發(fā)實戰(zhàn)[M].北京:清華大學(xué)出版社,2022.01.（4）師曉利.Vue.js前端開發(fā)實戰(zhàn)[M].北京:人民郵電出版社,2020.07.3.期刊：（1）金楓.Web前端MVC框架的意義與前端發(fā)展方向展望[J].電腦知識與技術(shù),2016,(3):75-77.（2）侯海平.基于jQuery前端框架提升Web用戶體驗的研究[J].科教文匯,2013(6):96-97.（3）吳倩倩.移動端應(yīng)用程序前端開發(fā)框架研究[J].數(shù)碼世界,2020,(4):36.（4）嚴(yán)春燕,戴仕明.基于框架的web前端(Bootstrap和MUI)之比較[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用,2017(4):83-84.（5）BorgesHS,ValenteMT,FerreiraF.Onthe(un‐)adoptionofJavaScriptfront‐endframeworks[J].Software:PracticeandExperience,2022,52(4):947-966.4.網(wǎng)絡(luò)資源：(1)中國慕課大學(xué).(2)網(wǎng)易云課堂./(3)Web前端框架學(xué)習(xí)—Bootstrap./yuanxiang01/article/details/78537357七、課程考核對課程目標(biāo)的支撐課程成績由過程性考核成績和期末考核成績兩部分構(gòu)成，具體考核/評價細(xì)則及對課程目標(biāo)的支撐關(guān)系見表4。表4課程考核對課程目標(biāo)的支撐考核環(huán)節(jié)占比考核/評價細(xì)則課程目標(biāo)123過程性考核課堂表現(xiàn)16（1）根據(jù)課堂出勤情況和課堂回答問題情況進行考核，滿分100分。（2）以平時考核成績乘以其在總評成績中所占的比例計入課程總評成績?！獭獭?64實驗10（1）根據(jù)每個實驗的實驗操作完成情況和實驗報告質(zhì)量單獨評分，滿分100分；（2）每次實驗單獨評分，取各次實驗成績的平均值作為此環(huán)節(jié)的最終成績。（3）以實驗成績乘以其在總評成績中所占的比例計入課程總評成績?！獭?5作業(yè)14（1）主要考核學(xué)生對各章節(jié)知識點的復(fù)習(xí)、理解和掌握程度，滿分100分；（2）每次作業(yè)單獨評分，取各次成績的平均值作為此環(huán)節(jié)的最終成績。（3）以作業(yè)成績乘以其在總評成績中所占的比例計入課程總評成績。√√√554期末考核60（1）期末考核大作業(yè)成績100分，以卷面成績乘以其在總評成績中所占的比例計入課程總評成績。（2）主要考核JavaScript基礎(chǔ)知識、DOM操作、Vue.js框架基本知識、框架渲染、表單綁定等。（3）考試題型為：綜合項目制作?！獭獭?52510合計：100分414118八、考核與成績評定1.考核方式及成績評定考核方式：本課程主要以課堂表現(xiàn)、實驗、作業(yè)、期末大作業(yè)等方式對學(xué)生進行考核評價?？己嘶疽螅嚎己丝偝煽冇善谀┐笞鳂I(yè)成績和過程性考核成績組成。其中：期末大作業(yè)成績?yōu)?00分（權(quán)重60%），試題類型為綜合項目制作，其中包含對基本知識、基本理論、基本技能、綜合應(yīng)用題、分析題等知識的考核，重點考核綜合應(yīng)用能力；課堂表現(xiàn)、實驗、作業(yè)等過程性評價成績?yōu)?00分（權(quán)重40%）。過程性考核和考試試題分值分配應(yīng)與教學(xué)大綱各章節(jié)的學(xué)時基本成比例。2.過程性考核成績的標(biāo)準(zhǔn)過程性考核方式重點考核內(nèi)容、評價標(biāo)準(zhǔn)、所占比重見表5。表5過程性考核方式評價標(biāo)準(zhǔn)考核方式所占比重(%)100>x≥9090>x≥8080>x≥7070>x≥60x<60課堂表現(xiàn)40筆記完整，積極參與教學(xué)活動，踴躍回答問題，準(zhǔn)確率大于90%。筆記完整，認(rèn)真參與教學(xué)活動，回答問題準(zhǔn)確率大于80%。筆記不完整，偶爾參與教學(xué)活動，回答問題準(zhǔn)確率大于70%。上課不認(rèn)真，上課不記筆記，偶爾參與教學(xué)活動。上課不認(rèn)真，上課不記筆記，不參與教學(xué)活動。作業(yè)35作業(yè)完整，思路清晰，準(zhǔn)確率大于90%，字跡工整。作業(yè)完整，準(zhǔn)確率大于80%，字跡工整。不交作業(yè)2次以內(nèi)，準(zhǔn)確率大于70%.不交作業(yè)4次以內(nèi)，準(zhǔn)確率大于60%