《前端框架技術(shù)》教學(xué)大綱

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