Web前端開發技術——基於IDEA的Vue3+PHP7項目開發

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