內容簡介

全棧（Full Stack）是一種全新的以前端為主導的框架，框架選型聚焦在MEAN（MongoDB、Express、AngularJS、Node.js）上。選用MEAN全棧技術，可以快速地實現敏捷開發，尤其是到瞭産品的運營階段，其優勢錶現得非常明顯。本書主要介紹MEAN全棧技術，分為入門篇、基礎篇和實戰篇，入門篇對全棧進行瞭概述，基礎篇重點介紹瞭全棧的四個主要技術，即MongoDB、Express、AngularJS、Node.js，實戰篇則通過四個常用的實例來引導讀者循序漸進地掌握全棧開發的思路。本書重在講述全棧開發的思想，自始至終延續這樣的一個主題：如何通過一種框架（MEAN全棧），將前端和後颱（端）貫穿起來，讓前端工程師快速上手。

作者簡介

和淩誌，客座教授，工信部人纔交流中心認證講師；擁有十多年移動互聯網開發經驗，先後在 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

前言/序言

前 言

為何寫一本全棧的書

為什麼寫一本以全棧為主題的書呢？這還得從我的工作經曆說起。

在過去的十年，我一直從事與移動互聯網相關的工作，從早期的手機軟件開發到今天的移動應用，都離不開架構的支撐。在智能機齣現之前，手機的軟件架構群雄並起，各傢手機廠商都在打造自己軟件平颱，直到iOS、Android、Windows Phone的齣現，形成三足鼎立的時代。在經曆瞭近五年的洗禮之後，進入移動互聯網的巔峰時代。而今，iOS、Android兩大平颱平分天下。

開發一款移動互聯網産品，從錶麵上來說，似乎隻需要做一個APP，包括iOS和Android APP；其實，如果想讓上綫的産品運營起來，就沒這麼簡單瞭。通常，一個活躍度很高的産品，都是一款具有生態係統支撐的平颱，它包括。iOS APP、Android APP、微信公眾號、PC網頁、強大的後颱管理，一個都不能少。如果采用傳統的開發技術，打造這樣的一款産品，需要組建一支十幾人的開發團隊，人員一多，溝通的成本可想而知。

移動互聯網産品的一個最大特點是，一旦産品投放市場得到瞭用戶的認可，其版本迭代更新非常之頻繁。無形中，對團隊的開發效率提齣瞭更高的要求。

無論是iOS還是Android，APP原生開發模式的最大弊端是版本的迭代與升級的任務繁重。為瞭解決這個問題，纔引入瞭HTML5的技術。從開發的技術工種來看，分為APP（iOS、Android）工程師、前端工程師、後端工程師。這三個角色中，前端工程師直接麵嚮終端用戶，是産品的門麵起著一個橋梁的作用。如果後颱選用PHP、Java之類的技術，前端工程師除瞭網頁的製作之外，其他可做的非常有限，畢竟前端技術局限於HTML、CSS和JavaScript。因為角色的分工比較發散，以緻開發效率難以提升。為瞭解決開發效率和運維靈活性的問題，我們希望從前端尋求到一個突破口。

眾所周知，前端工程師身懷三大法寶：HTML、CSS和JavaScript。從編程語言講，這些前端開發語言它既偏離APP的原生開發語言（Objective-C 或 Swift）語音，又與後颱的開發語言（常用的Java）語音有著明顯的差異。雖然JavaScript帶有“Java”一詞，但JavaScript與Java之間的關係如同雷鋒與雷峰塔之間的關係，二者相去甚遠。那麼，有沒有一種框架可以讓前端開發人員“通吃”後颱呢？

一個偶然機會，我接觸到瞭全棧（Full Stack）的概念，並瞬間被它的理念所吸引。這裏說的全棧，不是傳統的LAMP（Linux、Apache、MySQL、PHP），而是一種全新的以前端為主導的框架，所謂“大前端”、“全端”，就是指的是以前端為核心的框架。最終，我把框架選型聚焦在MEAN（MongoDB、Express、AngularJS、Node.js）上。MEAN全棧技術框架所用到的每個組件（MongoDB、Express、AngularJS和Node.js），都是基於JavaScript開發語言的。原本JavaScript是為網頁設計的語言，但自從有瞭Node.js之後，JavaScript的春天來瞭，前端工程師也可以寫後颱瞭。Node.js讓前端開發像子彈一樣飛！

開發一個産品之前，我們總會糾結應該選擇怎樣的技術框架。的確，框架的選型很重要，它直接決定瞭這個産品未來的走嚮，技術的選擇需要考慮幾個主要因素，其中包括自身所掌握的技能、軟/硬件環境、生産環境的部署、産品上綫後的運維等。

選用MEAN全棧技術，可以快速地實現敏捷開發，尤其是到瞭産品的運營階段，其優勢錶現得非常明顯。我們知道，今天的任何一款移動互聯網産品，離不開微信公眾號的推廣，大多齣彩的産品，在它的微信公眾號內，所展示的是一套完整的業務邏輯，而不是幾個簡單的頁麵。這就是說，一個運營成功的産品，對前端技術的依賴非常之高，更何況APP也可以采用混閤開發模式（Native+HTML5）。

全棧工程師並不是“全能”工程師，它是通過一種全棧的框架，從繁重的技術中解脫瞭齣來。正所謂：工欲善其事，必先利其器。這裏的“器”，就是全棧框架，具體到這本書所推薦的，就是MEAN全棧框架。

盡管前端技術琳琅滿目，但全棧框架少之又少，本書以MEAN為主綫，

踐行全棧之路

用瞭MEAN全棧，它到底能帶來什麼好處呢？這裏，以我們發布的一款産品——“點時”為例。“點時”APP是一款輕量級的知識分享平颱，以語音分享為主。這樣的一款産品，從生態上講，該平颱包括：iOS APP、Android APP、微信、後颱的課程發布與運維管理。傳統的做法是項目開發組分為前端與後颱兩套人馬，因為進度不一，要麼前端等後 全棧開發之道：MongoDB+Express+AngularJS+Node.js 下載 mobi epub pdf txt 電子書

挺不好的不錯的購物體驗。

很好的一本入門書籍，每一部分雖然比較淺但是可以綜閤學習。

此用戶未填寫評價內容

很好的一本入門書籍，每一部分雖然比較淺但是可以綜閤學習。

我為什麼喜歡在京東買東西，因為今天買明天就可以送到。我為什麼每個商品的評價都一樣，因為在京東買的東西太多太多瞭，導緻積纍瞭很多未評價的訂單，所以我統一用段話作為評價內容。京東購物這麼久，有買到很好的産品，也有買到比較坑的産品，如果我用這段話來評價，說明這款産品沒問題，至少85分以上，而比較垃圾的産品，我絕對不會偷懶到復製粘貼評價，我絕對會用心的差評，這樣其他消費者在購買的時候會作為參考，會影響該商品銷量，而商傢也會因此改進商品質量。

此用戶未填寫評價內容

還沒看

我為什麼喜歡在京東買東西，因為今天買明天就可以送到。我為什麼每個商品的評價都一樣，因為在京東買的東西太多太多瞭，導緻積纍瞭很多未評價的訂單，所以我統一用段話作為評價內容。京東購物這麼久，有買到很好的産品，也有買到比較坑的産品，如果我用這段話來評價，說明這款産品沒問題，至少85分以上，而比較垃圾的産品，我絕對不會偷懶到復製粘貼評價，我絕對會用心的差評，這樣其他消費者在購買的時候會作為參考，會影響該商品銷量，而商傢也會因此改進商品質量。

還沒看 後續評價