Web 全棧項目開發入門與實戰

吴杏平，上市公司前端开发工程师，熟悉前端各大主流框架，并深入研究过各种框架底层源码。对后端开发也兴趣颇丰，可独立完成前端界面开发和后端接口开发。 曹雪，拥有多年开发与团队管理经验，现任平安科技资深开发工程师。

Mùlù  
xiàngmù gàishù  
dì 1 zhāng xiàngmù xūqiú shèjì 02  
1.1 Xiàngmù bèijǐng 02  
1.2 Xiàngmù jièshào 02  

dì 2 zhāng yèwù mókuài jièshào 03  
2.1 Yònghù mókuài 03  
2.1.1 Yònghù mókuài gōngnéng qīngdān 04  
2.1.2 Yònghù mókuài gōngnéng shuōmíng 04  
2.2 Shāngpǐn mókuài 05  
2.2.1 Shāngpǐn mókuài gōngnéng qīngdān 05  
2.2.2 Shāngpǐn mókuài gōngnéng shuōmíng 06  
2.3 Zhīfù mókuài 07  
2.3.1 Zhīfù mókuài gōngnéng qīngdān 07  
2.3.2 Zhīfù mókuài gōngnéng shuōmíng 07  
2.4 Xiāoxī mókuài 08  
2.4.1 Xiāoxī mókuài gōngnéng qīngdān 08  
2.4.2 Xiāoxī mókuài gōngnéng shuōmíng 08  
2.5 Gèrén zhōngxīn mókuài 08  
2.5.1 Gèrén zhōngxīn mókuài gōngnéng qīngdān 09  
2.5.2 Gèrén zhōngxīn mókuài gōngnéng shuōmíng 10  

dì 3 zhāng yèwù liúchéng tú 12  
3.1 Zhùcè yèmiàn liúchéng tú 12  
3.2 Dēnglù yèmiàn liúchéng tú 13  
3.3 Shāngpǐn fābù yèmiàn liúchéng tú 13  
3.4 Shǒuyè liúchéng tú 14  
3.5 Xiāoxī yèmiàn liúchéng tú 15  
3.6 Gèrén zhōngxīn yèmiàn liúchéng tú 15  

dì 4 zhāng xiàngmù kāifā zhōuqí 17  
qiánduān kāifā  

dì 5 zhāng HTML,CSS,JavaScript jīchǔ 22  
5.1 Wǎngyè de gǔjià——HTML 22  
5.1.1 HTML jiégòu 23  
5.1.2 HTML tóu bù biāoqiān 24  
5.1.3 HTML nèiróng biāoqiān 25  
5.1.4 HTML yàngshì biāoqiān 27  
5.1.5 HTML jiǎoběn biāoqiān 28  
5.2 Wǎngyè de wàiyī——CSS 29  
5.2.1 CSS lìshǐ 29  
5.2.2 CSS yàngshì 30  
5.2.3 CSS xuǎnzé qì 32  
5.2.4 CSS wěi lèi yǔ wěi yuánsù 36  
5.2.5 CSS shǐyòng fāngshì 40  
5.3 Wǎngyè de jiāohù——JavaScript 43  
5.3.1 JavaScript lìshǐ 43  
5.3.2 JavaScript yǔfǎ 45  
5.3.3 AJAX jièshào 51  
5.4 Web wǎngyè ànlì 53  
5.4.1 Ànlì shuōmíng 53  
5.4.2 Ànlì dàimǎ 53  

dì 6 zhāng qiánduān zhǔliú kuàngjià——React 60  
6.1 React gàishù 60  
6.1.1 React zhǔyào tèdiǎn 60  
6.1.2 React shēngmìng zhōuqí 61  
6.2 React kāifā huánjìng dājiàn 62  
6.2.1 Node ānzhuāng 62  
6.2.2 React xiàngmù gòujiàn 64  
6.3 React ànlì 67  
6.3.1 Ànlì dàimǎ 67  
6.3.2 React kuàngjià yǔ yuánshēng wǎngyè de qūbié 69  

dì 7 zhāng qiánduān chángyòng kāifā gōngjù/kù 71  
7.1 Dǎbāo gōngjù zhī webpack 71  
7.1.1 Webpack héxīn yuánlǐ 71  
7.1.2 Webpack héxīn gàiniàn 72  
7.1.3 Webpack cānshù pèizhì shuōmíng 72  
7.2 Yèmiàn tiào zhuǎn zhī react-router-dom 75  
7.2.1 React-router-dom lùyóu pèizhì 75  
7.2.2 React-router-dom lùyóu tiào zhuǎn fāngshì 76  
7.2.3 React-router-dom lùyóu chuán cān 76  
7.3 Qiánduān zǔjiàn kù zhī ant-design 77  
7.4 CSS yù chǔlǐ qì zhī Less 78  
7.4.1 Less tèzhēng 78  
7.4.2 Less shǐyòng huánjìng 79  
7.4.3 Less yǔfǎ 79  
7.5 Dì sānfāng mókuài ānzhuāng 81  

