PythonWebPAGEPAGE100/《PythonWeb全棧開發項目式教程（慕課版）XXXXXX□公共必修 □公共選修專業必修 □專業選修□□理論學時：36 實踐學時：考 □考 □其 校內專任教 □校內兼課教 □外聘教學生已掌握Python庫基本概念、SQL語句有初步了解。為PythonWeb開開發工程師、Web開發工程師等。PythonWeb開發作為單元（任務）任務 PythonWeb開發基任務1.1 “古典文學網”項目入門與環單元（任務）（不得超過4個XXXX7-1Pythonpip包管理工具、Flask框架、MySQLVue框架的基礎知識，包括它軟件專業大二的學生已經學習了編程語言基礎（Python基礎語法）、數據結構等了解一些常見的開發工具和技術概念，但對于Web開發領域的專業知識和實際項目學生希望通過本課程深入學習PythonWeb開發技術，掌握實際項目開發的技能夠理解“古典文學網Python、Flask框架、MySQL數據庫、Vue框了解WBS能夠獨立搭建“古典文學網學會使用Flask框架開發簡單WebVue框架創建基掌握使用WBS工作分解結構WBSWBSWBS工作分解結構法時，引入更多復雜項目案例，讓“古典文學網”對中華文化傳承與發展的意義，激發學生的文講授法：演示法：教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上2.上上上 2.上上上 上 上上上3.上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.發布預習任解“古典文學網”項目的基本1.項目描述與（30分鐘“你認為全棧開發對“古典文學網”項Python、Flask框架、MySQL數據庫、Vue2.后端開發環（60分鐘演示安裝Python、Flask框架及擴展包、VisualStudioCode開發工MySQL數據庫的步“hiflask”3.前端開發環（60分鐘演示安裝Node.js環境、Vue開發插件、Postman開發工具的步驟；“hivue”4.技能拓展與（10分鐘WBS工作分解結構法的相WBS工作分解結WBS工作分解課前探索：“古典文學網”項目的基本需求和架構，掌握全棧開發、前后FlaskVue2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 Flask框架開任務2.1 “古典文學網”后端架構設計單元（任務）（不得超過4個XXXX7-2Pythonpip包管理工具、Flask框架、MySQLVue框架的基礎知識，包括它學生已經學習了“古典文學網”項目的基本情況、全棧開發和前后端分離技術概念，以及Python、Flask框架、MySQL數據庫、Vue框架的基礎知識，并完成了項Flask框架有了初步認識，掌握了基本的安裝和使用方法，但對于Flask理、藍圖的使用等還不夠熟練，對Flask學生希望深入學習Flask框架技術，掌握其核心原理和高級應用，能夠獨立完成“古典文學網”Flask框架的實際應用場景和技巧，提高自己在Web開發領域的專業技能，為后續課程學習和未能夠理解Flask程序框熟練掌握Flask請求、上下文、響應和藍圖等核心技術的原理和使用方法。能夠運用Flask框架設計“古典文學網”后端項目架構獨立完成古典文學網”的“注冊”“登錄”API接口開發，并能進Flask“古典文學網”“注冊”“登錄”API通過詳細的理論講解、豐富的案例演示和實際操作練習，幫助學生掌握Flask框理解Flask設計出合理、可擴展的“古典文學網”處理“注冊”“登錄”API在講解Flask框架技術的過程中，強調技術的不斷發展和創新，鼓勵學生積極追講授法：系統講解Flask演示法：在開發環境中實際演示Flask框架的各種應用場景，如路由設置、請求處理、藍圖使用等，實踐法：“古典文學網”“注冊”“登錄”API接口開發實踐，讓學生教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.發布預習任Flask框Flask項1.知識回顧與（10分鐘Flask框架“Flask項目中app.py使用route()裝飾器注冊路由？”等，讓學生學習Flask框架的核心“古典文學網”后端項目2.Flask框架核（70分鐘享一些關于Flask路詳細講解Flask的URL構建）、請求（請“古典文學網”項目，舉3.項目架構設（60分鐘“古典文學網”后端“注冊”“登錄API接口“古典文學網”后端指導學生開發“注冊”“登錄API接口，提“注冊”“登錄”APIFlask框架4.技能拓展與（20分鐘Flask框架高級“Flask與互？”“Flask擴展在實際Flask框架相Flask框架的高課前探索：大部分學生能夠理解Flask“古典文學網“注冊”“登錄API接口開發。但部分學生在理解請求鉤子、上下2、理論與實踐相結合：課堂上講授專業理論知識單元單元（任務）任務 Flask框架開任務2.2 “古典文學網”項目API接口單元（任務）（不得超過4個XXXX7-3Flask-SQLAlchemyMySQL數據庫，進行數據的增刪改查操WTFormsPythonhashlib庫對用戶密碼進Flask“古典文學網”Flask框架的基本API學生希望深入學習數據庫操作、數據驗證與加密等技術，完善和優化“網”的后端API能夠掌握Flask-SQLAlchemy連接數據庫及數理解Flask能夠運用所學知識優化“古典文學網”的用戶注冊、登錄和圖片顯示API接口。API接口進行性能優化Flask-SQLAlchemyFlaskAPIFlask-和API接口優化方案，在實踐中加深對重點知識的理解和掌握。講授法：演示法：Flask-SQLAlchemy實踐法：安排學生進行“古典文學網”API接口的優化和完善實踐，讓學生在實踐中鞏固所學知識，教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間發布預習任務，要求學生回顧“古典文學網”已開登錄、圖片顯示API接口及身份驗證功能的實現原理在在線學習平臺發布查閱資料，學習預習資料，完成預習鞏固之前所學知識，為新課學習做準備，培養學生自主學習能力，讓學生提前對新知識有初步認識，提高課堂學習效率。同時，在預習資料中融入一些關于數據培養學生的數據保1.項目回顧與（15分鐘在在線學習平臺發布幾個關于已開發后端功能“用戶注冊接口中如何判斷用戶名是否已存在？圖片顯示接口的請求參數有哪些？”對學生線上回答情況引導學生分析現有API接口存在的不足，明確本節課的優化目標和任積極參與線上答題，回顧已開發自己對已學知識的掌握情況；參與討論，分析現有接口不足，明確學習目通過線上問題檢測學生對已學知識的掌握情況，及時發現學生的知識漏洞并進行鞏固。引導學生分析現有接口不足，激發學生的學習興趣和解決問題的欲望，明確本節課的學習方2.知識拓展與（65分鐘在在線學習平臺分享組討論這些案例中技術的詳細講解Flask-SQLAlchemy連接數據庫介紹WTForms進行表單數據驗證和hashlib庫對用戶密碼進行加密存講解Flask框架的錯對學生線上討論情況進行分析技術應用，小重點知識，結合案例理解技術的應用場景；提出疑問，通過線上案例討論激發學生的學習主動性和團隊協作能力，讓學生在討論中加深對技術的理解。線下詳細講解確保學生掌握新知識的原理和使用方法，結合案例讓學生明白知識的實際應用價值，培養學生將技術應用3.項目任務實（60分鐘在在線學習平臺發布“古典文學網”API接口優指導學生使用Flask-SQLAlchemy優化用戶注API接口，實現引導學生使用數據驗證和加密技術增強接口的幫助學生完善圖片顯API接口，添加圖片緩教會學生利用Flask查看參考文檔和需求文檔，明確進行API接口的優化和完善，遇到問題及時請教教師通過線上提供資料為學生的實踐提供指導和參考，節省課堂時間。線下小組協作培養學生的團隊合作能力和溝通能力，在實踐中加深對新知識的理解和應用，提高學生解決實際問4.技能提升與（20分鐘在在線學習平臺發布關于API接口性能優化以提高API接口的響應速度？”“代碼重構的原則和方法有哪些？”API接口性能優化的方法和代碼重構的技總結本節課的重點內自己的觀點，學習API接口性能優化提出疑問，與教師和同學交流；思考思政元素在學習過通過線上討論激發學生對技術拓展的興趣，培養學生的探索精神。線下總結幫助學生鞏固本節課的重點知識，解決學生的疑讓學生在學習技術的同時，提升綜合課前探索：Flask-SQLAlchemy連接數據庫、數據驗證與加Flask框架的錯誤處理機制有了一定程度的掌握。在實踐環節，多數學生能夠在教師的指導下，運用所學知識對“古典文學網”的API接口進行優化和完善，實現了2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）3任務3.1 作與API接口拓展單元（任務）（不得超過4個XXXX7-4APIURL路徑、HTTP方法和狀態碼、請求及響應數據、敏感數據等方面的Jinja2Flask“古典文學網”Flask-SQLAlchemy進行數據庫連接、構建學生已經學習了“古典文學網”項目的部分后端開發知識，掌握了Flask框架的API接口開發也有了一定的實踐經驗。然而，他們對于API設計規范的系統性認識不足，在APIJinja2模能夠理解并掌握后端API設計的常見規范。熟悉Jinja2模板引擎熟練掌握 SQLAlchemy進行數據庫操作運用Flask-SQLAlchemy對注API接口進行優化，提高接熟練使用Jinja2模板引擎進行后端APIJinja2Flask-SQLAlchemy進行數據庫操作（增刪改查）API設計規范；結合具體項目場景，進行Jinja2模板引擎的演示和實踐練習，幫助學生熟練掌握其用“古典文學網”Flask-SQLAlchemy理解并應用APIJinja2針對APIJinja2模板引擎復雜邏輯，通過實際案例，逐步引導學生實現復雜的條件判斷和循環邏在講解API設計規范時，強調規范的重要性，類比行業中的規章制度，培養學生講授法：系統講解API設計規范、Jinja2演示法：API接口開發、Jinja2實踐法：安排學生進行“古典文學網”項目相關功能的開發和優化實踐，讓學生在實踐中鞏固所學知教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間Flask框架知APIJinja2模板引擎API設計規范對1.項目描述與（30分鐘題，如“Flask中藍圖的作用是什么？”“如何在Flask中處理請求數據？”等，讓詳細講解后端API設計規范、Jinja2模板引擎和API設計規范2.項目任務實（90分鐘“古典文學網”首頁模塊API接口的詳細設計文檔API接口優化的指導API設頁模塊的API接口；FlaskSQLAlchemy優化注冊和登錄API接口；引導學生運用Jinja2API接Jinja2模板引擎完3.技能拓展與（45分鐘技巧的討論話題，如“在何減少API接口中的數據庫查詢次數？”等，引導學“古典文學網”數據庫的相關表添API接口進“古典文學網”的功能進行API接“古典文學網”功4.（15分鐘4.1在在線學習平臺發布問4.1總結本節課的重點內容，強調API設計規范、Jinja2模板引擎和數據庫操課前探索：通過本次課程教學，多數學生對后端API設計規范有了更清晰的認知，能夠在開“古典文學網”API讀性得到提升。在Jinja2模板引擎的使用方面，學生掌握了基本的模板渲染、參數傳遞和語法運用，2、理論與實踐相結合：課堂上講授專業理論知識API設計規范細節理解不深的問題，后續教學中應增加更多實際規范的記憶和應用能力。對于Jinja2模板引擎復雜邏輯的教學，增加實際項目案例的單元（任務）任務 后端開發進任務3.2 “古典文學網”API接口完善單元（任務）（不得超過4個XXXX7-5數據庫索引的優化方法，如分析查詢頻率和字段使用情況，為常用查詢字段添加合適的索引“古典文學網”項目中的重要性，以及如何使用FlaskSQLAlchemyAPI學生已經學習了“古典文學網”項目后端的數據庫操作、API接口開發等知識，Flask框架、SQLAlchemyMySQL數據庫有一定的了解。但在數據庫索引優化、事務處理、API接口性能優化等方面的知識還比較薄弱，在實學生希望深入學習數據庫索引優化、事務處理和API“古典文學網”項目的后端功能；掌握性能分析和代碼重構的方法，提高項目的質量和FlaskSQLAlchemy熟悉API接口性能優能夠運用所學知識對“古典文學網”的數據庫進行索引優化，提升“古典文學網”API接API過程；詳細講解數據庫事務的概念和在Flask-SQLAlchemy中的使用方法，并通過具體項目場景進行實踐；介紹常見的API接口性能優化策略。有效提升API“古典文學網”中復雜的查詢需求，如涉及多表關API接口性能優化方面，引導學生API接口安全優講授法：系統講解數據庫索引優化、事務處理、API演示法：實踐法：安排學生對“古典文學網”項目進行數據庫優化、API接口完善和代碼重構實踐，讓學生在教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.顧“古典文學網”API2.務處理、API1.11.項目回顧與（15分鐘題，如“如何在Flask-SQLAlchemy中創建數據API接口的實現邏輯是什么？”等，讓學生在線回1.11.1積極參與線上1.1認真聽講，了引導學生回顧“古典文學網”已完成的后端功能；分析現有API2.12.1分組討論案2.1認真聽講，理事務處理、API2.知識深化與（50分鐘理的概念和在Flask-SQLAlchemy中的應用；講解API“古典文學網”數據庫優化、API接口完善和代碼化、API接口完3.項目任務推（85分鐘“古典文學網”的數據庫進行索引優API接提升API接口的響應速3.54.（10分鐘化、事務處理、API接口課前探索：通過本次課程教學，大部分學生對數據庫索引優化、事務處理和API接口性能優“古典文學網”項目進行優化和完善。然2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 “古典文學網任務4.1 “古典文學網”前端部分頁面單元（任務）（不得超過4個XXXX7-6Vue3.x程序框架，包括項目布局、單文件組件、APIVue框架的模板語法、響應式基礎、事件監聽機制、表單綁定、計算屬性、偵聽器、路由和狀態管理等Token學生已經學習了Python基礎、Flask框架開發以及Vue框架的部分基礎知識，VueWeb開發有了一Vue框架的深入應用，如復雜組件開發、路由配置、狀態管理等還不夠熟練，對跨域訪問和Token學生希望深入學習Vue法；學會跨域訪問和Token理解Vue3.x程序框架熟練掌握Vue框架的了解跨域訪問和Vue“古典文學網”前端項目架構。完成“古典文學網”“首頁”“注冊頁”“登錄頁”的路由功能開發。為項目添加跨域訪問功能以及身份驗證的Token管理功能。Vue古典文學網”跨域訪問和Token通過詳細的理論講解、豐富的案例演示和實際操作練習，幫助學生掌握Vue框架設計方法。在路由功能開發和跨域、Token理解Vue處理“首頁”“注冊頁”和“登錄頁”實現跨域訪問和Token進行對比分析，拓寬設計思路，培養學生的架構設計能力。在跨域和Token管理功能Vue框架技術的過程中，強調技術的不斷發展和創新，鼓勵學生積極追求Vue在開發環境中實際演示Vue實踐法：安排學生進行“古典文學網”前端項目架構設計和頁面功能開發實踐，讓學生在實踐中鞏固教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上2.上上上 2.上上上 上 上上上3.上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.發布預習任Vue3.x程序框1.項目描述與（20分鐘題，如“Vue中如何創建一個簡單組件？”“Vue的法？”等，讓學生在線回詳細講解Vue3.x2.項目任務實（85分鐘“古典文學網”前端項目架代碼，以及“首頁”“注冊頁”“登錄頁”路由功能“古典文學網”前端項目架協助學生開發“頁”“注冊頁”“登錄頁的Token管理功能；Token管理功能；3.技能拓展與（45分鐘于Vue框架高級特性和前題，如“Vue的自定義指實現圖片懶加載？”等，引Vue框架的一些“古典文學網”的前端頁面學習Vue框對“古典文學網”前端頁面進行Vue4.（10分鐘總結本節課的重點內容，強調Vue術、項目架構設計和功能開發的關鍵要點；課前探索：大部分學生能夠理解Vue框架的核心技術，并在教師的指導下參與“古典文學網”2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 PythonWeb前端開發進任務4.2 “古典文學網”頁面交互完善單元（任務）（不得超過4個XXXX7-7VueVueVue的動畫效果庫（Animate.cssGSAP）VuexVue框架的基礎語法、項目架構、路由配置、狀態管理以及跨域訪問等知識，并且完成了“古典文學網”前端項目框架的搭建、部分核心功能的開發。但他們對Vue組件通信、生命周期鉤子函數、動畫效果實現以及VuexVue框架開發有了一定的興趣和實踐基礎，具備一定的自學生希望深入學習Vue組件通信、生命周期鉤子函數等知識，完善“古典文學網”前端頁面的交互功能；掌握前端性能優化的方法和工具，提升頁面加載速度和用Vue的高級特性拓展項目功能，增強自己在Web理解Vue組件通信的掌握Vue生命周期鉤熟悉Vue動畫效果庫了解VuexVue組件通信技術實現“古典文學網”中不同頁面和組件利用生命周期鉤子函數優化組使用動畫效果庫為“古典文學網”頁面添加豐富的動畫效果。VueVueVue組件通信的過程，理解不同理解復雜的Vue.在講解Vue組件通信和團隊協作開發時，強調團隊成員之間就像組件之間一樣，講授法：系統講解Vue組件通信、生命周期鉤子函數、動畫效果庫、Vuex實踐法：安排學生進行“古典文學網”前端頁面交互完善和功能拓展的實踐，讓學生在實踐中鞏固所教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間顧Vue框架的Vue1.項目回顧與（15分鐘題，如“如何在Vue中配原理是什么？”等，讓學生引導學生回顧“古典文學網”前端項目已完成的工2.知識深化與（50分鐘Vue組件通信、生果庫、Vuex高級概念的實Vue組件通Vue生命周期鉤Vue動畫效果庫Vuex的高級概Vuex的高級3.項目任務推（85分鐘“古典文學網”前端頁面交指導學生優化“古典文學網”首頁的布局和樣式；Vue組4.（10分鐘總結本節課的重點內容，強調Vue生命周期鉤子函數、動畫效果和前端性能優化等關鍵知識點；課前探索：Vue組件通信、生命周期鉤子函數、動畫效果“古典文學網”前端項2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 前端功能開任務5.1 “古典文學網”核心模塊實現單元（任務）（不得超過4個XXXX7-8VueAxiosElementPlus框架的使用，包括常用組件（如導航欄、表單組件等）Vue框架的基礎語法、路由配置、狀態管理、組件開發等內容，AxiosElementPlus框架有了初步了解。他們能夠完成一些簡單的Vue項目開發任務，但在將這些知識綜合應用于實際項目的復雜功能開發時，還存在Web開發實踐有較高的積極性，具備一定的自主學習和學生希望深入掌握Vue框架、Axios網絡框架和ElementPlus框架的高級應“古典文學網”的核心功能開發；渴望提升代碼調試和優化能力，理解Vue框架的條件熟練掌握Axios網絡熟悉ElementPlus獨立完成“古典文學網”首頁學會使用瀏覽器開發者工具進VueAxios2.ElementPlusVueAxios網絡框架的實際應用場景案例，讓學生通過實踐掌握其高級應用；詳細ElementPlus復雜業務邏輯下VueAxiosVue框架、AxiosElementPlus演示法：Vue框架技術的應用、Axios網絡框架的配置以及ElementPlus框架組件的使用，讓學生直觀地了解操作步驟和效果。實踐法：安排學生進行“古典文學網”核心功能的開發實踐，讓學生在實踐中鞏固所學知識，提高動教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上2.上上上 2.上上上 上 上上上3.上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.發布預習任Vue框架的條Axios網絡框架1.項目回顧與（15分鐘題，如“Vue組件如何進行通信？”“如何在Vue項目中配置跨域訪問？”等，“古典文學網”項Vue框架的條件與列AxiosElementPlus2.知識深化與（60分鐘些關于Vue框架、Axios網絡框架和ElementPlusVue框架的Axios網絡ElementPlus框；學習Axios網ElementPlus框架的相關3.項目任務實（90分鐘“古典文學網”核心功能開Vue框協助學生運用AxiosAPI的交互，實現搜索功ElementPlus框架，優化頁面的樣4.（15分鐘容，強調Vue框架、AxiosElementPlus框架的關鍵知識點；課前探索：Vue框架、AxiosElementPlus框“古典文學網”部分2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 前端功能開任務5.2 ElementPlus框架應用與功單元（任務）（不得超過4個XXXX7-9ElementPlusElementPlusElementPlusVue學生已經學習了Vue框架的基礎和進階知識，掌握了Axios網絡框架的基本使ElementPlus框架也有了初步的認識，了解其常用組件的安裝、配置和基本用法。學生能夠運用所學知識完成“古典文學網”部分功能的初步開發，但在ElementPlusWeb開發項目有了一定的參與感和積極性，具ElementPlus“古典文學網”前端頁面ElementPlus框架ElementPlus框架了解ElementPlus與Vue能夠運用ElementPlus框架優化“古典文學網”的核心功能頁面。學會使用瀏覽器開發者工具對ElementPlus組件進行調試和性能分ElementPlusElementPlusElementPlus通過具體的代碼示例和實際項目案例ElementPlus框架組件的高級用法和自ElementPlusVueElementPlusVue框架集成的關鍵技術點，通過實際案例讓ElementPlus講授法：ElementPlus演示法：ElementPlus框架組件的高級應用、響應式布局實現、瀏覽器開發者實踐法：安排學生進行“古典文學網”前端頁面優化和個性化拓展的實踐，讓學生在實踐中鞏固所學教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上2.上上上 2.上上上 上 上上上3.上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間1.發布預習任ElementPlus框1.項目回顧與（10分鐘題，如“如何使用AxiosPlus框架中如何引入圖標？”等，讓學生在線回引導學生回顧“古典文學網”前端項目已完成的功ElementPlus2.知識深化與（40分鐘些關于ElementPlus框架ElementPlusElementPlus介紹ElementPlus框Vue框架深度集成的3.項目任務實（60分鐘“古典文學網”前端頁面優ElementPlus框架優化“古典文學網”首頁的導航欄；協助學生利用ElementPlusCarousel組件優化ElementPlus的Form組件和相關ElementPlus的Card組件和相關4.（10分鐘ElementPlus框課前探索：ElementPlus框架的高級用法有了更深入的理“古典文學網”前端頁面進行一定程度的優化和拓展。然而，部分學生在ElementPlus框架與Vue框架深度集成以及實現復雜響應式布局方面仍2、理論與實踐相結合：課堂上講授專業理論知識單元（任務）任務 前端功能開任務5.3 “古典文學網”前端功能完善單元（任務）（不得超過4個XXXX7-10XSS攻擊、CSRFVue框架、AxiosElementPlus框架的相關知識，“古典文學網”前端部分功能的開發。他們對前端開發流程有學生希望深入學習前端性能優化和安全防范技術，提升“古典文學網”功能拓展和創新，提升自己在Web開發領域的綜合能力。能夠運用所學的性能優化技術“古典文學網”前端頁面進行優化。XSS攻擊、CSRF案例，讓學生直觀感受XSS攻擊和CSRF實現方法，如輸入數據過濾、設置HTTP-onlyCookie講授法：演示法：實踐法：“古典文學網”前端功能完善、性能優化、安全防范實踐以及前后端整合聯調，教材：在線平臺：利用在線學習平臺（如超星學習通、慕課網等），上 上 上上上上上上 1.上上上 1.上上上 上上上上上上 2.上上上 上 上上上上上上 3.上上上 上 上上上 上上上上上上 上上上上上上 上上上上上上上上上 上上上上本課程采用線上線下混合式教學模式，課程實施包括課前探索、課堂教學、課后實踐與反思拓展3個（時間顧“古典文學網”前端已開發1.項目回顧與（10分鐘題，如“如何在Vue中使用ElementPlus組件創建表單？”“Axios如何實現與后端的數據交互？”等，讓引導學生回顧“古典文學網”前端已開發的功能；（40分鐘XSS攻擊、CSRF攻擊的方法；3.項目任務推（60分鐘“古典文學網”前端功能完“古典文學網”前端頁面的交互細4.（10分鐘課前探索：“古典文學網”項目進行優化和完善。然而，部2、理論與實踐相結合：課堂上講授專業理論知識單元六（任務一單元（任務）“古典文學網”賞文學功能開發任務一FlaskPlus單元（任務）（不得超過4個101，主要講授“FlaskFlaskElementPlus框架常用組件、Layout布局、Image圖片、Result結果、Rate評分”FlaskFlaskFlaskWTF表單Flask框架的類視圖的組了解ElementPlus通過學習FlaskWTF通過學習Flask框架的類視圖，能夠在組件化的開發服務端通過學習ElementPlusFlaskElementPlusPlusFlaskElementPlus開發工具：PyCharm、VSCode、Git框架與庫：Flask、ElementPlus、Vue.js參考資料：Flask官方文檔、ElementPlus課前準備：FlaskElementPlus組件的基本概課中實施：ElementPlus組件的使用，學生分組課后反饋：（時間幫助學生提前了解課程內容和技術要二、新課導入（5一、回顧并提問（5分鐘在線平臺搶答ElementPlus組件設計鐘Flask學生力及提高學生鐘參與意識Flask念與使用（30提問：Flask鐘2.ElementPlus常用組件的使用（30鐘3.（10分鐘二、新課導入（5分鐘通過分步教學，幫助學生掌握類視圖ElementPlus引出本節課主題：Flask類視ElementPlus常用組件三、課堂講授（60分鐘（一）Flask（二）ElementPlusElementPlus常用組件（Layout布局、Image圖片、Result結果、Rate評分）。（三）總結并提問（10鐘Flask類視圖的定義與使ElementPlus比有哪些優勢？ElementFlaskElementPlus組件設計一個包含評分Flask類視圖ElementPlus組件的使用教師Flask類視圖和ElementPlus組件特點Flask類視圖和Plus教師FlaskElementPlus組件的使用方法，但在復雜場景下的應單元六（任務二單元（任務）任務：開發導航欄用戶中心顯示功能單元（任務）（不得超過4個API接口以及實現導航欄用戶中心顯示功能。Flask學生能夠完成簡單的FlaskAPI學生能夠完成簡單的FlaskAPI理解導航欄用戶中心顯示API能夠獨立開發查詢用戶信API接口。APIAPIAPIAPIAPIElementPlusAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、ElementPlus、Vue.js參考資料：Flask官方文檔、ElementPlusAPI（時間6.3.1在二、新課導入（5分接口開發（30分一、回顧并提問（5分鐘）教師對上次課內容進行回顧Flask類視圖以及相ElementPlus組件。二、新課導入（5分鐘需求描述、開發查詢用戶信API接口以及實現導航欄三、課堂講授（70分鐘（一）（三）API接API接口的需Token，在數據在線平臺搶答TokenAPIToken，API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問get-user”API接口，2.演示導航欄用戶中心顯示API接口，獲UserCenterView.vue頁3.總結并提問：教師總結API接口和前端頁面設計的教師布置課后拓展任務：請為“紅影賞析”航欄用戶中心顯示功能。APIAPI單元六（任務三單元（任務）單元（任務）（不得超過4個FlaskVue.js組件開Vue.jsToken開發工具：PyCharm、VSCode、Git框架與庫：Flask、ElementPlus、Vue.js參考資料：Flask官方文檔、ElementPlus（時間學（一天理解用戶退出功Vue.js組件6.3.2在線學生在平臺完成6.3.2在線任幫助學生提前了解課程內容，培養自二、新課導入（5一、回顧并提問（10分鐘）教師對上次課內容進行回顧提問如何實現用戶退出功二、新課導入（10分鐘三、課堂講授（70分鐘前端項目中實現用戶退出功Token創建退出View“cls_clt”項目中，找到“/src/views/”目錄，新建一個名為在線平臺搶答鐘三、課堂講授分鐘開發（30分鐘）測試（30分鐘）總結并提問分鐘學生2.3.“OutView.vue”文件中，引入Store。Token“OutView.vue”文件中，設置TokenViewToken為空、的用戶體驗？如何處理路由Token單元六（任務四單元（任務）“古典文學網”賞文學功能開發6.3.3開發文學列表展示功能單元（任務）（不得超過4個Flask理解文學列表展示功能的API接口的能夠獨立開發文學列表信API接口。APIAPIPlusAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（API接口的開6.3.3在線任一天一、回顧并提問分鐘一、回顧并提問（5分鐘在線平臺搶答Api二、新課導入（5鐘學生三、課堂講授（70力及提高學生鐘參與意識1.API口開發（30分鐘2.二、新課導入（5分鐘實現（30分鐘3.總結并提問（10鐘通過分步教學，幫助學生掌握文學展三、課堂講授（60分鐘（一）APIAPI接口的需API數據操作模塊：在API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/get-classics/1”APIAPI接口，獲ClassicListView.vue頁（三）總結并提問（10分API接口的開發、前端頁面ElementPlus組件的使API單元六（任務五單元（任務）“古典文學網”賞文學功能開發6.3.4開發文學展示功能單元（任務）（不得超過4個本次課位于單元六的任務五，主要講授“開發文學展示功能”FlaskAPI接掌握文學作品展示功能的能夠獨立開發文學作品信API接口。能夠實現文學作品展示功APIAPIAPIAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（API接口的開6.3.4在線任一天一、回顧并提問分鐘一、回顧并提問（5分鐘在線平臺搶答Api二、新課導入（5鐘學生三、課堂講授（70力及提高學生鐘參與意識1.API口開發（30分鐘2.（30分鐘二、新課導入（5分鐘3.總結并提問（10鐘通過分步教學，幫助學生掌握文學列表展示功能的實現方法，提升實踐能三、課堂講授（60分鐘（一）APIAPI接口的需API數據操作模塊：在API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/get-classic/1”APIAPI接口，獲ClassicView.vue頁面文（三）總結并提問（10分ElementPlus組件的使API單元六（任務六單元（任務）“古典文學網”賞文學功能開發6.3.5開發文學評價功能單元（任務）（不得超過4個FlaskAPI接口的掌握文學評價功能的實現能夠獨立開發文學評價APIAPIAPIAPIAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（一天API接口的開6.3.5在線任一、回顧并提問分鐘一、回顧并提問（5分鐘在線平臺搶答Api二、新課導入（5鐘學生三、課堂講授（70力及提高學生鐘參與意識1.API口開發（30分鐘2.二、新課導入（5分鐘（30分鐘3.總結并提問（10鐘通過分步教學，幫助學生掌握文學評三、課堂講授（60分鐘（一）APIAPI編號（cid）數據操作模塊：在API接口，處理文學作品評API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/judge-classic”APIAPI接口，提交用ClassicView.vue頁面文token控制評價按（三）總結并提問（10分ElementPlus組件的使API單元七（任務一單元（任務）7：“古典文學網”任務一Flask單元（任務）（不得超過4個1，主要講授“Flask框架的中間件和消息閃現機制”，包括中間件的創建與應HTML、CSSJavaScriptFlask理解Flask中間件的作用和掌握Flask消息閃現機制的掌握如何將中間件和消息能夠使用消息閃現機制實能夠將中間件和消息閃現Flask案例教學法：Flask任務驅動法：問題導向法：開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：Flask中間件和消息閃現機制的使用方法，學生分組完成實課后：（時間（一天7.2在線老師布置的線幫助學生提前了解課程內容，培養自二、新課導入（5分Flask中間件的創建與應用（30分Flask消息閃現機制的使用（30分講解Flask中間件的創演示Flask消息閃現機總結并提問：教師總結中間件和消息閃現機制的間件和消息閃現機制單元七（任務二單元（任務）7-“古典文學網”書評功能開發任務二：7.2.3ElementPlus單元（任務）（不得超過4個ElementPlusTextInputRadioDescriptionsHTMLCSSJavaScriptVue.jsElementPlus的基礎用法。理解ElementPlus框架中的常Text文本組件、Input輸Text組件展示Input組件處理用戶DescriptionsElementPlusText文本組件、Input輸入框、RadioDescriptions描述列表的使用。開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間ElementPlus的基礎組Text、Input、Radio、Descriptions組一、回顧并提問分鐘一、回顧并提問（5分鐘在線平臺搶答二、新課導入（5鐘學生三、課堂講授（70力及提高學生鐘參與意識1.Text文本組件分鐘）：type2.Input二、新課導入（5分鐘（15分鐘）：Input3.Radio（15分鐘）：通過提問、搶答和分組實踐，引導學生掌握Element表組件（15分鐘框架常用組件的使ElementPlus用方法，提升實踐3.總結并提問（10鐘三、課堂講授（60分鐘1.Text2.Input3.Radio4.Descriptions5.ElementPlus單元七（任務三單元（任務）7-“古典文學網”書評功能開發任務三：7.3.1開發書評展示功能單元（任務）（不得超過4個FlaskJavaScript的基本語法。API接口的掌握書評展示功能的實現能夠獨立開發書評展示APIAPIAPIAPIAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（API接口的開7.3.1在線任一天二、新課導入（5分三、課堂講授（70分API接口開發（30分鐘）（30分鐘總結并提問（10分二、新課導入（5分鐘在線平臺搶答三、課堂講授（60分鐘（一）1.API1.學生搶答問API接口，處理文學評論信API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/get-discuss/1”APIAPI接口，獲取文ClassicView.vue頁面文v-for命令展示評論列表，將API單元七（任務四單元（任務）7-“古典文學網”書評功能開發任務四：7.3.2開發書評發表功能單元（任務）（不得超過4個FlaskJavaScript的基本語法。API接口的掌握書評發表功能的實現能夠獨立開發書評發表APIAPIAPIAPIAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（API接口的開7.3.2在線任一天二、新課導入（5分三、課堂講授（70分API接口開發（30分鐘）（30分鐘總結并提問（10分二、新課導入（5分鐘在線平臺搶答三、課堂講授（60分鐘（一）1.API2.學生搶答問2.學生分組完3.學生聆聽總API接口，處理書評發表的API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/pub-discuss”APIAPI接口，提交用ClassicView.vue頁面文token控制書評發表區API單元七（任務五單元（任務）7-“古典文學網”書評功能開發任務三：7.3.3開發書評評價功能單元（任務）（不得超過4個FlaskJavaScript的基本語法。API接口的掌握書評評價功能的實現能夠獨立開發書評評價APIAPIAPIAPIAPIAPI開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間學（API接口的開7.3.3在線任一天二、新課導入（5分三、課堂講授（70分API接口開發（30分鐘）（30分鐘總結并提問（10分二、新課導入（5分鐘在線平臺搶答三、課堂講授（60分鐘（一）1.API3.學生搶答問API接口的需求，包2.學生分組完3.學生聆聽總API接口，處理書評評價的API接口開發：在“cls_svr”項API接口，調用API接口測試：通過訪問ics/judge-discuss”APIAPI接口，提交用ClassicView.vue頁面文token控制評價按鈕的API單元八（任務一單元（任務）任務一8.2.1Flask8.2.2Flask框架的文件下載、8.2.3ElementPlusUpload組件單元（任務）（不得超過4個本次課位于單元八的任務一，主要講授“FlaskElementPlus組件的使用方法”UploadHTML、CSSJavaScriptFlask理解Flask框架文件上傳和掌握ElementPlus框架Upload能夠獨立實現文件上傳和能夠使用ElementPlusUploadFlask框架文件上傳和文件下載的實現，ElementPlusUploadUploadUpload案例教學法：Upload任務驅動法：問題導向法：開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：Upload組件的使用，學課后：（時間（一天ElementPlusUpload組8.2.1、8.2.2、8.2.3在線任務，并參老師布置的線幫助學生提前了解課程內容，培養自二、新課導入（5分Flask框架文件上傳的實現（20分Flask框架文件下載的實現（20分ElementPlus框Upload組件的使用（20分鐘）一、回顧并提問：Flask框架的基本使用，提問如何實現文件上傳和下載功講解Flask框架文件上傳HTML<input在服務器端使用Flask框架的request.filesHTML表單。save()方法將”演示Flask框架文件下載Upload組件的使用，Flask框架的send_file和send_from_directory函數從服使用send_from_directory從指定目錄發送文件給客戶3.講解ElementPlus框架Upload組件的使用方法，發需求描述：教師詳細講解ElementPlus框架Upload組件el-upload標簽實現文件上傳功UploadVue.js項目中引入ElementPlus框架Upload組件。配置Upload組件：設置Upload4.總結并提問：教師總結文Upload組件的使用，布置載功能的實現方法及Upload載的安全性？如何優化文件Upload組件的使Upload組件的使用，但在復雜場單元八（任務二單元（任務）任務二8.3.1單元（任務）（不得超過4個HTML、CSSJavaScriptFlask理解個人信息展示功能的掌握側邊欄導航組件的開掌握個人信息展示功能的能夠獨立開發側邊欄導航能夠實現個人信息展示功問題導向法：開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方文檔、Vue.js官方文檔、ElementPlus課前：課中：課后：（時間（一天8.3.1在老師布置的線幫助學生提前了解課程內容，培養自二、新課導入（5分組件（20分鐘）示功能（30分鐘）Menu菜單組件實現側邊創建側邊欄導航組件：在“cls_clt”項目的建一個名為AsideComp.vue使用Menu菜單組件：在AsideComp.vueElementPlusMenu菜整合到頁面：將AsideComp.vue組件整合到用何通過前端頁面展示當前登項目的“/src/views/”目錄下，新建一個名為UserView.vue獲取用戶信息：在UserView.vue中，調用后端API接口獲取當前登錄用戶展示用戶信息：在 中，使用ElementPlus框架的組件（如descriptions3.總結并提問：教師總結個全性？如何優化個人信息展單元八（任務三單元（任務）任務三8.3.2單元（任務）（不得超過4個本次課位于單元八的任務三，主要講授“開發用戶頭像上傳功能”HTML、CSSJavaScriptFlask理解用戶頭像上傳功能的API接口的掌握頭像上傳功能的實現能夠獨立開發頭像上傳APIAPIAPIAPI案例教學法：API任務驅動法：問題導向法：開發工具：PyCharm、VSCode、Git框架與庫：Flask、Vue.js、ElementPlus參考資料：Flask官方