全棧開發之道：MongoDB+Express+AngularJS+Node.js 全栈开发之道：MongoDB+Express+AngularJS+Node.js

和凌志

客座教授，工信部人才交流中心認證講師

擁有十多年移動互聯網開發經驗，先後在Siemens Mobile、 Flextronics 等歐美公司擔任手機軟件架構師。2014年， 為北京高校錄製慕課“iOS企業級應用開發技術”。近幾年，專注於全棧技術開發， 代表產品有點時APP ——輕量級知識分享平台。

入門篇

 

第1章Bootstrap基礎2 

1.1概述2 

1.2 Bootstrap開發環境3 

1.2.1 Bootstrap的安裝3 

1.2.2 Bootstrap的加載5 

1.3 Bootstrap常用工具6 

1.3.1 Bootstrap代碼編輯工具6 

1.3.2 Bootstrap設計工具——Layout IT 7 

1.4 Bootstrap佈局8 

1.4.1 HTML標準模板8 

1.4.2自定義CSS 10 

1.4.3響應式佈局的實現12 

1.4.4禁用響應式佈局16 

1.5小結16 

 

第2章JavaScript基礎17 

2.1概述17 

2.2 JavaScript語法17 

2.2.1變量中的聲明與賦值18 

2.2.2如何判斷兩個字符串是否相等19 

2.2.3創建JavaScript對象的三種方法21 

2.2.4函數聲明與函數表達式23 

2.2 .5可立即調用的函數表達式25 

2.2.6循環的實現27 

2.2.7防止JavaScript自動插入分號28 

2.2.8嚴格模式29 

2.3如何運行與調試JavaScript代碼30

2.3.1把JavaScript代碼內嵌到HTML頁面中30 

2.3.2通過Node.js運行JavaScript代碼31 

2.4 JavaScript的面向對象設計思想32 

2.5 JavaScript的異步編程模式33 

2.5.1 Promise對象34 

2.5.2生成Promise實例對象34 

2.5.3 Promise原型方法35 

2.5.4 Promise的catch方法36 

2.5.5 Promise在Node.js中的應用37 

2.6如何在HTML中嵌入JavaScript 37 

2.6.1 ＜script＞標籤37 

2.6.2 ＜ script＞標籤的位置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語法規則40 

2.8小結42 

 

基礎篇

 

第3章Node.js入門指南44 

3.1概述44 

3.2 Node.js生態44 

3.3 Node開發環境的搭建45 

3.4 Node.js驗證45 

3.5第一個Node.js工程46

3.5.1創建Node.js工程46 

3.5.2運行Node.js工程47 

3.6 Node.js的module應用50 

3.7 Node.js編碼規範52 

3.8小結53 

 

第4章Express——後端框架54 

4.1概述54 

4.2第一個Express工程54 

4.2.1 Express工程的創建54 

4.2.2 Express的路由55 

4.2.3 Express的中間件56 

4.2.4設置靜態目錄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應用場景59 

4.4 Express中的網絡請求方法59 

4.4.1 req.params 60 

4.4.2 req.query 61 

4.4.3 req .body 61 

4.4.4網絡請求方法61 

4.5 Express中的GET與POST請求62 

4.5.1 GET請求62 

4.5.2 post請求62 

4.6通過Express實現登錄頁面63

4.6.1 get請求驗證66 

4.6.2 post請求驗證68 

4.7小結69

 

第5章Express的模板引擎70 

5.1模板引擎概述70 

5.1.1什麼是模板引擎70 

5.1.2模板引擎的選擇71 

5.1.3服務器端模板引擎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創建工程Express工程74 

5.3.2引入工程的依賴包（dependency） 74 

5.3.3啟動應用76 

5.3.4 EJS模板引擎的觸發77 

5.4小結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表達式82 

6.2.5 AngularJS指令：ng-model 83

6.2.6 ng-app與ng-model示例83 

6.2.7 ng-app與ng-model常見錯誤分析84 

6.2.8 {{ }}的應用85 

6.2.9指令：ng-bind 86 

6.2.10指令： ng-click 86 

6.3 AngularJS構建單頁面應用86 

6.3.1單頁面應用的優勢86 

6.3.2輕鬆構建單頁面應用88 

6.3.3單頁面應用的實現89 

6.4 AngularJS的加載93 

6.4.1 AngularJS的引用93 

