全棧(Full Stack)是一種全新的以前端為主導(dǎo)的框架,框架選型聚焦在MEAN(MongoDB、Express、AngularJS、Node.js)上。選用MEAN全棧技術(shù),可以快速地實(shí)現(xiàn)敏捷開發(fā),尤其是到了產(chǎn)品的運(yùn)營階段,其優(yōu)勢表現(xiàn)得非常明顯。本書主要介紹MEAN全棧技術(shù),分為入門篇、基礎(chǔ)篇和實(shí)戰(zhàn)篇,入門篇對全棧進(jìn)行了概述,基礎(chǔ)篇重點(diǎn)介紹了全棧的四個(gè)主要技術(shù),即MongoDB、Express、AngularJS、Node.js,實(shí)戰(zhàn)篇?jiǎng)t通過四個(gè)常用的實(shí)例來引導(dǎo)讀者循序漸進(jìn)地掌握全棧開發(fā)的思路。本書重在講述全棧開發(fā)的思想,自始至終延續(xù)這樣的一個(gè)主題:如何通過一種框架(MEAN全棧),將前端和后臺(tái)(端)貫穿起來,讓前端工程師快速上手。
和凌志,客座教授,工信部人才交流中心認(rèn)證講師;擁有十多年移動(dòng)互聯(lián)網(wǎng)開發(fā)經(jīng)驗(yàn),先后在 Siemens Mobile、 Flextronics 等歐美公司擔(dān)任手機(jī)軟件架構(gòu)師。2014年, 為北京高校錄制慕課“iOS企業(yè)級應(yīng)用開發(fā)技術(shù)”。近幾年,專注于全棧技術(shù)開發(fā), 代表產(chǎn)品有點(diǎn)時(shí)APP ――輕量級知識(shí)分享平臺(tái)。
目 錄
入 門 篇
第1章 Bootstrap基礎(chǔ) 2
1.1 概述 2
1.2 Bootstrap開發(fā)環(huán)境 3
1.2.1 Bootstrap的安裝 3
1.2.2 Bootstrap的加載 5
1.3 Bootstrap 常用工具 6
1.3.1 Bootstrap代碼編輯工具 6
1.3.2 Bootstrap設(shè)計(jì)工具――Layout IT 7
1.4 Bootstrap 布局 8
1.4.1 HTML標(biāo)準(zhǔn)模板 8
1.4.2 自定義CSS 10
1.4.3 響應(yīng)式布局的實(shí)現(xiàn) 12
1.4.4 禁用響應(yīng)式布局 16
1.5 小結(jié) 16
第2章 JavaScript基礎(chǔ) 17
2.1 概述 17
2.2 JavaScript 語法 17
2.2.1 變量中的聲明與賦值 18
2.2.2 如何判斷兩個(gè)字符串是否相等 19
2.2.3 創(chuàng)建JavaScript對象的三種方法 21
2.2.4 函數(shù)聲明與函數(shù)表達(dá)式 23
2.2.5 可立即調(diào)用的函數(shù)表達(dá)式 25
2.2.6 循環(huán)的實(shí)現(xiàn) 27
2.2.7 防止JavaScript自動(dòng)插入分號(hào) 28
2.2.8 嚴(yán)格模式 29
2.3 如何運(yùn)行與調(diào)試JavaScript代碼 30
2.3.1 把JavaScript代碼內(nèi)嵌到HTML頁面中 30
2.3.2 通過Node.js運(yùn)行JavaScript代碼 31
2.4 JavaScript的面向?qū)ο笤O(shè)計(jì)思想 32
2.5 JavaScript的異步編程模式 33
2.5.1 Promise對象 34
2.5.2 生成Promise實(shí)例對象 34
2.5.3 Promise原型方法 35
2.5.4 Promise的catch方法 36
2.5.5 Promise在Node.js中的應(yīng)用 37
2.6 如何在HTML中嵌入JavaScript 37
2.6.1 <script>標(biāo)簽 37
2.6.2 <script>標(biāo)簽的位置 38
2.6.3 嵌入JavaScript代碼與外部文件引用 39
2.7 JavaScript與JSON 39
2.7.1 JSON概述 39
2.7.2 什么是JSON 40
2.7.3 JSON語法規(guī)則 40
2.8 小結(jié) 42
基 礎(chǔ) 篇
第3章 Node.js入門指南 44
3.1 概述 44
3.2 Node.js生態(tài) 44
3.3 Node開發(fā)環(huán)境的搭建 45
3.4 Node.js驗(yàn)證 45
3.5 第一個(gè)Node.js工程 46
3.5.1 創(chuàng)建Node.js工程 46
3.5.2 運(yùn)行Node.js工程 47
3.6 Node.js的module應(yīng)用 50
3.7 Node.js 編碼規(guī)范 52
3.8 小結(jié) 53
第4章 Express――后端框架 54
4.1 概述 54
4.2 第一個(gè)Express工程 54
4.2.1 Express工程的創(chuàng)建 54
4.2.2 Express的路由 55
4.2.3 Express的中間件 56
4.2.4 設(shè)置靜態(tài)目錄 57
4.3 Express中的Cookie與Session 58
4.3.1 Cookie是如何工作的 58
4.3.2 Session是什么 58
4.3.3 為什么需要Session 59
4.3.4 Session應(yīng)用場景 59
4.4 Express中的網(wǎng)絡(luò)請求方法 59
4.4.1 req.params 60
4.4.2 req.query 61
4.4.3 req.body 61
4.4.4 網(wǎng)絡(luò)請求方法 61
4.5 Express中的GET與POST請求 62
4.5.1 GET請求 62
4.5.2 post請求 62
4.6 通過Express 實(shí)現(xiàn)登錄頁面 63
4.6.1 get請求驗(yàn)證 66
4.6.2 post請求驗(yàn)證 68
4.7 小結(jié) 69
第5章 Express的模板引擎 70
5.1 模板引擎概述 70
5.1.1 什么是模板引擎 70
5.1.2 模板引擎的選擇 71
5.1.3 服務(wù)器端模板引擎 71
5.2 模板引擎的種類 72
5.2.1 模板引擎Jade 72
5.2.2 模板引擎Handlebars 73
5.2.3 模板引擎EJS 73
5.3 Express中的EJS 73
5.3.1 創(chuàng)建工程Express工程 74
5.3.2 引入工程的依賴包(dependency) 74
5.3.3 啟動(dòng)應(yīng)用 76
5.3.4 EJS模板引擎的觸發(fā) 77
5.4 小結(jié) 78
第6章 AngularJS――Google前端框架 79
6.1 AngularJS概述 79
6.2 AngularJS 常用指令 81
6.2.1 AngularJS 指令概述 81
6.2.2 AngualrJS指令:ng-app 81
6.2.3 AngularJS指令:ng-init 82
6.2.4 AngularJS表達(dá)式 82
6.2.5 AngularJS指令:ng-model 83
6.2.6 ng-app與ng-model示例 83
6.2.7 ng-app與ng-model常見錯(cuò)誤分析 84
6.2.8 {{ }}的應(yīng)用 85
6.2.9 指令:ng-bind 86
6.2.10 指令:ng-click 86
6.3 AngularJS構(gòu)建單頁面應(yīng)用 86
6.3.1 單頁面應(yīng)用的優(yōu)勢 86
6.3.2 輕松構(gòu)建單頁面應(yīng)用 88
6.3.3 單頁面應(yīng)用的實(shí)現(xiàn) 89
6.4 AngularJS的加載 93
6.4.1 AngularJS的引用 93
6.4.2 加載AngularJS靜態(tài)資源庫 94
6.5 AngularJS 的注入 94
6.5.1 依賴注入 94
6.5.2 依賴注入的行內(nèi)聲明 97
6.6 AngularJS 的Module 99
6.6.1 AngularJS Module 概述 99
6.6.2 AngularJS的Module 應(yīng)用 100
6.7 AngularJS 控制器 102
6.7.1 控制器命名方法 102
6.7.2 AngularJS 控制器的創(chuàng)建 102
6.7.3 AngularJS控制器的應(yīng)用 103
6.8 AngularJS的數(shù)據(jù)綁定 105
6.9 $scope用法 106
6.10 小結(jié) 109
第7章 MongoDB――文檔數(shù)據(jù)庫 110
7.1 MongoDB概述 110
7.1.1 MongoDB簡介 110
7.1.2 MongoDB的歷史 110
7.1.3 MongoDB的優(yōu)勢 111
7.1.4 MongoDB的安裝 111
7.1.5 啟動(dòng)MongoDB 112
7.2 數(shù)據(jù)庫存儲(chǔ)機(jī)制 112
7.2.1 關(guān)系型數(shù)據(jù)庫 112
7.2.2 NoSQL數(shù)據(jù)庫 112
7.3 MongoDB數(shù)據(jù)結(jié)構(gòu) 113
7.3.1 文檔 113
7.3.2 集合 114
7.3.3 MongoDB存儲(chǔ)格式――BSON 115
7.4 Mongo Shell 116
7.4.1 Mongo Shell簡介 116
7.4.2 運(yùn)行Mongo Shell 116
7.4.3 Mongo Shell基本操作 117
7.5 MongoDB文檔操作 118
7.5.1 創(chuàng)建一個(gè)文檔 118
7.5.2 查詢所有文檔 118
7.5.3 查詢某一個(gè)文檔 119
7.5.4 文檔的更新 120
7.5.5 文檔的刪除 120
7.5.6 刪除集合 121
7.6 _id和ObjectId 121
7.7 MongoDB管理工具 121
7.7.1 MongoDB可視化工具――Robomongo 121
7.7.2 Robomongo的安裝 122
7.8 用mongoose操作MongoDB 125
7.8.1 mongoose概述 125
7.8.2 初識(shí)mongoose 125
7.8.3 mongoose的安裝 126
7.8.4 mongoose連接數(shù)據(jù)庫 126
7.8.5 Schema 127
7.8.6 Model及其操作 127
7.9 小結(jié) 132
實(shí) 戰(zhàn) 篇
第8章 應(yīng)用實(shí)例1――用戶管理 134
8.1 概述 134
8.2 實(shí)現(xiàn)的思路 135
8.3 Node.js工程結(jié)構(gòu) 135
8.3.1 創(chuàng)建一個(gè)Node服務(wù) 136
8.3.2 構(gòu)建index.html頁面 136
8.3.3 構(gòu)建AngularJS頁面 137
8.3.4 構(gòu)建controller數(shù)據(jù) 138
8.3.5 構(gòu)建路由 138
8.3.6 連接MongoDB 140
8.4 簡單的用戶管理操作 142
8.4.1 增加一條記錄 142
8.4.2 刪除一條記錄 144
8.4.3 編輯與更新一條記錄 146
8.4.4 $set與$unset的應(yīng)用 149
8.5 小結(jié) 150
第9章 應(yīng)用實(shí)例2――登錄管理 151
9.1 概述 151
9.2 安裝Express 151
9.3 創(chuàng)建Express工程 151
9.4 構(gòu)建登錄頁面 157
9.4.1 構(gòu)建登錄的靜態(tài)頁面 157
9.4.2 構(gòu)建路由 159
9.4.3 添加路由中間件 161
9.5 構(gòu)建注冊頁面 161
9.5.1 靜態(tài)頁面的創(chuàng)建 161
9.5.2 構(gòu)建注冊頁面的路由 163
9.5.3 添加路由中間件 166
9.6 小結(jié) 166
第10章 應(yīng)用實(shí)例3――記事本 167
10.1 概述 167
10.2 實(shí)現(xiàn)思路 168
10.3 構(gòu)建AngularJS應(yīng)用 168
10.3.1 控制器 169
10.3.2 模塊 171
10.3.3 模板 172
10.3.4 布局模板 172
10.3.5 路由 173
10.3.6 工廠方法 175
10.3.7 頁面跳轉(zhuǎn) 177
10.3.8 $routeProvider 180
10.3.9 過濾器 182
10.3.10 $index的應(yīng)用 184
10.3.11 控制器之間的傳值 185
10.3.12 $rootScope 185
10.3.13 使用$watch監(jiān)控?cái)?shù)據(jù)模型的變化 186
10.4 創(chuàng)建Express工程 189
10.5 創(chuàng)建MongoDB 190
10.5.1 連接MongoDB 190
10.5.2 創(chuàng)建mongoose的model 191
10.6 創(chuàng)建RESTful API 191
10.6.1 GET請求 191
10.6.2 POST請求 192
10.6.3 查找指定的對象 193
10.6.4 更新 194
10.6.5 刪除 194
10.7 構(gòu)建MEAN工程 194
10.7.1 路由 194
10.7.2 構(gòu)建動(dòng)態(tài)頁面 196
10.7.3 $http的應(yīng)用 196
10.7.4 基于$http的工廠方法 197
10.7.5 RESTful API的調(diào)用 198
10.7.6 基于$resource的工廠方法 199
10.7.7 創(chuàng)建一條記錄 199
10.7.8 查看記錄詳情 201
10.7.9 更新記錄 203
10.7.10 刪除記錄 206
10.7.11 運(yùn)行結(jié)果 207
10.8 小結(jié) 208
第11章 應(yīng)用實(shí)例4――商品管理 210
11.1 概述 210
11.2 實(shí)現(xiàn)思路 211
11.2.1 開發(fā)環(huán)境的搭建 211
11.2.2 創(chuàng)建Express工程 211
11.2.3 安裝Monk 212
11.3 數(shù)據(jù)庫管理 212
11.3.1 構(gòu)建數(shù)據(jù)庫模擬數(shù)據(jù) 213
11.3.2 通過Express創(chuàng)建訪問數(shù)據(jù)庫的API 213
11.4 重構(gòu)頁面 219
11.4.1 引入AngularJS 219
11.4.2 通過AngularJS重構(gòu)首頁 220
11.4.3 控制器的實(shí)現(xiàn) 222
11.4.4 when方法 225
11.4.5 $resource的調(diào)用 225
11.4.6 文檔對象的創(chuàng)建 226
11.4.7 $location的應(yīng)用 233
11.4.8 文檔對象的編輯 234
11.4.9 $routeParams的應(yīng)用 242
11.4.10 文檔對象的刪除 243
11.5 小結(jié) 245
參考文獻(xiàn) 247