dì 8 zhāng qiánduān kāifā qián xūzhī 83  
8.1 Mìngmíng guīzé 83  
8.1.1 Mókuài mìngmíng guīzé 83  
8.1.2 Xuǎnzé qì mìngmíng guīzé 83  
8.2 Gōnggòng yàngshì tíqǔ 84  
8.2.1 Gōnggòng yàngshì guīzé 84  
8.2.2 Gōnggòng yàngshì wénjiàn 84  
8.3 Gōnggòng zǔjiàn fēngzhuāng 92  
8.3.1 Button zǔjiàn 93  
8.3.2 Card zǔjiàn 97  
8.3.3 Input zǔjiàn 99  
8.3.4 List zǔjiàn 101  
8.3.5 Search zǔjiàn 105  
8.3.6 Select zǔjiàn 110  
8.3.7 TabBottom zǔjiàn 115  
8.3.8 Title zǔjiàn 118  
8.3.9 Type zǔjiàn 122  
8.3.10 Address zǔjiàn 124  
8.4 Jièmiàn fēnxī 135  
8.4.1 Yèmiàn jiégòu 135  
8.4.2 Túpiàn yuánsù 135  
8.4.3 Yèmiàn sècǎi 135  
8.4.4 Yèmiàn biān jù 136  

dì 9 zhāng yònghù mókuài kāifā 137  
9.1 Zhùcè yèmiàn kāifā 137  
9.2 Dēnglù yèmiàn kāifā 144  

dì 10 zhāng shāngpǐn mókuài kāifā 148  
10.1 Fābù/xiūgǎi shāngpǐn yèmiàn kāifā 148  
10.2 Shāngpǐn lièbiǎo/shǒuyè kāifā 153  
10.3 Shāngpǐn xiángqíng yèmiàn kāifā 162  

dì 11 zhāng zhīfù mókuài kāifā 171  
11.1 Dìngdān yèmiàn kāifā 171  
11.2 Dìngdān xiángqíng yèmiàn kāifā 172  

dì 12 zhāng xiāoxī mókuài kāifā 178  
12.1 Xiāoxī lièbiǎo yèmiàn kāifā 178  
12.2 Xiāoxī xiángqíng yèmiàn kāifā 182  

dì 13 zhāng gèrén zhōngxīn mókuài kāifā 192  
13.1 Gèrén zhōngxīn yèmiàn kāifā 192  
13.2 Biānjí gèrén xìnxī yèmiàn kāifā 196  
13.3 Wǒ fābù de shāngpǐn lièbiǎo yèmiàn kāifā 200  
13.4 Wǒ fābù de shāngpǐn xìnxī biānjí yèmiàn kāifā 205  
13.5 Wǒ mài chū de shāngpǐn lièbiǎo yèmiàn kāifā 211  
13.6 Wǒ mǎi dào de shāngpǐn lièbiǎo yèmiàn kāifā 214  
13.7 Xiūgǎi mìmǎ yèmiàn kāifā 218  
13.8 Wàngjì mìmǎ yèmiàn kāifā 221  
13.9 Xiūgǎi shǒujī hào yèmiàn kāifā 225  
13.10 Wǒ de shōu huò dìzhǐ lièbiǎo yèmiàn kāifā 232  
13.11 Tiānjiā/biānjí shōu huò dìzhǐ yèmiàn kāifā 235  
13.11.1 Tiānjiā shōu huò dìzhǐ 235  
13.11.2 Biānjí shōu huò dìzhǐ 236  
13.11.3 Biānxiě dàimǎ 237  

dì 14 zhāng qiánduān huánjìng bùshǔ 243  
xiàngmù bùshǔ liúchéng 243  

dì 15 zhāng qiánduān kāifā zǒngjié 247  
15.1 Kāifā sīlù zǒngjié 247  
15.2 Xiàngmù nándiǎn zǒngjié 247  

