目 錄

項目1

搭建智慧公寓網站首頁1

項目目標1

效果展示2

任務1.1　搭建JavaScript開發(fā)環(huán)境與渲染

首頁信息2

【任務概述】2

【知識儲備】3

1.1.1　初識JavaScript3

1.1.2　JavaScript開發(fā)工具4

1.1.3　JavaScript代碼的3種引入方式7

1.1.4　JavaScript常用的輸入與輸出語句9

【任務實施】11

任務1.2　使用JavaScript基礎語法實現

動態(tài)顯示時間13

【任務概述】13

【知識儲備】13

1.2.1　變量和常量13

1.2.2　數據類型15

1.2.3　表達式與運算符17

1.2.4　函數21

1.2.5　BOM25

【任務實施】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　DOM38

1.4.2　事件基礎44

【任務實施】48

項目實現51

項目小結54

課后習題54



項目2

智慧公寓管理系統的服務器端數據

處理56

項目目標56

效果展示57

任務2.1　搭建Node.js開發(fā)環(huán)境并實現

模塊化開發(fā)57

【任務概述】57

【知識儲備】58

2.1.1　初識Node.js58

2.1.2　Node.js環(huán)境搭建60

2.1.3　模塊化開發(fā)64

【任務實施】71

任務2.2　構建與測試Node.js的網絡

開發(fā)73

【任務概述】73

【知識儲備】73

2.2.1　Postman工具73

2.2.2　AJAX與Axios75

2.2.3　Express框架80

【任務實施】87

項目實現90

項目小結94

課后習題94



項目3

智慧公寓管理系統的登錄與注冊

頁面96

項目目標96

效果展示97

任務3.1　構建Vue開發(fā)環(huán)境97

【任務概述】97

【知識儲備】98

3.1.1　初識Vue98

3.1.2　Vue環(huán)境搭建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開發(fā)

環(huán)境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，構建

動態(tài)應用190

【任務概述】190

【知識儲備】190

4.3.1　Vue Router190

4.3.2　Pinia狀態(tài)管理199

【任務實施】205

項目實現208

項目小結211

課后習題211



項目5

智慧公寓管理系統的設計與實現213

項目組織架構213

項目環(huán)境214

任務5.1　實現服務器模塊215

【任務概述】215

【任務實施】215

任務5.2　實現前臺頁面模塊216

【任務概述】216

【任務實施】218

任務5.3　實現后臺頁面模塊225

【任務概述】225

【任務實施】228

項目總結238