本書系統(tǒng)地介紹了Web前端開發(fā)的基礎(chǔ)知識和實際應(yīng)用。全書共8章，內(nèi)容包括Web應(yīng)用概述及開發(fā)環(huán)境、使用HTML5標(biāo)簽組織頁面內(nèi)容、使用CSS3修飾頁面元素、元素定位與頁面布局、客戶端腳本JavaScript與jQuery庫、基于Node.js環(huán)境的Vue3項目開發(fā)、Vue3 UI組件庫Element Plus和基于Vue3+PHP7的項目前后端分離開發(fā)。本書以實際應(yīng)用為出發(fā)點，精心組織內(nèi)容，每章都設(shè)計了典型案例，并配有習(xí)題及實驗。本書配套的課程網(wǎng)站提供了教學(xué)大綱、PPT課件、項目源代碼、學(xué)習(xí)視頻、在線測試和工具軟件包，極大地方便了教與學(xué)。本書可以作為高等院校計算機及相關(guān)專業(yè)本科生教材，也可以作為Web開發(fā)愛好者的參考書。

吳志祥，教授，項目教學(xué)法名師，長期從事Web方向和Java方向序列課程的教學(xué)，先后主編了《Web前端開發(fā)技術(shù)》、《Java程序設(shè)計》、《軟件設(shè)計模式—Java版》、《Java企業(yè)級應(yīng)用開發(fā)》和《Android Studio移動應(yīng)用開發(fā)》等教材。指導(dǎo)學(xué)生在“藍橋杯”全國軟件和信息技術(shù)專業(yè)人才大賽、全國軟件設(shè)計大賽等高水平賽事中多次獲獎。