hòu duān kāifā  
dì 16 zhāng Java jīchǔ 254  
16.1 Java zhǔyào tèdiǎn 254  
16.2 Java yǔfǎ 255  
16.2.1 Shùjù lèixíng 255  
16.2.2 Biāozhì fú 256  
16.2.3 Xiūshì fú 256  
16.2.4 Biànliàng 257  
16.2.5 Yùnsuàn fú 257  
16.2.6 Guānjiàn zì 260  
16.2.7 Zhùshì 261  
16.3 Java kāifā huánjìng 262  
16.3.1 JDK 262  
16.3.2 JRE 262  
16.3.3 JVM 262  
16.3.4 Pèizhì huánjìng biànliàng 262  

dì 17 zhāng Spring Boot kuàngjià 264  
17.1 Spring Boot gàishù 264  
17.2 Spring Boot jiějué de wèntí 265  
17.3 Spring Boot héxīn jīzhì 266  
17.4 Spring Boot yōu quēdiǎn 266  

dì 18 zhāng hòu duān gōngjù/kù 268  
18.1 Java IDE 268  
18.1.1 Chángyòng de IDE 268  
18.1.2 Shǐyòng IntelliJ IDEA chuàngjiàn Java xiàngmù 269  
18.1.3 Shǐyòng IntelliJ IDEA chuàngjiàn Spring Boot xiàngmù 273  
18.2 Navicat 275  
18.2.1 Bǎnběn 276  
18.2.2 Navicat for MySQL shǐyòng 277  
18.3 Postman 280  
18.3.1 Ānzhuāng 281  
18.3.2 Bǎnběn 281  
18.3.3 Shǐyòng 281  

dì 19 zhāng hòu duān xìtǒng shèjì 283  
19.1 Shùjùkù shèjì 283  
19.2 Xìtǒng gōngnéng mókuài shèjì 290  
19.3 Jiēkǒu shèjì 291  

dì 20 zhāng yònghù mókuài jiēkǒu 294  
20.1 Zhùcè jiēkǒu 294  
20.2 Huòqǔ yànzhèng mǎ jiēkǒu 304  
20.3 Dēnglù jiēkǒu 311  
20.4 Wàngjì mìmǎ jiēkǒu 317  
20.5 Xiūgǎi mìmǎ jiēkǒu 321  
20.6 Yònghù xìnxī xiūgǎi jiēkǒu 324  
20.7 Jiào yàn shìfǒu dēnglù jiēkǒu 328  
20.8 Tuìchū dēnglù jiēkǒu 330  

dì 21 zhāng shāngpǐn mókuài jiēkǒu 333  
21.1 Shāngpǐn lèibié lièbiǎo jiēkǒu 333  
21.2 Shāngpǐn lièbiǎo jiēkǒu 338  
21.3 Fābù shāngpǐn jiēkǒu 346  
21.4 Xiūgǎi shāngpǐn xìnxī jiēkǒu 351  
21.5 Huòqǔ shāngpǐn xiángqíng jiēkǒu 356  
21.6 Pínglùn/huífù jiēkǒu 361  
21.7 Pínglùn/huífù lièbiǎo jiēkǒu 365  
21.8 Diǎn zàn/qǔxiāo diǎn zàn jiēkǒu 368  
21.9 Diǎn zàn lièbiǎo jiēkǒu 372  
21.10 Shǒuyè lún bō shāngpǐn lièbiǎo jiēkǒu 375  

dì 22 zhāng xiāoxī mókuài jiēkǒu 382  
22.1 Liáotiān duìhuà kuāng lièbiǎo jiēkǒu 382  
22.2 Huòqǔ liáotiān xiángqíng jiēkǒu 387  
22.3 Chūshǐhuà liáotiān jiēkǒu 393  
22.4 Fāsòng xiāoxī jiēkǒu 400  

dì 23 zhāng zhīfù mókuài jiēkǒu 412  
23.1 Gòumǎi shāngpǐn jiēkǒu 412  
23.2 Huòqǔ dìngdān xiángqíng jiēkǒu 420  
23.3 Qǔxiāo dìngdān jiēkǒu 426  
23.4 Zhīfùbǎo WAP zhīfù jiēkǒu 429  
23.5 Zhīfùbǎo zhīfù jiēkǒu 436  
23.6 Zhīfùbǎo zhīfù huítiáo jiēkǒu 440  

