Vue.js 3.X 項(xiàng)目開發(fā)實(shí)錄

第1章  Vue.js開發(fā)基礎(chǔ) 1
1.1  背景知識 2
1.1.1  客戶/服務(wù)器體系結(jié)構(gòu) 2
1.1.2  HTML、CSS與JavaScript 2
1.1.3  RESTful架構(gòu) 3
1.1.4  大前端時(shí)代的來臨 3
1.2  MVC、MVP和MVVM架構(gòu)模式 4
1.2.1  MVC架構(gòu)模式 4
1.2.2  MVP架構(gòu)模式 5
1.2.3  MVVM架構(gòu)模式 7
1.2.4  三者的區(qū)別和優(yōu)劣 8
1.3  前端開發(fā)調(diào)試?yán)?10
1.3.1  開發(fā)者的眼——Chrome 10
1.3.2  開發(fā)者的手——VS Code 10
1.3.3  開發(fā)者的心——Terminal 11
1.4  搭建編程測試環(huán)境 12
1.4.1  Vue.js的安裝 12
1.4.2  使用NPM搭建Vue運(yùn)行環(huán)境 13
1.4.3  項(xiàng)目開發(fā)工具 17
1.4.4  源碼管理機(jī)制 24
1.5  代碼調(diào)試方法 25
1.5.1  使用Console工具 25
1.5.2  使用調(diào)試工具 27
1.6  本章小結(jié) 29
第2章  熟練使用Vue對象、組件與庫 31
2.1  掛載Vue對象 32
2.2  操作關(guān)聯(lián)數(shù)據(jù) 33
2.2.1  data成員 33
2.2.2  computed成員 34
2.2.3  methods成員 35
2.2.4  watch成員 36
2.3  處理生命周期 37
2.4  Vue組件基礎(chǔ) 41
2.4.1  創(chuàng)建Vue組件 42
2.4.2  Vue專用組件 44
2.5  設(shè)計(jì)Vue組件 46
2.5.1  面向組件的v-on指令 46
2.5.2  面向組件的v-model指令 47
2.5.3  預(yù)留組件插槽 48
2.6  使用現(xiàn)有組件 49
2.6.1  使用內(nèi)置組件 49
2.6.2  引入外部組件 53
2.7  使用現(xiàn)有庫 54
2.7.1  使用內(nèi)置庫 54
2.7.2  引入外部庫 55
2.8  本章小結(jié) 57
第3章  企業(yè)網(wǎng)站系統(tǒng) 59
3.1  項(xiàng)目環(huán)境及框架 60
3.1.1  系統(tǒng)開發(fā)環(huán)境要求 60
3.1.2  軟件框架 60
3.2  搭建Vue項(xiàng)目 61
3.2.1  項(xiàng)目創(chuàng)建 61
3.2.2  安裝Vue組件和庫 62
3.3  系統(tǒng)分析 64
3.3.1  系統(tǒng)功能設(shè)計(jì) 65
3.3.2  系統(tǒng)功能結(jié)構(gòu)圖 65
3.4  企業(yè)網(wǎng)站系統(tǒng)運(yùn)行 65
3.4.1  系統(tǒng)文件結(jié)構(gòu) 66
3.4.2  運(yùn)行系統(tǒng) 67
3.5  系統(tǒng)主要功能實(shí)現(xiàn) 68
3.5.1  首頁的實(shí)現(xiàn) 68
3.5.2  關(guān)于我們頁面的實(shí)現(xiàn) 75
3.5.3  核心業(yè)務(wù)頁面的實(shí)現(xiàn) 77
3.5.4  新聞動態(tài)頁面的實(shí)現(xiàn) 79
3.5.5  聯(lián)系我們頁面的實(shí)現(xiàn) 80
3.5.6  “在線咨詢”彈窗的實(shí)現(xiàn) 81
3.6  本章小結(jié) 82
第4章  商城網(wǎng)站系統(tǒng) 83
4.1  項(xiàng)目環(huán)境及框架 84
4.1.1  系統(tǒng)開發(fā)環(huán)境要求 84
4.1.2  軟件框架 84
4.2  系統(tǒng)分析 85
4.2.1  系統(tǒng)功能設(shè)計(jì) 85
4.2.2  系統(tǒng)功能結(jié)構(gòu)圖 85
4.3  商城網(wǎng)站系統(tǒng)運(yùn)行 86
4.3.1  系統(tǒng)文件結(jié)構(gòu) 86
4.3.2  運(yùn)行系統(tǒng) 87
4.4  系統(tǒng)主要功能實(shí)現(xiàn) 88
4.4.1  首頁的實(shí)現(xiàn) 88
4.4.2  商品詳情頁面的實(shí)現(xiàn) 95
4.4.3  商品分類頁面的實(shí)現(xiàn) 96
4.4.4  商品結(jié)算頁面的實(shí)現(xiàn) 98
4.4.5  個(gè)人信息頁面的實(shí)現(xiàn) 102
4.4.6  訂單信息頁面的實(shí)現(xiàn) 104
4.5  本章小結(jié) 106
第5章  金融管理系統(tǒng) 107
5.1  項(xiàng)目環(huán)境及框架 108
5.1.1  系統(tǒng)開發(fā)環(huán)境要求 108
5.1.2  軟件框架 108
5.2  系統(tǒng)分析 109
5.2.1  系統(tǒng)功能設(shè)計(jì) 109
5.2.2  系統(tǒng)功能結(jié)構(gòu)圖 109
5.3  金融管理系統(tǒng)運(yùn)行 110
5.3.1  系統(tǒng)文件結(jié)構(gòu) 110
5.3.2  運(yùn)行系統(tǒng) 111
5.4  系統(tǒng)主要功能實(shí)現(xiàn) 112
5.4.1  登錄頁面的實(shí)現(xiàn) 112
5.4.2  注冊頁面的實(shí)現(xiàn) 114
5.4.3  首頁的實(shí)現(xiàn) 116
5.4.4  用戶信息頁面的實(shí)現(xiàn) 119
5.4.5  放貸信息頁面的實(shí)現(xiàn) 123
5.4.6  還款信息頁面的實(shí)現(xiàn) 123
5.5  本章小結(jié) 124
第6章  游戲娛樂網(wǎng)站系統(tǒng) 125
6.1  項(xiàng)目環(huán)境及框架 126
6.1.1  系統(tǒng)開發(fā)環(huán)境要求 126
6.1.2  軟件框架 126
6.2  系統(tǒng)分析 127
6.2.1  系統(tǒng)功能設(shè)計(jì) 127
6.2.2  系統(tǒng)功能結(jié)構(gòu)圖 127
6.3  游戲娛樂網(wǎng)站系統(tǒng)運(yùn)行 128
6.3.1  系統(tǒng)文件結(jié)構(gòu) 128
6.3.2  運(yùn)行系統(tǒng) 129
6.4  系統(tǒng)主要功能實(shí)現(xiàn) 130
6.4.1  登錄頁面的實(shí)現(xiàn) 130
6.4.2  注冊頁面的實(shí)現(xiàn) 132
6.4.3  首頁的實(shí)現(xiàn) 133
6.4.4  游戲詳情頁面的實(shí)現(xiàn) 137
6.4.5  游戲列表頁面的實(shí)現(xiàn) 141
6.4.6  我的收藏頁面的實(shí)現(xiàn) 141
6.5  本章小結(jié) 142
第7章  在線教育網(wǎng)站系統(tǒng) 143
7.1  項(xiàng)目環(huán)境及框架 144
7.1.1  系統(tǒng)開發(fā)環(huán)境要求 144
7.1.2  軟件框架 144
7.2  系統(tǒng)分析 145
7.2.1  系統(tǒng)功能設(shè)計(jì) 145
7.2.2  系統(tǒng)功能結(jié)構(gòu)圖 145
7.3  在線教育網(wǎng)站系統(tǒng)運(yùn)行 146
7.3.1  系統(tǒng)文件結(jié)構(gòu) 146
7.3.2  運(yùn)行系統(tǒng) 147
7.4  系統(tǒng)主要功能實(shí)現(xiàn) 149
7.4.1  首頁的實(shí)現(xiàn) 149
7.4.2  課程列表頁面的實(shí)現(xiàn) 156
7.4.3  合作院校頁面的實(shí)現(xiàn) 158
7.4.4  高職課堂頁面的實(shí)現(xiàn) 159
7.4.5  課程詳情頁面的實(shí)現(xiàn) 160
7.4.6  登錄注冊頁面的實(shí)現(xiàn) 162
7.5  本章小結(jié) 168
第8章  物流運(yùn)輸管理系統(tǒng) 169
8.1  項(xiàng)目環(huán)境及框架 170
8.1.1  系統(tǒng)開發(fā)環(huán)境要求 170
8.1.2  軟件框架 170
8.2  系統(tǒng)分析 171
8.2.1  系統(tǒng)功能設(shè)計(jì) 171
8.2.2  系統(tǒng)功能結(jié)構(gòu)圖 171
8.3  物流運(yùn)輸管理系統(tǒng)運(yùn)行 172
8.3.1  系統(tǒng)文件結(jié)構(gòu) 172
8.3.2  運(yùn)行系統(tǒng) 173
8.4  系統(tǒng)主要功能實(shí)現(xiàn) 174
8.4.1  登錄頁面的實(shí)現(xiàn) 174
8.4.2  注冊頁面的實(shí)現(xiàn) 176
8.4.3  工作臺頁面的實(shí)現(xiàn) 177
8.4.4  物流管理頁面的實(shí)現(xiàn) 182
8.4.5  用戶管理頁面的實(shí)現(xiàn) 186
8.5  本章小結(jié) 187
第9章  圖書管理系統(tǒng) 189
9.1  項(xiàng)目環(huán)境及框架 190
9.1.1  系統(tǒng)開發(fā)環(huán)境要求 190
9.1.2  軟件框架 190
9.2  系統(tǒng)分析 191
9.2.1  系統(tǒng)功能設(shè)計(jì) 191
9.2.2  系統(tǒng)功能結(jié)構(gòu)圖 191
9.3  圖書管理系統(tǒng)運(yùn)行 192
9.3.1  系統(tǒng)文件結(jié)構(gòu) 192
9.3.2  運(yùn)行系統(tǒng) 193
9.4  系統(tǒng)主要功能實(shí)現(xiàn) 194
9.4.1  登錄頁面的實(shí)現(xiàn) 194
9.4.2  注冊頁面的實(shí)現(xiàn) 196
9.4.3  首頁的實(shí)現(xiàn) 196
9.4.4  個(gè)人中心頁面的實(shí)現(xiàn) 202
9.4.5  書籍管理頁面的實(shí)現(xiàn) 204
9.4.6  用戶管理頁面的實(shí)現(xiàn) 207
9.5  本章小結(jié) 207
第10章  咖啡館網(wǎng)站系統(tǒng) 209
10.1  項(xiàng)目環(huán)境及框架 210
10.1.1  系統(tǒng)開發(fā)環(huán)境要求 210
10.1.2  軟件框架 210
10.2  系統(tǒng)分析 211
10.2.1  系統(tǒng)功能設(shè)計(jì) 211
10.2.2  系統(tǒng)功能結(jié)構(gòu)圖 211
10.3  咖啡館網(wǎng)站系統(tǒng)運(yùn)行 212
10.3.1  系統(tǒng)文件結(jié)構(gòu) 212
10.3.2  運(yùn)行系統(tǒng) 213
10.4  系統(tǒng)主要功能實(shí)現(xiàn) 214
10.4.1  首頁的實(shí)現(xiàn) 214
10.4.2  商品列表頁面的實(shí)現(xiàn) 220
10.4.3  商品詳情頁面的實(shí)現(xiàn) 222
10.4.4  意見/投訴頁面的實(shí)現(xiàn) 224
10.4.5  登錄頁面的實(shí)現(xiàn) 226
10.4.6  注冊頁面的實(shí)現(xiàn) 227
10.5  本章小結(jié) 227
第11章  家庭裝修網(wǎng)站系統(tǒng) 229
11.1  項(xiàng)目環(huán)境及框架 230
11.1.1  系統(tǒng)開發(fā)環(huán)境要求 230
11.1.2  軟件框架 230
11.2  系統(tǒng)分析 231
11.2.1  系統(tǒng)功能設(shè)計(jì) 231
11.2.2  系統(tǒng)功能結(jié)構(gòu)圖 231
11.3  家庭裝修網(wǎng)站系統(tǒng)運(yùn)行 232
11.3.1  系統(tǒng)文件結(jié)構(gòu) 232
11.3.2  運(yùn)行系統(tǒng) 233
11.4  系統(tǒng)主要功能實(shí)現(xiàn) 234
11.4.1  首頁的實(shí)現(xiàn) 235
11.4.2  關(guān)于我們頁面的實(shí)現(xiàn) 242
11.4.3  新聞資訊頁面的實(shí)現(xiàn) 244
11.4.4  經(jīng)典案例頁面的實(shí)現(xiàn) 245
11.4.5  合作與支持頁面的實(shí)現(xiàn) 246
11.5  本章小結(jié) 248
第12章  訂票系統(tǒng) 249
12.1  項(xiàng)目環(huán)境及框架 250
12.1.1  系統(tǒng)開發(fā)環(huán)境要求 250
12.1.2  軟件框架 250
12.2  系統(tǒng)分析 251
12.2.1  系統(tǒng)功能設(shè)計(jì) 251
12.2.2  系統(tǒng)功能結(jié)構(gòu)圖 251
12.3  訂票系統(tǒng)運(yùn)行 252
12.3.1  系統(tǒng)文件結(jié)構(gòu) 252
12.3.2  運(yùn)行系統(tǒng) 253
12.4  系統(tǒng)主要功能實(shí)現(xiàn) 254
12.4.1  在線購票頁面的實(shí)現(xiàn) 254
12.4.2  車次列表頁面的實(shí)現(xiàn) 260
12.4.3  在線搶票頁面的實(shí)現(xiàn) 262
12.4.4  我的訂單頁面的實(shí)現(xiàn) 264
12.4.5  訂單詳情頁面的實(shí)現(xiàn) 267
12.4.6  我的信息頁面的實(shí)現(xiàn) 268
12.5  本章小結(jié) 268
第13章  財(cái)務(wù)管理系統(tǒng) 269
13.1  項(xiàng)目環(huán)境及框架 270
13.1.1  系統(tǒng)開發(fā)環(huán)境要求 270
13.1.2  軟件框架 270
13.2  系統(tǒng)分析 271
13.2.1  系統(tǒng)功能設(shè)計(jì) 271
13.2.2  系統(tǒng)功能結(jié)構(gòu)圖 271
13.3  財(cái)務(wù)管理系統(tǒng)運(yùn)行 272
13.3.1  系統(tǒng)文件結(jié)構(gòu) 272
13.3.2  運(yùn)行系統(tǒng) 273
13.4  系統(tǒng)主要功能實(shí)現(xiàn) 274
13.4.1  登錄頁面的實(shí)現(xiàn) 274
13.4.2  注冊頁面的實(shí)現(xiàn) 276
13.4.3  營收分析頁面的實(shí)現(xiàn) 278
13.4.4  審批列表頁面的實(shí)現(xiàn) 280
13.4.5  預(yù)算列表頁面的實(shí)現(xiàn) 281
13.5  本章小結(jié) 284
第14章  項(xiàng)目信息化管理系統(tǒng) 285
14.1  項(xiàng)目環(huán)境及框架 286
14.1.1  系統(tǒng)開發(fā)環(huán)境要求 286
14.1.2  軟件框架 286
14.2  系統(tǒng)分析 287
14.2.1  系統(tǒng)功能設(shè)計(jì) 287
14.2.2  系統(tǒng)功能結(jié)構(gòu)圖 287
14.3  項(xiàng)目信息化管理系統(tǒng)運(yùn)行 288
14.3.1  系統(tǒng)文件結(jié)構(gòu) 288
14.3.2  運(yùn)行系統(tǒng) 289
14.4  系統(tǒng)主要功能實(shí)現(xiàn) 290
14.4.1  登錄頁面的實(shí)現(xiàn) 290
14.4.2  注冊頁面的實(shí)現(xiàn) 292
14.4.3  首頁的實(shí)現(xiàn) 292
14.4.4  我的項(xiàng)目頁面的實(shí)現(xiàn) 296
14.4.5  項(xiàng)目跟進(jìn)頁面的實(shí)現(xiàn) 299
14.4.6  項(xiàng)目報(bào)備頁面的實(shí)現(xiàn) 303
14.5  本章小結(jié) 303
第15章  辦公自動化系統(tǒng) 305
15.1  項(xiàng)目環(huán)境及框架 306
15.1.1  系統(tǒng)開發(fā)環(huán)境要求 306
15.1.2  軟件框架 306
15.2  系統(tǒng)分析 307
15.2.1  系統(tǒng)功能設(shè)計(jì) 307
15.2.2  系統(tǒng)功能結(jié)構(gòu)圖 307
15.3  辦公自動化系統(tǒng)運(yùn)行 308
15.3.1  系統(tǒng)文件結(jié)構(gòu) 308
15.3.2  運(yùn)行系統(tǒng) 309
15.4  系統(tǒng)主要功能實(shí)現(xiàn) 310
15.4.1  登錄頁面的實(shí)現(xiàn) 310
15.4.2  概況頁面的實(shí)現(xiàn) 312
15.4.3  員工信息頁面的實(shí)現(xiàn) 316
15.4.4  招聘崗位頁面的實(shí)現(xiàn) 318
15.4.5  招聘者信息頁面的實(shí)現(xiàn) 318
15.4.6  考勤信息頁面的實(shí)現(xiàn) 319
15.4.7  簽到信息頁面的實(shí)現(xiàn) 319
15.5  本章小結(jié) 320