0：開篇廢話

好久沒來記錄點東西了，以前記錄的都是一些解決小問題的程式碼片段，只能算是當記事本來用的吧。
換了工作，好像沒那麼多程式碼要寫了，那就自己找點事做，於是重新翻出了nodejs，以前是在主程的搭建環境下，寫一些介面給我的iOS前端，當時就覺得nodejs功能強大，簡潔明瞭，實在是輕量伺服器首選，沒錯，給app做伺服器實在太合適，一個iOS／android攻城獅輕鬆搭起自己的伺服器。
今天主要任務是完成前端post請求，伺服器得到前端傳值，處理後返回json給前端，前端輸出在頁面上。我是做app的，今天例子以web前端為例，一步一步手把手教你搭建好自己的伺服器。
今天的內容記錄一下nodejs的環境，安裝，以及最簡單的程式碼例項。已經進入工程目錄的同學，直接進入第六部分就可以了，翠花，上乾貨。

一：nodejs簡介

網路上介紹很多，百度一下就好，這裡取一點重要的內容，面試必備：

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js是單執行緒的，它通過事件輪詢（event loop）來實現多工並行操作，對此，我們應該要充分利用這一點 —— 儘可能的避免阻塞操作，取而代之，多使用非阻塞操作。

二：node開發環境

1. Mac電腦：系統版本10.11.1
2. node版本：node-v5.2.0
3. 開發工具：webstorm 10.0.4
4. 瀏覽器：Chrome 42.0.2311.152 (64-bit)
5. jquery版本：jQuery 1.11.3（官網下載，未壓縮開發版）
6. javaforosx，可能需要。

三：nodejs安裝

進入官網下載，這個不收費，所以不要在亂七八糟的網站下什麼綠色版了

俗話說，買新不買舊。哈哈，不要保守了，你們懂的，果斷下最新版。

應該沒什麼區別，我這裡就不下載了，還是用5.2.0吧，聽著好聽520嘛，明白就好。下載好一路同意確定就可以。
OK，安裝好了！（什麼，這就搞定了？這麼簡單？這麼簡單還寫什麼教程啊！）啊哈哈！

四：webstorm的安裝

百度搜索webstorm Mac下載，如果下載的是沒有破解碼生成工具的，需要自己解決啦。
提供個下載地址，我的網盤：

五：nodejs工程的建立

開啟WebStorm－》Create New Project－》

Location：自己選擇工程要建立的目錄，最後的untitled1就是你的工程名字了。
Node interpreter 和 Npm executable是node的環境，不需要更改。
點選Create進入讀圖頁面

選擇nodejs原始碼地址，就是二－》3裡面下載的原始碼了，如果有基礎工程模版，那就省事了～～最好不要點第一項“從網路下載“很慢很坑爹

Configure！GO！

OK！專案建立完畢！
到這裡，我們的伺服器就可以執行啦，點選上方的開始執行，一個監聽3000埠的伺服器就開啟了，開啟瀏覽器，輸入http://localhost:3000 。伺服器的輸出就看到啦，輸入http://localhost:3000/users 得到另一個介面的輸出。
知其然不知其所以然？接著往下看。

六：工程介紹

• bin－》www：server的建立，名字，監聽埠號，錯誤處理
• node_modules：存放各種基礎模組檔案，比如我們的express，類似與iOS中的各種庫。
• public：靜態檔案目錄。放置託管的靜態檔案，例如圖片、CSS、JavaScript 檔案等，通過http://localhost:3000/images/kitten.jpg 方式就可以直接訪問。
• routes：MVC中的Controller目錄
  index.js－》exports方法：可以將介面暴露給外部呼叫
  index.js－》res.render方法：將資料通過引擎模版（這裡是jade）做展示，用不到
  users.js－》res.send方法：將資料直接返回給請求方。由於我們是要做app的伺服器，只要返回json就可以了，所以選擇此方法。
• views：MVC中的View目錄，存放檢視模版（這裡是jade），整個用不到。
• app.js：工程主程序檔案。

app.js詳細說明，有些不對的，還望指正！3Q！

1. 1到6行：引入各種模組，相當於iOS中引入各種庫檔案。
   
   • path：處理和轉換檔案路徑的工具集
   • favicon：圖示
   • logger：日誌模組
2. 8，9行： 引入Controller檔案
3. 11行：建立express應用
4. 13到23行：伺服器基本設定，如設定favicon圖片，dev環境，靜態檔案目錄
5. 25，26行：分配請求介面到Controller中的具體方法
6. 28到33行：處理404
7. 35到57行：錯誤處理，分為dev和pro兩種設定

七：程式碼例項

分兩個部分來說吧：

1. 目錄結構改造：
   由於MVC思想的深入，所以打算把這裡也改造成MVC的目錄結構
   
   • bin：老樣子server設定
   • controller：控制器，C層
   • model：M層，完成和資料庫的互動。暫時用不到。
   • node_modules:老樣子模組目錄
   • public：靜態目錄。如果是做web前端的同學，可以把這裡做V層，完全當做web前端開發就可以了。如果是做app的同學，這裡就當作資源目錄，存放app訪問和上傳用的圖片，視訊，音訊，因為V層是我們的app。
   -
2. 程式碼解析：
   app.js中這裡充當路由分配，引入C模組呼叫介面：

//引入控制器檔案
var routes = require('./controller/index');
var users = require('./controller/users');
//路由介面
app.use('/', routes);
app.use('/users', users);

html程式碼，記得引用jquery

前端JS程式碼，post請求，傳值。回撥中將結果顯示在頁面上

伺服器index.js程式碼，接收req，將數字相加，傳送json給前端

瀏覽器訪問效果圖如下

控制檯：

總結：

javascript簡單好學，而又功能強大。nodejs作為一個輕量級伺服器，搭建輕鬆，可以滿足輕量級app的所有需求，實在是前端攻城獅喜聞樂見的東西。後面準備再把mysql搭建起來，從前端到伺服器，再到資料庫，作為一個前端工程師，全都熟悉一遍，對整個眼界的提升是不一樣的。深入學習之後，進可以去創業型公司做技術主管，退可以自己搗鼓創意而不受技術上的制約。簡直棒棒噠！

錯誤彙總：

1：由於各種軟體都不是在appStore上下載，所以安裝時候可能會遇到警告
比如使用WebStorem的key製作工具時遇到這個情況：

解決方法：開啟系統偏好設定－》安全性與隱私－》“仍要開啟“。再不行，就先開了鎖

2：使用WebStorm建立新工程時，會要你提供模版，千萬不要使用第一個，自動從網路下載，等幾分鐘就錯誤，各種錯誤。最好去nodejs中文網直接下載給它。

3：indexJS.js中， 一定要寫成http://localhost:3000/，不然Chrome會報錯，說不支援跨域post請求。其實這也是個好習慣，別嫌麻煩。

4：favicon.ico圖片要放在public下，記得開啟app.js的17行把名字和相對地址寫對