JavaScript+Vue.js Web開發項目教程（微課版）
夏道春 姜華 李愛菊
相關主題
商品描述
隨著Web前端技術的發展，JavaScript應用越來越廣泛，各種框架技術（如Vue.js）更新速度快，應用廣泛。本書從JavaScript、Node.js的基礎知識逐步展開，進而深入探討Vue.js，包括Vue基礎、組件開發、過渡與動畫、Vite、Vue Router、Pinia以及Element Plus的應用。全書共分為5個項目，每個項目均遵循項目驅動的教學模式，通過實際項目中的案例來深入解析所涉及的知識點，確保理論與實踐緊密結合。
本書適合作為普通高校、職業高等學校相關專業網頁設計與制作課程的教材，也可作為網頁設計行業從業人員的參考讀物。
作者簡介
夏道春，副教授，信息系統項目管理師,山東科技職業學院信息工程系教師，山東省軟件技術專業省級教學團隊骨幹教師。一直從事高職軟件技術類專業課教學，講授課程包括JavaScript程序設計、Vue.js程序設計、Java程序設計等。
主編簡介：姜華，女，碩士學位，副教授，Web前端開發國家級教師教學創新團隊核心骨幹成員。職業教育省級在線精品課程主持人，2門省級精品課程主講教師，省級軟件技術專業資源庫子項目負責人，主持參與完成市廳級以上課題20余項，其中國家教學成果二等獎1項、省級教學成果特等獎1項、省級教學成果二等獎1項。一直從事高職軟件類專業課教學，講授課程包括：HTML5+CSS3響應式Web開發、JavaScript程序設計、動態網站開發、MySQL數據庫應用等。
目錄大綱
目 錄
項目1
搭建智慧公寓網站首頁 1
項目目標 1
效果展示 2
任務1.1 搭建JavaScript開發環境與渲染
首頁信息 2
【任務概述】 2
【知識儲備】 3
1.1.1 初識JavaScript 3
1.1.2 JavaScript開發工具 4
1.1.3 JavaScript代碼的3種引入方式 7
1.1.4 JavaScript常用的輸入與輸出語句 9
【任務實施】 11
任務1.2 使用JavaScript基礎語法實現
動態顯示時間 13
【任務概述】 13
【知識儲備】 13
1.2.1 變量和常量 13
1.2.2 數據類型 15
1.2.3 表達式與運算符 17
1.2.4 函數 21
1.2.5 BOM 25
【任務實施】 27
任務1.3 使用流程控制與數組實現自動
輪播Banner圖 28
【任務概述】 28
【知識儲備】 28
1.3.1 流程控制 28
1.3.2 數組 34
【任務實施】 36
任務1.4 使用DOM與事件實現二級菜單的
顯示與隱藏 37
【任務概述】 37
【知識儲備】 38
1.4.1 DOM 38
1.4.2 事件基礎 44
【任務實施】 48
項目實現 51
項目小結 54
課後習題 54
項目2
智慧公寓管理系統的服務器端數據
處理 56
項目目標 56
效果展示 57
任務2.1 搭建Node.js開發環境並實現
模塊化開發 57
【任務概述】 57
【知識儲備】 58
2.1.1 初識Node.js 58
2.1.2 Node.js環境搭建 60
2.1.3 模塊化開發 64
【任務實施】 71
任務2.2 構建與測試Node.js的網絡
開發 73
【任務概述】 73
【知識儲備】 73
2.2.1 Postman工具 73
2.2.2 AJAX與Axios 75
2.2.3 Express框架 80
【任務實施】 87
項目實現 90
項目小結 94
課後習題 94
項目3
智慧公寓管理系統的登錄與註冊
頁面 96
項目目標 96
效果展示 97
任務3.1 構建Vue開發環境 97
【任務概述】 97
【知識儲備】 98
3.1.1 初識Vue 98
3.1.2 Vue環境搭建 100
【任務實施】 101
任務3.2 基於Vue基礎語法實現表單提交
頁面 102
【任務概述】 102
【知識儲備】 103
3.2.1 模板語法 103
3.2.2 指令 105
3.2.3 Vue實例核心選項 113
3.2.4 模板引用 122
3.2.5 Class與Style綁定 123
3.2.6 事件處理與表單綁定 125
【任務實施】 130
任務3.3 基於組件實現列表渲染頁面 132
【任務概述】 132
【知識儲備】 133
3.3.1 組件基礎 133
3.3.2 過渡與動畫 139
【任務實施】 145
項目實現 147
項目小結 149
課後習題 149
項目4
智慧公寓管理系統的前端技術棧 151
項目目標 151
效果展示 152
任務4.1 構建現代化構建工具Vite開發
環境 152
【任務概述】 152
【知識儲備】 153
4.1.1 單文件組件與構建工具 153
4.1.2 Vite簡介 154
4.1.3 Vite的安裝與使用 155
4.1.4 Vite的插件機制 157
【任務實施】 158
任務4.2 啟用Element Plus組件庫增強
項目效果 160
【任務概述】 160
【知識儲備】 161
4.2.1 初識Element Plus組件庫 161
4.2.2 Element Plus常用組件 163
【任務實施】 188
任務4.3 集成Vue Router與Pinia，構建
動態應用 190
【任務概述】 190
【知識儲備】 190
4.3.1 Vue Router 190
4.3.2 Pinia狀態管理 199
【任務實施】 205
項目實現 208
項目小結 211
課後習題 211
項目5
智慧公寓管理系統的設計與實現 213
項目組織架構 213
項目環境 214
任務5.1 實現服務器模塊 215
【任務概述】 215
【任務實施】 215
任務5.2 實現前臺頁面模塊 216
【任務概述】 216
【任務實施】 218
任務5.3 實現後臺頁面模塊 225
【任務概述】 225
【任務實施】 228
項目總結 238
