一、前言
半年前左右折騰了一個前後端分離的架子，這幾天才想起來翻出來分享給大家。關于前後端分離這個話題大家也談了很久了，希望我這個實踐能對大家有點點幫助，示範和源碼都貼在後面。
二、技術架構
這兩年angularjs和reactjs算是比較火的項目了，而我選擇angularjs并不是因為它火，而是因它的子產品化、雙向資料綁定、注入、指令等都是非常适合架構較複雜的前端應用，而且文檔是相當的全，碰到問題基本上可以在網上都找到答案。是以前端基本思路就以angularjs為主、代碼子產品化，通過requirejs實作動态加載，ui選擇dhtmlx為主配合少量bootstrap3使用。前端項目dhtmlx_web：
開發工具 Sublime Text
前端架構angularjs
子產品加載requirejs
前端UI dhtmlx + bt3
包管理 bower
建構工具 gruntjs
服務架設 http_server.js
浏覽器支援IE8+ 實際是為了支援IE8我做
半年前左右折騰了一個前後端分離的架子，這幾天才想起來翻出來分享給大家。關于前後端分離這個話題大家也談了很久了，希望我這個實踐能對大家有點點幫助，示範和源碼都貼在後面。
這兩年angularjs和reactjs算是比較火的項目了，而我選擇angularjs并不是因為它火，而是因它的子產品化、雙向資料綁定、注入、指令等都是非常适合架構較複雜的前端應用，而且文檔是相當的全，碰到問題基本上可以在網上都找到答案。是以前端基本思路就以angularjs為主、代碼子產品化，通過requirejs實作動态加載，ui選擇dhtmlx為主配合少量bootstrap3使用。前端項目dhtmlx_web：
開發工具 Sublime Text
前端架構angularjs
子產品加載requirejs
前端UI dhtmlx + bt3
包管理 bower
建構工具 gruntjs
服務架設 http_server.js
浏覽器支援IE8+ 實際是為了支援IE8我做了很多的努力，因為angluarjs 1.3已經不再支援IE8了，而我使用的angularjs是1.3.9
引入的一些其它類庫或插件就不列出來了，太多了
服務端主要是提供restful資料服務,是以.net下毫無疑問選擇asp.net webapi來實作了。 後端項目dhtmlx_webapi:
開發工具 VS2012
資料服務 Asp.net WebApi
跨域實作 CORS
依賴注入 Autofac
日志元件 Log4net
資料庫已改為MS Access (為了友善大家可以直接運作)
1、基本說明
項目主要分了三個檔案夾assets存放引用類庫及插件，app中則是項目檔案，build中存放建構後的檔案，先讓大家看幾個實作的頁面，再介紹代碼吧
這是查詢頁面，查詢條件、分頁、排序都可用
這是虛拟分頁的實作，也實作了過濾行，我自己也是挺喜歡這種風格的。
編輯頁面
2、程式入口
以上的幾個頁面都比較典型，如果大家右鍵檢視源碼的話隻能看到：
那我們就從這裡開始講起，實際上我設計的這個前端也可以看做是單頁面應用SPA，隻有一個頁面也就是index.html點左邊菜單欄打開的新tab實際隻是加載了一個ng的controller渲染出來的一個層而已，當然為了實用也支援輸入一個頁面位址。
當然這個頁面是build之後的結果，build之前的index.src.html不忍直視，主要是因為不想引入所有的dhtmlx類庫，隻是選擇性引入很多檔案沒有用一個dhtml.js替代
不過從過裡可以看出，我們的入口檔案是main.js
在main.js中，我們配置requriejs并且啟動主程式，啟動時載入了
app、config、angular-resource、service/index、directive/index、controller/index這六個子產品，那我們就看app子產品，其它不再分析了，大家自己去看代碼吧
這裡加載的app位于app/js/下的app.js檔案
3、與背景restful api互動
資料服務我準備都放在service檔案夾下，比如菜單的資料服務在service/index，目前是靜态資料。不過項目所有的ajax通路都是由ngResource實作的，實際對$http的封裝，$resource可以友善的與resultful接口接合，我們可以大大簡化操作，我是比較推薦它，一個簡單示例：
4、頁面元件化
頁面元件化思路基本就是依賴ng的指令，首頁面上的各部分基本都是通過指令directive/index去渲染的，包括myHeader、myFooter、myLayout、mySetting、myChat五個指令分别實作各部分。一些通用的控件比如dhtmlxgrid、dhtmlxtoolbar我都寫成了指令的方式，覺得以後常用的控件都可以用這種方式實作，友善而且還可以提高代碼重用性。
5、前端檔案分類（檔案夾介紹）
再來說說js檔案的分類，實際上是根據angularjs的特點，把所有的js分為以下幾個檔案夾，都是angular的概念我可能沒法一下子跟大家解釋清楚，請大家自己去了解。
app/js
│
├─config 配置
├─constant 常量
├─controller 控制器
├─decorator 修飾器
├─directive 指令
├─factory 工廠
├─filter 過濾器
├─provider 提供商
├─route 路由
├─service 服務
└─value 值
其中config、constant、value都是固定值，其中config屬于自定義的
controller控制器、directive指令、route路由、filter過濾器大家都很熟悉我就不說了，
factory工廠、provider提供商、service服務這三者很像的，反正你都可以把它們看作是provider，至于差別看看下面源碼自己體會(angularjs1.4.0源碼第4027行)
至于修飾器decorator就是對現有的provider進行加工修飾的
6、前端權限控制
為什麼我沒有選擇使用route + ngView來建構呢，網上有關angularjs的SPA基本上都是這個方案的，像我這樣打開多個TAB頁簽層的幾乎沒有。主要是因為我自己一直在做企業應用，同時打開多個頁面的tab頁簽方式會比隻能打開一個頁面的ng-view友善很多，是以選擇自己去實作tab頁的方式。但是這麼一來權限控制就不能放在路由當中了，需要自己在處理tab頁簽時控制。
前端權限控制的思路是這樣的：打開首頁面時即加載身份認證資料、菜單資料及相關的其它權限資料，在打開tab頁簽處理時進行權限驗證。
資料通路的權限控制可以這樣做，登陸時計算得到一個Ticket，每次通路資料時在request header中添加這個Ticket，然後在服務端每次請求時對Ticket進行驗證，前端可以在app.js中配置到$httpProvider.defaults.headers.post當中，服務端具體怎麼處理介紹到服務端再說。
7、關于UI類庫的說明
接下來說下UI的東西，适合自己的UI都會有需要改的如easyui我也改了很多，同樣dhtmlx這款UI也有很多不合适或有問題的地方，比如不支援字型圖示，比如grid更好的資料加載機制等等，我對它的修改集中放在dhtml.custom.js中，把它改到我能用或更好用，花費了我大量的時間，因為需要讀懂它的源碼後才能修改，具體修改大家可以檢視這個檔案。
還有大家可能會好奇我為什麼在項目中還有引入
其實就是隻使用dhtmlx開發出來的頁面是很單調的，這些類庫我在元件中都有用到，比如myheader中的這些，還有表單控件dhtmlx的form太醜了，是以引入bt3
8、關于nodejs的工具使用
這不是我們的重點，你隻要知道npm install指令下載下傳node_modules，然後就是運作grunt及httpjs，關于它們的詳細介紹及如何配置gruntfile大家自己去了解，最後代碼修改完成之後，記得運作grunt重新建構。
四、服務端介紹
服務端大家都很熟悉，沒什麼說的。
關于服務端為什麼沒分層，這裡僅僅是一個資料服務而已，沒必要太複雜是以我就沒分層了。如果業務比較複雜是可以把控制層Controller、服務層Sevice分開的，同時也衍生出接口層 Interface及資料實體層Entity，關于服務層是不是需要再分或是不同業務要不要分開就要看具體情況了，看過一段時間的DDD，感覺是從技術上把簡單的問題複雜化了，覺得實際做項目是沒必要，可能是我的了解不夠深，我的理念還是能滿足需求的情況下能簡則簡。
1、配置
在Global.asax.cs中添加FrameworkConfig.Register()，在FrameworkConfig.cs中
2、示例
然後看一個租戶資料示例，這個位址/api/tenant，請求進來之後控制器接收處理TenantController.cs
服務中處理TenantService.cs
3、權限認證
在前端權限控制中我們說了，$http請求時request header中添加了身份認證的Ticket，我們要在每一次請求傳回資料前都要驗證這個Ticket，當然不能寫在每個方法當中了，可以在過濾器中實作：
五、源碼下載下傳
示範位址：http://zoewin.eicp.net:8081/ （前端頁面架設在8081，資料服務架設在8082）不穩定有時不能通路
前端項目 dhtmlx_web: https://github.com/liuhuisheng/dhtmlx_web
後端項目 dhtmlx_webapi: https://github.com/liuhuisheng/dhtmlx_webapi
大家下載下傳代碼後直接打開index.html是無效的因為其中有很多的ajax請求必須架設在web服務上。 如果沒有nodejs的環境，也可以用VS打開運作或架設到IIS上。
如果大家有nodejs的環境，可以運作目錄下的http.bat實作上是調用nodejs的http簡易服務程式，注意端口我寫死了是8080，自己去修改。
單獨運作前端項目也能打開頁面，但是沒有動态資料，大家可以先運作服務端程式，運作起來後比如端口為8082，那麼其資料服務位址為：http://localhost:8082/api/
隻要把這個服務端位址複制到前端項目的配置js/config/global.js中再運作前端項目就可以看到資料了。
這個架子折騰了一陣子可能還有一些不完整的地方，共享出來權當給大家一個參考，如果大家有什麼意見或建議可以給我留言。
如果大家感興趣就在右下角幫我【推薦】一下吧，謝謝大家。