說明
其實最開始寫的,就是這個ABP框架實踐基礎篇。在寫這篇博客之前,又回頭復習了一下ABP框架的理論,如果你還沒學習,請查看ABP框架理論研究總結(典藏版),完成了理論基礎的教程,再次回頭來完成這個實踐基礎的教程。這也算是理論實踐相結合了吧!但是,不管理論基礎也好,還是實踐基礎也罷,畢竟都是基礎教程,所以,很大程度上是帶領新手快速熟悉這個框架或者很多基本的用法。想要徹底地掌握這款框架,請期待我后面的ABP理論高級篇和 ABP框架實戰高級篇。
由於目前我開發的是MPA(多頁面應用),所以這篇大概介紹一下我的多頁面應用開發用到的一些前端技術以及頁面展示,具體細節這篇不說,留到以后《ABP框架實踐————高級篇》來說,歡迎大家關注。
整個管理后台用的是Metronic框架,又用到了大量的插件,如果前端知識掌握得不牢靠,那么對於一個偏后端的程序員來說,絕對是一個挑戰,可能會讓你焦頭爛額,因為功能豐富的系統用到的插件實在是太多了。如果不熟悉這些插件的用法或者插件之間的依賴,那么可能花費一天也找不到一個小問題所在。正如當初初學編程時,費了半天時間才找到因為一個分號才導致的錯誤,這些成長過程都是很相似的。
登錄界面
下面就是我的登錄頁面了,Metronic有很多的布局頁和登錄頁可供選擇,我根據自己的直覺選擇了下面這個。
用的技術:Html,Css,Bootstrap,jQuery,jQuery.validate(用於輸入的校驗),Json2(可能會用來將表單數據轉成json字符串),jQuery BlockUI(用於阻止UI線程),jQuery Cookie,jQuery.Form,jQuery Uniform,Modernizr,Toastr,SpinJS,SweetAlert等等 【簡單的技術(比如html,css)這里只提一次,下面不會再提,默認您已經掌握】
應用功能
應用功能一般放一些跟業務相關的功能。下面的截圖是設備管理和訂單管理。
用到的主要技術有:DataTables,分頁,省市聯動,Bootstrap Modal模態窗,日歷插件DatePicker
設備管理
訂單管理
訂單管理用到的技術基本同上。
收款記錄
主要用到的技術:bootstrapTable及其插件。
系統功能
系統功能只放跟系統相關的功能。
下面的三項功能都主要以jTable插件為主(ABP的作者kalkan寫的一款開源插件)。
審計日志
用到的主要技術:jTable,Moment.js
用戶管理
用到的主要技術:jTable,jsTree
角色管理
用到的主要技術:jTable,jsTree
小結
因為前端開發知識面涉及得太廣,主要是大量插件的使用,所以這里也不可能全部詳細地寫出來,再者,每個人都有自己喜歡或者熟悉的插件,我也不可能將自己喜歡的強制讓別人喜歡。前端嘛,就是面子,就是為了好看和用戶體驗更好,只要你喜歡,你使用什么技術都沒有強制要求!