JavaScript+Vue.js Web開(kāi)發(fā)項(xiàng)目教程
定 價(jià):59.8 元
叢書(shū)名:工業(yè)和信息化精品系列教材
- 作者:夏道春 姜華 李?lèi)?ài)菊
- 出版時(shí)間:2025/8/1
- ISBN:9787115672094
- 出 版 社:人民郵電出版社
- 中圖法分類(lèi):TP393.092.2
- 頁(yè)碼:
- 紙張:膠版紙
- 版次:
- 開(kāi)本:16開(kāi)
隨著Web前端技術(shù)的發(fā)展,JavaScript應(yīng)用越來(lái)越廣泛,各種框架技術(shù)(如Vue.js)更新速度快,應(yīng)用廣泛。本書(shū)從JavaScript、Node.js的基礎(chǔ)知識(shí)逐步展開(kāi),進(jìn)而深入探討Vue.js,包括Vue基礎(chǔ)、組件開(kāi)發(fā)、過(guò)渡與動(dòng)畫(huà)、Vite、Vue Router、Pinia以及Element Plus的應(yīng)用。全書(shū)共分為5個(gè)項(xiàng)目,每個(gè)項(xiàng)目均遵循項(xiàng)目驅(qū)動(dòng)的教學(xué)模式,通過(guò)實(shí)際項(xiàng)目中的案例來(lái)深入解析所涉及的知識(shí)點(diǎn),確保理論與實(shí)踐緊密結(jié)合。
本書(shū)適合作為普通高校、職業(yè)高等學(xué)校相關(guān)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作課程的教材,也可作為網(wǎng)頁(yè)設(shè)計(jì)行業(yè)從業(yè)人員的參考讀物。
1.產(chǎn)教融合新形態(tài)教材,校企合作開(kāi)發(fā)
2.項(xiàng)目-任務(wù)式為主線(xiàn),大項(xiàng)目貫穿
3.從WEB前端開(kāi)發(fā)崗位的技能要求出發(fā),以企業(yè)真實(shí)項(xiàng)目案例為主導(dǎo),融合WEB前后端技術(shù),使讀者能夠快速進(jìn)入到WEB開(kāi)發(fā)領(lǐng)域,全面熟悉WEB項(xiàng)目開(kāi)發(fā)流程,打通技術(shù)壁壘
4.知識(shí)點(diǎn)講解根據(jù)項(xiàng)目完成的進(jìn)度,拆分到每個(gè)任務(wù)里面去
5.結(jié)合黨的二十大精神,將思政元素融于教材中
6.將企業(yè)的新技術(shù)、新標(biāo)準(zhǔn)、新工藝融入教材中
夏道春,副教授,信息系統(tǒng)項(xiàng)目管理師,山東科技職業(yè)學(xué)院信息工程系教師,山東省軟件技術(shù)專(zhuān)業(yè)省級(jí)教學(xué)團(tuán)隊(duì)骨干教師。一直從事高職軟件技術(shù)類(lèi)專(zhuān)業(yè)課教學(xué),講授課程包括JavaScript程序設(shè)計(jì)、Vue.js程序設(shè)計(jì)、Java程序設(shè)計(jì)等。
主編簡(jiǎn)介:姜華,女,碩士學(xué)位,副教授,Web前端開(kāi)發(fā)國(guó)家級(jí)教師教學(xué)創(chuàng)新團(tuán)隊(duì)核心骨干成員。職業(yè)教育省級(jí)在線(xiàn)精品課程主持人,2門(mén)省級(jí)精品課程主講教師,省級(jí)軟件技術(shù)專(zhuān)業(yè)資源庫(kù)子項(xiàng)目負(fù)責(zé)人,主持參與完成市廳級(jí)以上課題20余項(xiàng),其中國(guó)家教學(xué)成果二等獎(jiǎng)1項(xiàng)、省級(jí)教學(xué)成果特等獎(jiǎng)1項(xiàng)、省級(jí)教學(xué)成果二等獎(jiǎng)1項(xiàng)。一直從事高職軟件類(lèi)專(zhuān)業(yè)課教學(xué),講授課程包括:HTML5+CSS3響應(yīng)式Web開(kāi)發(fā)、JavaScript程序設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)、MySQL數(shù)據(jù)庫(kù)應(yīng)用等。
目 錄
項(xiàng)目1
搭建智慧公寓網(wǎng)站首頁(yè)1
項(xiàng)目目標(biāo)1
效果展示2
任務(wù)1.1 搭建JavaScript開(kāi)發(fā)環(huán)境與渲染
首頁(yè)信息2
【任務(wù)概述】2
【知識(shí)儲(chǔ)備】3
1.1.1 初識(shí)JavaScript3
1.1.2 JavaScript開(kāi)發(fā)工具4
1.1.3 JavaScript代碼的3種引入方式7
1.1.4 JavaScript常用的輸入與輸出語(yǔ)句9
【任務(wù)實(shí)施】11
任務(wù)1.2 使用JavaScript基礎(chǔ)語(yǔ)法實(shí)現(xiàn)
動(dòng)態(tài)顯示時(shí)間13
【任務(wù)概述】13
【知識(shí)儲(chǔ)備】13
1.2.1 變量和常量13
1.2.2 數(shù)據(jù)類(lèi)型15
1.2.3 表達(dá)式與運(yùn)算符17
1.2.4 函數(shù)21
1.2.5 BOM25
【任務(wù)實(shí)施】27
任務(wù)1.3 使用流程控制與數(shù)組實(shí)現(xiàn)自動(dòng)
輪播Banner圖28
【任務(wù)概述】28
【知識(shí)儲(chǔ)備】28
1.3.1 流程控制28
1.3.2 數(shù)組34
【任務(wù)實(shí)施】36
任務(wù)1.4 使用DOM與事件實(shí)現(xiàn)二級(jí)菜單的
顯示與隱藏37
【任務(wù)概述】37
【知識(shí)儲(chǔ)備】38
1.4.1 DOM38
1.4.2 事件基礎(chǔ)44
【任務(wù)實(shí)施】48
項(xiàng)目實(shí)現(xiàn)51
項(xiàng)目小結(jié)54
課后習(xí)題54
項(xiàng)目2
智慧公寓管理系統(tǒng)的服務(wù)器端數(shù)據(jù)
處理56
項(xiàng)目目標(biāo)56
效果展示57
任務(wù)2.1 搭建Node.js開(kāi)發(fā)環(huán)境并實(shí)現(xiàn)
模塊化開(kāi)發(fā)57
【任務(wù)概述】57
【知識(shí)儲(chǔ)備】58
2.1.1 初識(shí)Node.js58
2.1.2 Node.js環(huán)境搭建60
2.1.3 模塊化開(kāi)發(fā)64
【任務(wù)實(shí)施】71
任務(wù)2.2 構(gòu)建與測(cè)試Node.js的網(wǎng)絡(luò)
開(kāi)發(fā)73
【任務(wù)概述】73
【知識(shí)儲(chǔ)備】73
2.2.1 Postman工具73
2.2.2 AJAX與Axios75
2.2.3 Express框架80
【任務(wù)實(shí)施】87
項(xiàng)目實(shí)現(xiàn)90
項(xiàng)目小結(jié)94
課后習(xí)題94
項(xiàng)目3
智慧公寓管理系統(tǒng)的登錄與注冊(cè)
頁(yè)面96
項(xiàng)目目標(biāo)96
效果展示97
任務(wù)3.1 構(gòu)建Vue開(kāi)發(fā)環(huán)境97
【任務(wù)概述】97
【知識(shí)儲(chǔ)備】98
3.1.1 初識(shí)Vue98
3.1.2 Vue環(huán)境搭建100
【任務(wù)實(shí)施】101
任務(wù)3.2 基于Vue基礎(chǔ)語(yǔ)法實(shí)現(xiàn)表單提交
頁(yè)面102
【任務(wù)概述】102
【知識(shí)儲(chǔ)備】103
3.2.1 模板語(yǔ)法103
3.2.2 指令105
3.2.3 Vue實(shí)例核心選項(xiàng)113
3.2.4 模板引用122
3.2.5 Class與Style綁定123
3.2.6 事件處理與表單綁定125
【任務(wù)實(shí)施】130
任務(wù)3.3 基于組件實(shí)現(xiàn)列表渲染頁(yè)面132
【任務(wù)概述】132
【知識(shí)儲(chǔ)備】133
3.3.1 組件基礎(chǔ)133
3.3.2 過(guò)渡與動(dòng)畫(huà)139
【任務(wù)實(shí)施】145
項(xiàng)目實(shí)現(xiàn)147
項(xiàng)目小結(jié)149
課后習(xí)題149
項(xiàng)目4
智慧公寓管理系統(tǒng)的前端技術(shù)棧151
項(xiàng)目目標(biāo)151
效果展示152
任務(wù)4.1 構(gòu)建現(xiàn)代化構(gòu)建工具Vite開(kāi)發(fā)
環(huán)境152
【任務(wù)概述】152
【知識(shí)儲(chǔ)備】153
4.1.1 單文件組件與構(gòu)建工具153
4.1.2 Vite簡(jiǎn)介154
4.1.3 Vite的安裝與使用155
4.1.4 Vite的插件機(jī)制157
【任務(wù)實(shí)施】158
任務(wù)4.2 啟用Element Plus組件庫(kù)增強(qiáng)
項(xiàng)目效果160
【任務(wù)概述】160
【知識(shí)儲(chǔ)備】161
4.2.1 初識(shí)Element Plus組件庫(kù)161
4.2.2 Element Plus常用組件163
【任務(wù)實(shí)施】188
任務(wù)4.3 集成Vue Router與Pinia,構(gòu)建
動(dòng)態(tài)應(yīng)用190
【任務(wù)概述】190
【知識(shí)儲(chǔ)備】190
4.3.1 Vue Router190
4.3.2 Pinia狀態(tài)管理199
【任務(wù)實(shí)施】205
項(xiàng)目實(shí)現(xiàn)208
項(xiàng)目小結(jié)211
課后習(xí)題211
項(xiàng)目5
智慧公寓管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)213
項(xiàng)目組織架構(gòu)213
項(xiàng)目環(huán)境214
任務(wù)5.1 實(shí)現(xiàn)服務(wù)器模塊215
【任務(wù)概述】215
【任務(wù)實(shí)施】215
任務(wù)5.2 實(shí)現(xiàn)前臺(tái)頁(yè)面模塊216
【任務(wù)概述】216
【任務(wù)實(shí)施】218
任務(wù)5.3 實(shí)現(xiàn)后臺(tái)頁(yè)面模塊225
【任務(wù)概述】225
【任務(wù)實(shí)施】228
項(xiàng)目總結(jié)238