dì 24 zhāng gèrén zhōngxīn mókuài jiēkǒu 446  
24.1 Wǒ de shāngpǐn lièbiǎo jiēkǒu 446  
24.2 Shānchú wǒ de shāngpǐn jiēkǒu 455  
24.3 Jiào yàn jiù shǒujī hào jiēkǒu 459  
24.4 Bǎng dìng xīn shǒujī hào jiēkǒu 462  
24.5 Cháxún shāngpǐn shùliàng jiēkǒu 465  
24.6 Shōu huò dìzhǐ lièbiǎo jiēkǒu 471  
24.7 Xīn zēng shōu huò dìzhǐ jiēkǒu 478  
24.8 Xiūgǎi shōu huò dìzhǐ jiēkǒu 482  
24.9 Shānchú shōu huò dìzhǐ jiēkǒu 487  

dì 25 zhāng hòu duān huánjìng bùshǔ 491  

dì 26 zhāng hòu duān kāifā zǒngjié 495  
26.1 Kāifā sīlù zǒngjié 495  
26.2 Kāi fà nándiǎn zǒngjié 495
顯示更多內容
4260/5000
目錄
項目概述
第 1章　項目需求設計　02
1.1　項目背景　02
1.2　項目介紹　02

第 2章　業務模塊介紹　03
2.1　用戶模塊　03
2.1.1　用戶模塊功能清單　04
2.1.2　用戶模塊功能說明　04
2.2　商品模塊　05
2.2.1　商品模塊功能清單　05
2.2.2　商品模塊功能說明　06
2.3　支付模塊　07
2.3.1　支付模塊功能清單　07
2.3.2　支付模塊功能說明　07
2.4　消息模塊　08
2.4.1　消息模塊功能清單　08
2.4.2　消息模塊功能說明　08
2.5　個人中心模塊　08
2.5.1　個人中心模塊功能清單　09
2.5.2　個人中心模塊功能說明　10

第3章　業務流程圖　12
3.1　註冊頁面流程圖　12
3.2　登錄頁面流程圖　13
3.3　商品發布頁面流程圖　13
3.4　首頁流程圖　14
3.5　消息頁面流程圖　15
3.6　個人中心頁面流程圖　15

第4章　項目開發週期　17
前端開發

第5章　HTML、CSS、JavaScript基礎　22
5.1　網頁的骨架——HTML　22
5.1.1　HTML 結構　23
5.1.2　HTML 頭部標籤　24
5.1.3　HTML 內容標籤　25
5.1.4　HTML 樣式標籤　27
5.1.5　HTML 腳本標籤　28
5.2　網頁的外衣——CSS　29
5.2.1　CSS 歷史　29
5.2.2　CSS 樣式　30
5.2.3　CSS 選擇器　32
5.2.4　CSS 偽類與偽元素　36
5.2.5　CSS 使用方式　40
5.3　網頁的交互——JavaScript　43
5.3.1　JavaScript 歷史　43
5.3.2　JavaScript 語法　45
5.3.3　AJAX 介紹　51
5.4　Web 網頁案例　53
5.4.1　案例說明　53
5.4.2　案例代碼　53

第6章　前端主流框架——React　60
6.1　React 概述　60
6.1.1　React 主要特點　60
6.1.2　React 生命週期　61
6.2　React 開發環境搭建　62
6.2.1　Node安裝　62
6.2.2　React 項目構建　64
6.3　React 案例　67
6.3.1　案例代碼　67
6.3.2　React框架與原生網頁的區別　69

第7章　前端常用開發工具/庫　71
7.1　打包工具之webpack　71
7.1.1　webpack核心原理　71
7.1.2　webpack 核心概念　72
7.1.3　webpack 參數配置說明　72
7.2　頁面跳轉之react-router-dom　75
7.2.1　react-router-dom 路由配置　75
7.2.2　react-router-dom 路由跳轉方式　76
7.2.3　react-router-dom路由傳參　76
7.3　前端組件庫之ant-design　77
7.4　CSS預處理器之Less　78
7.4.1　Less特徵　78
7.4.2　Less使用環境　79
7.4.3　Less語法　79
7.5　第三方模塊安裝　81

第8章　前端開發前須知　83
8.1　命名規則　83
8.1.1　模塊命名規則　83
8.1.2　選擇器命名規則　83
8.2　公共樣式提取　84
8.2.1　公共樣式規則　84
8.2.2　公共樣式文件　84
8.3　公共組件封裝　92
8.3.1　Button 組件　93
8.3.2　Card 組件　97
8.3.3　Input 組件　99
8.3.4　List 組件　101
8.3.5　Search 組件　105
8.3.6　Select 組件　110
8.3.7　TabBottom組件　115
8.3.8　Title 組件　118
8.3.9　Type 組件　122
8.3.10　Address 組件　124
8.4　界面分析　135
8.4.1　頁面結構　135
8.4.2　圖片元素　135
8.4.3　頁面色彩　135
8.4.4　頁面邊距　136