第1章 Web應(yīng)用概述及開發(fā)環(huán)境 1
1.1 B/S架構(gòu)與網(wǎng)站技術(shù) 1
1.1.1 網(wǎng)站與網(wǎng)頁 1
1.1.2 B/S架構(gòu) 2
1.1.3 客戶端瀏覽器 5
1.1.4 相關(guān)名詞解釋 8
1.2 服務(wù)器端集成開發(fā)環(huán)境phpstudy_pro 9
1.2.1 關(guān)于phpstudy_pro 9
1.2.2 Web服務(wù)器Apache 10
1.2.3 數(shù)據(jù)庫服務(wù)器MySQL及其管理工具phpMyAdmin 10
1.2.4 PHP語言特點、新版本的安裝與切換 13
1.3 Web集成開發(fā)環(huán)境IDEA 2023 14
1.3.1 IDEA 2023概述 14
1.3.2 IDEA 2023的基本使用 15
1.3.3 IDEA 2023常用快捷操作 17
習(xí)題1 18
實驗1 18
第2章 使用HTML5標(biāo)簽組織頁面內(nèi)容 19
2.1 HTML語言概述 19
2.1.1 HTML標(biāo)簽名與屬性 19
2.1.2 實體元素分類 22
2.1.3 網(wǎng)頁文檔編碼與＜meta＞標(biāo)簽 23
2.1.4 特殊字符 24
2.1.5 HTML色彩與度量單位 24
2.2 簡單的HTML標(biāo)簽 25
2.2.1 文本樣式標(biāo)簽 25
2.2.2 文本格式化標(biāo)簽 26
2.2.3 滾動標(biāo)簽 27
2.2.4 列表標(biāo)簽 27
2.2.5 超鏈接與錨點鏈接標(biāo)簽 28
2.2.6 圖像標(biāo)簽 29
2.3 HTML5音頻與視頻 29
2.3.1 音頻標(biāo)簽＜audio＞ 29
2.3.2 視頻標(biāo)簽＜video＞ 30
2.4 表格 30
2.4.1 表格定義及屬性設(shè)置 30
2.4.2 表格行屬性設(shè)置 31
2.4.3 表格單元格屬性設(shè)置 31
2.4.4 表格單元格合并 32
2.5 表單 33
2.5.1 表單及其工作原理 33
2.5.2 表單定義與基本使用 33
2.5.3 常用表單域 35
2.5.4 文件域與文件上傳 38
習(xí)題2 40
實驗2 40
第3章 使用CSS3修飾頁面元素 41
3.1 CSS概述 41
3.2 基本選擇器與組合選擇器 42
3.2.1　基本選擇器 42
3.2.2 組合選擇器 44
3.3 CSS樣式的使用 45
3.3.1 行內(nèi)式（內(nèi)聯(lián)樣式） 45
3.3.2 內(nèi)嵌式（內(nèi)部樣式） 45
3.3.3 鏈入式（使用外部樣式文件） 46
3.3.4 樣式?jīng)_突與樣式優(yōu)先級 46
3.3.5 CSS高級特性 47
3.4 常用CSS屬性 47
3.4.1 CSS盒子模型 47
3.4.2 文本外觀 48
3.4.3 方框樣式屬性 49
3.4.4 元素可見與顯示特性 50
3.4.5 設(shè)置按鈕是否可用 50
3.4.6 陰影效果與不透明度 50
3.4.7 重新定義HTML元素外觀 51
3.5 CSS高級技術(shù)演進 54
3.5.1 CSS3新特性 54
3.5.2 CSS3陰影效果 57
3.5.3 CSS3動畫效果 58
3.5.4 CSS3媒體查詢功能 61
習(xí)題3 62
實驗3 62
第4章 元素定位與頁面布局 63
4.1 頁面布局概述 63
4.2 元素定位 64
4.2.1 靜態(tài)定位 64
4.2.2 相對定位 64
4.2.3 絕對定位 64
4.2.4 固定定位 67
4.2.5 堆疊順序 67
4.3 CSS+Div布局 67
4.4 頁內(nèi)框架 71
4.5 彈性布局 75
4.6 HTML5布局標(biāo)簽 76
4.7 使用Bootstrap實現(xiàn)響應(yīng)式布局 79
4.8 綜合項目：會員管理項目memmana1 82
習(xí)題4 89
實驗4 89
第5章 客戶端腳本JavaScript與jQuery庫 90
5.1 JavaScript基礎(chǔ) 90
5.1.1 JavaScript概述 90
5.1.2 JavaScript腳本的定義與使用 91
5.1.3 JavaScript數(shù)據(jù)類型 93
5.1.4 JavaScript字面量、變量與常量聲明、運算符 95
5.1.5 JavaScript流程控制語句 97
5.1.6 JavaScript對象的PEM模型 99
5.1.7 JavaScript腳本調(diào)試 101
5.2 JavaScript內(nèi)置對象 103
5.2.1 日期/時間對象 103
5.2.2 數(shù)組對象 103
5.2.3 字符串對象 104
5.2.4 正則對象 105
5.2.5 數(shù)學(xué)對象 106
5.2.6 JSON對象 106
5.3 瀏覽器對象 108
5.3.1 BOM與DOM 108
5.3.2 頂級對象window的常用屬性和方法 110
5.3.3 文檔對象document與表單的elements集合 113
5.3.4 位置對象location 117
5.3.5 歷史對象history 118
5.3.6 導(dǎo)航對象navigator 118
5.4 綜合項目：會員管理項目memmana2a 119
5.4.1 頁面頭部的實時時間顯示 120
5.4.2 登錄頁面設(shè)計 120
5.4.3 注冊頁面設(shè)計 122
5.5 JavaScript 高級特性 124
5.5.1 原型與原型鏈 124
5.5.2 異步編程：Promise、fetch與async/await 125
5.6 jQuery庫與jQuery AJAX 128
5.6.1 jQuery庫使用基礎(chǔ) 128
5.6.2 綜合項目：會員管理項目memmana2b 133
5.6.3 jQuery AJAX概述 135
5.6.4 jQuery AJAX應(yīng)用實例 136
5.7 HTML5 Web存儲 140
5.7.1 本地存儲localStorage與會話存儲sessionStorage 141
5.7.2 WebSQL數(shù)據(jù)庫IndexedDB 143
習(xí)題5 144
實驗5 144
第6章 基于Node.js環(huán)境的Vue3項目開發(fā) 145
6.1 JavaScript服務(wù)器端運行時環(huán)境Node.js 145
6.1.1 Node.js概述 145
6.1.2 Node.js下載與安裝 145
6.1.3 庫、模塊、函數(shù)與包 146
6.1.4 包管理器npm與cnpm 147
6.1.5 Node.js使用示例（訪問MySQL數(shù)據(jù)庫、創(chuàng)建HTTP服務(wù)器） 148
6.2 Vue.js框架及其基本語法 149
6.2.1 Vue.js概述 149
6.2.2 在HTML頁面中使用Vue3 150
6.2.3 Vue3基本語法 151
6.3 Vue3項目開發(fā)基礎(chǔ) 154
6.3.1 Vue3項目創(chuàng)建與運行 154
6.3.2 Vue3項目結(jié)構(gòu)分析 156
6.4 Vue3組件語法 158
6.4.1 Vue3組件的一般結(jié)構(gòu) 158
6.4.2 選項式API與組合式API 159
6.4.3 組件導(dǎo)出/導(dǎo)入、props屬性與Vue組件調(diào)用 160
6.4.4 通用屬性ref與$refs 162
6.4.5 watch與數(shù)據(jù)屬性監(jiān)聽 163
6.4.6 Vue3延遲回調(diào)方法$nextTick() 164
6.5 Vue3項目配套庫 164
6.5.1 路由庫Vue Router 164
6.5.2 異步請求庫axios 166
6.5.3 狀態(tài)管理庫Vuex 170
6.5.4 使用百度地圖包 173
6.5.5 使用圖表庫ECharts 174
習(xí)題6 176
實驗6 176
第7章 Vue3 UI組件庫Element Plus 177
7.1 從Element UI到Element Plus 177
7.2 在Vue3項目中使用Element Plus 178
7.3 Element Plus常用基礎(chǔ)組件 178
7.3.1 布局容器組件 178
7.3.2 菜單組件 179
7.3.3 輪播組件 183
7.3.4 下拉列表與下拉菜單 184
7.3.5 消息框、確認框與對話框 187
7.3.6 表格組件與數(shù)據(jù)的分頁顯示 190
7.3.7 輸入組件、按鈕組件、表單組件及其表單元素驗證 194
7.3.8 選項卡組件 197
7.4 文件上傳與下載 198
7.4.1 文件上傳 198
7.4.2 文件下載 202
7.5 富文本編輯器Quill 204
習(xí)題7 213
實驗7 213
第8章 基于Vue3+PHP7的項目前后端分離開發(fā) 214
8.1 Web項目前后端分離開發(fā)技術(shù)要點 214
8.1.1 前后端分離的核心概念與技術(shù)架構(gòu) 214
8.1.2 RESTful API設(shè)計原則 216
8.1.3 PHP7后端設(shè)置允許跨域訪問與預(yù)檢請求 217
8.1.4 Vue3前端與PHP7后端的數(shù)據(jù)格式 218
8.1.5 項目測試 220
8.2 綜合項目：高校專業(yè)信息管理系統(tǒng) 221
8.2.1 需求分析 221
8.2.2 項目數(shù)據(jù)庫設(shè)計 221
8.2.3 PHP后端項目WebBackend-php7 222
8.2.4 編寫Vue3項目啟動文件main.js 227
8.2.5 根組件、歡迎組件與主頁設(shè)計 227
8.2.6 游客功能設(shè)計 233
8.2.7 管理員功能設(shè)計 239
8.3 Vue3項目打包與部署上線 252
8.3.1 Vue3項目打包 252
8.3.2 部署打包后的Vue3項目到Nginx服務(wù)器 253
習(xí)題8 255
實驗8 255
參考文獻 256