一、博客系統進度回顧以及頁面設計
1.1頁面設計說明
緊接前面基礎基本完成了框架搭建，現在開始設計頁面，前臺頁面設計我是模仿我博客園的風格來設計的，后臺是常規的左右布局風格。
1.2前臺頁面風格
主頁面：
技術博客風格：
詳情頁風格：
詳情頁留言風格：
1.3后臺風格：
表格風格：
博客發布風格：
以上看到的系統頁面是目前系統完成的風格，以后頁面設計都參考這些頁面風格。
二、使用前端web框架以及插件說明
2.1選擇前端web框架，我找了很多框架，以前學過自學過bootstrap覺得對于沒有前端web設計經驗的我來說很方便，就在極客學院自學了前端，然后找了一些相關的前端免費教程看了一下，慕課網也有部分，但是學了bootstrap感覺這只是前端主題風格但是有些細節組件方面還是欠缺，好多都要用到國外的bootstrap風格的插件，還是有些麻煩，這里總結幾個我自己找個webUI框架供大家參考：
2.1.1妹子UI
是國內比較優秀的ui框架但是我覺得里面的風格不是很喜歡，主要是它的左側菜單不喜歡以及整體語法，雖然是借鑒了bootstrap的使用方法，但是命名還是要去熟悉一下。
2.1.2 H-UI
一開始看的時候覺得還不錯，但是發現好久沒更新了，是一個前端大牛自己弄的，號稱是最適合國內開發風格的前端UI
2.1.3 uikit
感覺跟bootstrap差不多的國外的，但是模板沒有bootstrap多，大概看了一下，就沒用了，也是組件問題，感覺要找起來麻煩。
官網：http://www.getuikit.net/index.html
2.1.4 拼圖UI
界面還是蠻不錯的，但是也是兩個web前端大牛弄得，群里問過好像會自己更新，但是感覺速度還是跟不上，畢竟人家也要工作不是全職做這個。
2.1.5 淘寶SUI
這個前端框架還是有移動版，目前移動版比PC版要更新快點，但是PC版很久沒更新了，我發過郵件給淘寶找個UI的相關人員，他們說還是做版本更新，但是從14年到現在沒什么消息，所以就放棄了。
官網：http://sui.taobao.org/sui/docs/index.html
2.1.5 ZUI
這個是我目前找到感覺還不錯的一個，因為語法跟bootstrap幾乎一樣的，而且也是一個青島的公司開發的，組件也夠用，是在bootstrap基礎上深度定制的，風格也感覺清爽，還有移動端今年剛出的，本系統也是用這個WebUI。
2.1.6 layui
另外還要介紹一個可能會在國慶之后推出1.0版本的webUI框架layui，這個是layer的作者賢心大神，目前已經全職開發的，也是我很期待的，等正式出來就拿來用一下，賢心作品值得期待。
2.2 前端框架選擇完了之后，就開始選擇各種插件，組件了。
2.2.1 表格：DataTables
目前用到的表格是DataTables插件，很強大的一個js組件。
2.2.2 圖表：Echarts
這是百度推出的圖表組件很漂亮的，3.0是對移動端做了大量支持。
2.2.3 時間組件：jeDate
jeDate是我找到感覺國內最好看的，作者也一直在更新的一個時間js組件，很不錯，功能也很強大。
官網：http://www.jayui.com/jedate/
2.2.4 js分頁組件：laypage
這是賢心作品的分頁組件，感覺還不錯，以后應該還會跟著layui一起更新的。
2.2.5 左側菜單組件：metisMenu
這是找個國外的一個，js左側菜單組件，風格跟ZUI很搭配。
2.2.5 富文本js組件：wangEditor
本來用UEditor或者kindeditor但是覺得這兩個也好久沒跟新了，就找到了wangEditor，作者一直都在更新維護，很不錯，也很好看。
以上是就是目前系統中使用的前端頁面設計使用的UI框架以及使用到的js組件，我找這些前端ui框架以及js組件主要是看是否還有人員在維護，因為我覺得現在瀏覽器一直都在做版本更新，一定要找一個有人維護的，這樣才能讓系統在新的瀏覽器上運行，不出錯。
其實我找這些，找了好久，我也是一個很糾結的人，到底用那個，選擇了半天。
下一篇就是介紹目前博客系統功能上的實現，以及MVC布局頁面的使用，謝謝，大家支持，有什么問題可以給我留言，我會改正的。
PS:所有的前端ui框架以及js組件版權全是原始開發作者所有，我這里只是介紹，本系統用到了哪些，以后用到了還會繼續補充。
文章列表
留言列表