第9章　用戶模塊開發　137
9.1　註冊頁面開發　137
9.2　登錄頁面開發　144

第 10章　商品模塊開發　148
10.1　發布/修改商品頁面開發　148
10.2　商品列表/首頁開發　153
10.3　商品詳情頁面開發　162

第 11章　支付模塊開發　171
11.1　訂單頁面開發　171
11.2　訂單詳情頁面開發　172

第 12章　消息模塊開發　178
12.1　消息列表頁面開發　178
12.2　消息詳情頁面開發　182

第 13章　個人中心模塊開發　192
13.1　個人中心頁面開發　192
13.2　編輯個人信息頁面開發　196
13.3　我發布的商品列表頁面開發　200
13.4　我發布的商品信息編輯頁面開發　205
13.5　我賣出的商品列表頁面開發　211
13.6　我買到的商品列表頁面開發　214
13.7　修改密碼頁面開發　218
13.8　忘記密碼頁面開發　221
13.9　修改手機號頁面開發　225
13.10　我的收貨地址列表頁面開發　232
13.11　添加/編輯收貨地址頁面開發　235
13.11.1　添加收貨地址　235
13.11.2　編輯收貨地址　236
13.11.3　編寫代碼　237

第 14章　前端環境部署　243
項目部署流程　243

第 15章　前端開發總結　247
15.1　開發思路總結　247
15.2　項目難點總結　247

後端開發
第 16章　Java基礎　254
16.1　Java主要特點　254
16.2　Java語法　255
16.2.1　數據類型　255
16.2.2　標識符　256
16.2.3　修飾符　256
16.2.4　變量　257
16.2.5　運算符　257
16.2.6　關鍵字　260
16.2.7　註釋　261
16.3　Java 開發環境　262
16.3.1　JDK　262
16.3.2　JRE　262
16.3.3　JVM　262
16.3.4　配置環境變量　262

第 17章　Spring Boot框架　264
17.1　Spring Boot 概述　264
17.2　Spring Boot 解決的問題　265
17.3　Spring Boot 核心機制　266
17.4　Spring Boot 優缺點　266

第 18章　後端工具/庫　268
18.1　Java IDE　268
18.1.1　常用的IDE　268
18.1.2　使用IntelliJ IDEA創建Java項目　269
18.1.3　使用IntelliJ IDEA創建Spring Boot項目　273
18.2　Navicat　275
18.2.1　版本　276
18.2.2　Navicat for MySQL使用　277
18.3　Postman　280
18.3.1　安裝　281
18.3.2　版本　281
18.3.3　使用　281

第 19章　後端系統設計　283
19.1　數據庫設計　283
19.2　系統功能模塊設計　290
19.3　接口設計　291

第 20章　用戶模塊接口　294
20.1　註冊接口　294
20.2　獲取驗證碼接口　304
20.3　登錄接口　311
20.4　忘記密碼接口　317
20.5　修改密碼接口　321
20.6　用戶信息修改接口　324
20.7　校驗是否登錄接口　328
20.8　退出登錄接口　330

第 21章　商品模塊接口　333
21.1　商品類別列表接口　333
21.2　商品列表接口　338
21.3　發布商品接口　346
21.4　修改商品信息接口　351
21.5　獲取商品詳情接口　356
21.6　評論/回復接口　361
21.7　評論/回复列表接口　365
21.8　點贊/取消點贊接口　368
21.9　點贊列表接口　372
21.10　首頁輪播商品列表接口　375

第 22章　消息模塊接口　382
22.1　聊天對話框列表接口　382
22.2　獲取聊天詳情接口　387
22.3　初始化聊天接口　393
22.4　發送消息接口　400

第 23章　支付模塊接口　412
23.1　購買商品接口　412
23.2　獲取訂單詳情接口　420
23.3　取消訂單接口　426
23.4　支付寶WAP支付接口　429
23.5　支付寶支付接口　436
23.6　支付寶支付回調接口　440

第 24章　個人中心模塊接口　446
24.1　我的商品列表接口　446
24.2　刪除我的商品接口　455
24.3　校驗舊手機號接口　459
24.4　綁定新手機號接口　462
24.5　查詢商品數量接口　465
24.6　收貨地址列表接口　471
24.7　新增收貨地址接口　478
24.8　修改收貨地址接口　482
24.9　刪除收貨地址接口　487

第 25章　後端環境部署　491

第 26章　後端開發總結　495
26.1　開發思路總結　495
26.2　開發難點總結　495