6.4.2加載AngularJS靜態資源庫94 

6.5 AngularJS的注入94 

6.5.1依賴注入94 

6.5.2依賴注入的行內聲明97 

6.6 AngularJS的Module 99 

6.6.1 AngularJS Module概述99 

6.6.2 AngularJS的Module應用100 

6.7 AngularJS控制器102 

6.7.1控制器命名方法102 

6.7.2 AngularJS控制器的創建102 

6.7.3 AngularJS控制器的應用103 

6.8 AngularJS的數據綁定105 

6.9 $scope用法106 

6.10小結109

 

第7章MongoDB——文檔數據庫110 

7.1 MongoDB概述110 

7.1.1 MongoDB簡介110 

7.1.2 MongoDB的歷史110 

7.1.3 MongoDB的優勢111 

7.1.4 MongoDB的安裝111 

7.1.5啟動MongoDB 112 

7.2數據庫存儲機制112 

7.2.1關係型數據庫112 

7.2.2 NoSQL數據庫112 

7.3 MongoDB數據結構113 

7.3.1文檔113 

7.3.2集合114 

7.3.3 MongoDB存儲格式——BSON 115 

7.4 Mongo Shell 116 

7.4.1 Mongo Shell簡介116 

7.4.2運行Mongo Shell 116 

7.4.3 Mongo Shell基本操作117 

7.5 MongoDB文檔操作118 

7.5.1創建一個文檔118 

7.5.2查詢所有文檔118 

7.5.3查詢某一個文檔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初識mongoose 125 

7.8.3 mongoose的安裝126 

7.8.4 mongoose連接數據庫126 

7.8.5 Schema 127 

7.8.6 Model及其操作127 

7.9小結132 

 

實戰篇

 

第8章應用實例1——用戶管理134 

8.1概述134 

8.2實現的思路135 

8.3 Node.js工程結構135 

8.3.1創建一個Node服務136 

8.3.2構建index.html頁面136 

8.3.3構建AngularJS頁面137 

8.3.4構建controller數據138 

8.3.5構建路由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的應用149 

8.5小結150

 

第9章應用實例2——登錄管理151 

9.1概述151 

9.2安裝Express 151 

9.3創建Express工程151 

9.4構建登錄頁面157 

9.4.1構建登錄的靜態頁面157 

9.4.2構建路由159 

9.4.3添加路由中間件161 

9.5構建註冊頁面161 

9.5.1靜態頁面的創建161 

9.5.2構建註冊頁面的路由163 

9.5.3添加路由中間件166 

9.6小結166 

 

第10章應用實例3——記事本167 

10.1概述167 

10.2實現思路168 

10.3構建AngularJS應用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頁面跳轉177 

10.3.8 $routeProvider 180 

10.3.9過濾器182 

10.3.10 $index的應用184 

10.3.11控制器之間的傳值185 

10.3.12 $rootScope 185

10.3.13使用$watch監控數據模型的變化186 

10.4創建Express工程189 

10.5創建MongoDB 190 

10.5.1連接MongoDB 190 

10.5.2創建mongoose的model 191 

10.6創建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構建MEAN工程194 

10.7.1路由194 

10.7.2構建動態頁面196 

10.7.3 $http的應用196 

10.7.4基於$ http的工廠方法197 

10.7.5 RESTful API的調用198 

10.7.6基於$resource的工廠方法199 

10.7.7創建一條記錄199 

10.7.8查看記錄詳情201 

10.7.9更新記錄203 

10.7.10刪除記錄206 

10.7 .11運行結果207 

10.8小結208 

 

第11章應用實例4——商品管理210 

11.1概述210 

11.2實現思路211

11.2.1開發環境的搭建211 

11.2.2創建Express工程211 

11.2.3安裝Monk 212 

11.3數據庫管理212 

11.3.1構建數據庫模擬數據213 

11.3.2通過Express創建訪問數據庫的API 213 

11.4重構頁面219 

11.4 .1引入AngularJS 219 

11.4.2通過AngularJS重構首頁220 

11.4.3控制器的實現222 

11.4.4 when方法225 

11.4.5 $resource的調用225 

11.4.6文檔對象的創建226 

11.4.7 $location的應用233 

11.4.8文檔對象的編輯234 

11.4.9 $routeParams的應用242 

11.4.10文檔對象的刪除243 

11.5小結245 

參考文獻247