本書一共26章,整個書籍結(jié)構(gòu)圍繞著企業(yè)項目開發(fā)基本流程來設(shè)計,分為項目概述、前端開發(fā)和后端開發(fā)三個部分。 項目概述部分一共有4章。第1章是項目需求設(shè)計,主要介紹該項目的項目背景和項目內(nèi)容。第2章是業(yè)務(wù)模塊介紹,圍繞著項目內(nèi)容展開介紹項目核心業(yè)務(wù)模塊。第3章是業(yè)務(wù)流程圖。通過office 自帶的Visio工具將各大業(yè)務(wù)流程以流程圖的形式呈現(xiàn)。第4章是項目開發(fā)周期,介紹開發(fā)本項目需要花費的時間周期。 前端開發(fā)部分一共有11章,前3章是基礎(chǔ)篇,介紹前端三劍客HTML/CSS/JavaScript和前端主流開發(fā)框架React以及前端開發(fā)常用的工具庫。后8章是項目實戰(zhàn)內(nèi)容,其中包含開發(fā)前須知和開發(fā)后總結(jié)。 后端開發(fā)部分一共有11章,前3章是基礎(chǔ)篇,介紹Java基礎(chǔ)和SpringBoot框架以及后端常用的工具庫,后8章是項目實戰(zhàn)內(nèi)容,包含開發(fā)前系統(tǒng)設(shè)計和開發(fā)后總結(jié)。
1.內(nèi)容全面,拓展視野:兼顧前后端技術(shù),展現(xiàn)完整開發(fā)流程,補足技術(shù)短板;
2.注重實操,學(xué)以致用:每個知識點均有對應(yīng)的項目實戰(zhàn)講解,快速上手項目;
3.舉一反三,日益精進:利用配套案例代碼體會全棧開發(fā)精髓,全面提升能力。
本書不僅介紹了前后端開發(fā)的技術(shù),更融入了許多開發(fā)前對業(yè)務(wù)場景、技術(shù)選擇的分析過程。比如開發(fā)一個頁面,不僅會從技術(shù)層面講解如何去實現(xiàn),更會講解開發(fā)一個頁面的分析過程。這種分析的思維幾乎適用于所有的頁面的開發(fā)。
為了保證經(jīng)驗尚淺的開發(fā)新手可以舉一反三,本書中的項目案例非常靈活,其中涉及的內(nèi)容都是 Web 應(yīng)用項目中一些常見、經(jīng)典的場景。也就是說,如果讀者想以后獨自開發(fā)其他業(yè)務(wù)類型的項目,只需要在本項目的基礎(chǔ)上進行調(diào)整即可。比如本書中的項目分為五大業(yè)務(wù)模塊,分別是用戶模塊、商品模塊、支付模塊、消息模塊及個人中心模塊,放眼看去,您會發(fā)現(xiàn)大部分的應(yīng)用都會包含這幾個業(yè)務(wù)模塊。再細(xì)化到功能,比如項目中的登錄、注冊功能,也是幾乎所有項目都會涉及的功能。
另外,本書介紹的前端開發(fā)使用的是 React 框架,該框架最顯著的特點就是組件化,因此項目中有大量的組件封裝。這就意味著,您將得到的不僅是一個項目,還得得到前端應(yīng)用中許多場景的通用組件。這些通用組件,讀者可以運用到任何其他項目。雖然市面上也有很多成熟組件庫,比如螞蟻金服的 AntDesign,但是對于大部分人來說,這已然是一個“開箱即用”的成品,無法知曉其構(gòu)建過程。學(xué)習(xí)了本書之后,讀者可以自己構(gòu)建通用組件。
吳杏平,上市公司前端開發(fā)工程師,熟悉前端各大主流框架,并深入研究過各種框架底層源碼。對后端開發(fā)也興趣頗豐,可獨立完成前端界面開發(fā)和后端接口開發(fā)。 曹雪,擁有多年開發(fā)與團隊管理經(jīng)驗,現(xiàn)任平安科技資深開發(fā)工程師。
目錄
項目概述
第 1章 項目需求設(shè)計 02
1.1 項目背景 02
1.2 項目介紹 02
第 2章 業(yè)務(wù)模塊介紹 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章 業(yè)務(wù)流程圖 12
3.1 注冊頁面流程圖 12
3.2 登錄頁面流程圖 13
3.3 商品發(fā)布頁面流程圖 13
3.4 首頁流程圖 14
3.5 消息頁面流程圖 15
3.6 個人中心頁面流程圖 15
第4章 項目開發(fā)周期 17
前端開發(fā)
第5章 HTML、CSS、JavaScript基礎(chǔ) 22
5.1 網(wǎng)頁的骨架——HTML 22
5.1.1 HTML 結(jié)構(gòu) 23
5.1.2 HTML 頭部標(biāo)簽 24
5.1.3 HTML 內(nèi)容標(biāo)簽 25
5.1.4 HTML 樣式標(biāo)簽 27
5.1.5 HTML 腳本標(biāo)簽 28
5.2 網(wǎng)頁的外衣——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 網(wǎng)頁的交互——JavaScript 43
5.3.1 JavaScript 歷史 43
5.3.2 JavaScript 語法 45
5.3.3 AJAX 介紹 51
5.4 Web 網(wǎng)頁案例 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 開發(fā)環(huán)境搭建 62
6.2.1 Node安裝 62
6.2.2 React 項目構(gòu)建 64
6.3 React 案例 67
6.3.1 案例代碼 67
6.3.2 React框架與原生網(wǎng)頁的區(qū)別 69
第7章 前端常用開發(fā)工具/庫 71
7.1 打包工具之webpack 71
7.1.1 webpack核心原理 71
7.1.2 webpack 核心概念 72
7.1.3 webpack 參數(shù)配置說明 72
7.2 頁面跳轉(zhuǎn)之react-router-dom 75
7.2.1 react-router-dom 路由配置 75
7.2.2 react-router-dom 路由跳轉(zhuǎn)方式 76
7.2.3 react-router-dom路由傳參 76
7.3 前端組件庫之a(chǎn)nt-design 77
7.4 CSS預(yù)處理器之Less 78
7.4.1 Less特征 78
7.4.2 Less使用環(huán)境 79
7.4.3 Less語法 79
7.5 第三方模塊安裝 81
第8章 前端開發(fā)前須知 83
8.1 命名規(guī)則 83
8.1.1 模塊命名規(guī)則 83
8.1.2 選擇器命名規(guī)則 83
8.2 公共樣式提取 84
8.2.1 公共樣式規(guī)則 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 頁面結(jié)構(gòu) 135
8.4.2 圖片元素 135
8.4.3 頁面色彩 135
8.4.4 頁面邊距 136
第9章 用戶模塊開發(fā) 137
9.1 注冊頁面開發(fā) 137
9.2 登錄頁面開發(fā) 144
第 10章 商品模塊開發(fā) 148
10.1 發(fā)布/修改商品頁面開發(fā) 148
10.2 商品列表/首頁開發(fā) 153
10.3 商品詳情頁面開發(fā) 162
第 11章 支付模塊開發(fā) 171
11.1 訂單頁面開發(fā) 171
11.2 訂單詳情頁面開發(fā) 172
第 12章 消息模塊開發(fā) 178
12.1 消息列表頁面開發(fā) 178
12.2 消息詳情頁面開發(fā) 182
第 13章 個人中心模塊開發(fā) 192
13.1 個人中心頁面開發(fā) 192
13.2 編輯個人信息頁面開發(fā) 196
13.3 我發(fā)布的商品列表頁面開發(fā) 200
13.4 我發(fā)布的商品信息編輯頁面開發(fā) 205
13.5 我賣出的商品列表頁面開發(fā) 211
13.6 我買到的商品列表頁面開發(fā) 214
13.7 修改密碼頁面開發(fā) 218
13.8 忘記密碼頁面開發(fā) 221
13.9 修改手機號頁面開發(fā) 225
13.10 我的收貨地址列表頁面開發(fā) 232
13.11 添加/編輯收貨地址頁面開發(fā) 235
13.11.1 添加收貨地址 235
13.11.2 編輯收貨地址 236
13.11.3 編寫代碼 237
第 14章 前端環(huán)境部署 243
項目部署流程 243
第 15章 前端開發(fā)總結(jié) 247
15.1 開發(fā)思路總結(jié) 247
15.2 項目難點總結(jié) 247
后端開發(fā)
第 16章 Java基礎(chǔ) 254
16.1 Java主要特點 254
16.2 Java語法 255
16.2.1 數(shù)據(jù)類型 255
16.2.2 標(biāo)識符 256
16.2.3 修飾符 256
16.2.4 變量 257
16.2.5 運算符 257
16.2.6 關(guān)鍵字 260
16.2.7 注釋 261
16.3 Java 開發(fā)環(huán)境 262
16.3.1 JDK 262
16.3.2 JRE 262
16.3.3 JVM 262
16.3.4 配置環(huán)境變量 262
第 17章 Spring Boot框架 264
17.1 Spring Boot 概述 264
17.2 Spring Boot 解決的問題 265
17.3 Spring Boot 核心機制 266
17.4 Spring Boot 優(yōu)缺點 266
第 18章 后端工具/庫 268
18.1 Java IDE 268
18.1.1 常用的IDE 268
18.1.2 使用IntelliJ IDEA創(chuàng)建Java項目 269
18.1.3 使用IntelliJ IDEA創(chuàng)建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章 后端系統(tǒng)設(shè)計 283
19.1 數(shù)據(jù)庫設(shè)計 283
19.2 系統(tǒng)功能模塊設(shè)計 290
19.3 接口設(shè)計 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 發(fā)布商品接口 346
21.4 修改商品信息接口 351
21.5 獲取商品詳情接口 356
21.6 評論/回復(fù)接口 361
21.7 評論/回復(fù)列表接口 365
21.8 點贊/取消點贊接口 368
21.9 點贊列表接口 372
21.10 首頁輪播商品列表接口 375
第 22章 消息模塊接口 382
22.1 聊天對話框列表接口 382
22.2 獲取聊天詳情接口 387
22.3 初始化聊天接口 393
22.4 發(fā)送消息接口 400
第 23章 支付模塊接口 412
23.1 購買商品接口 412
23.2 獲取訂單詳情接口 420
23.3 取消訂單接口 426
23.4 支付寶WAP支付接口 429
23.5 支付寶支付接口 436
23.6 支付寶支付回調(diào)接口 440
第 24章 個人中心模塊接口 446
24.1 我的商品列表接口 446
24.2 刪除我的商品接口 455
24.3 校驗舊手機號接口 459
24.4 綁定新手機號接口 462
24.5 查詢商品數(shù)量接口 465
24.6 收貨地址列表接口 471
24.7 新增收貨地址接口 478
24.8 修改收貨地址接口 482
24.9 刪除收貨地址接口 487
第 25章 后端環(huán)境部署 491
第 26章 后端開發(fā)總結(jié) 495
26.1 開發(fā)思路總結(jié) 495
26.2 開發(fā)難點總結(jié) 495