從零開始，搭建博客系統MVC5+EF6搭建框架（4）上,先後臺頁面佈局頁面實現，介紹使用的UI框架以及JS組件

1、博客系統進度回顧以及頁面設計

1.1頁面設計說明

    緊接前面基礎基本完成了框架搭建，如今開始設計頁面，前臺頁面設計我是模仿我博客園的風格來設計的，後臺是常規的左右佈局風格。

1.2前臺頁面風格

    主頁面：

技術博客風格：

詳情頁風格：

詳情頁留言風格：

1.3後臺風格：

表格風格：

博客發佈風格：

以上看到的系統頁面是目前系統完成的風格，之後頁面設計都參考這些頁面風格。

2、使用前端web框架以及插件說明

2.1選擇前端web框架，我找了不少框架，之前學過自學過bootstrap以爲對於沒有前端web設計經驗的我來講很方便，就在極客學院自學了前端，而後找了一些相關的前端免費教程看了一下，慕課網也有部分，可是學了bootstrap感受這只是前端主題風格可是有些細節組件方面仍是欠缺，好多都要用到國外的bootstrap風格的插件，仍是有些麻煩，這裏總結幾個我本身找個webUI框架供你們參考：

2.1.1妹子UI

是國內比較優秀的ui框架可是我以爲裏面的風格不是很喜歡，主要是它的左側菜單不喜歡以及總體語法，雖然是借鑑了bootstrap的使用方法，可是命名仍是要去熟悉一下。

官網：http://amazeui.org/

2.1.2 H-UI

一開始看的時候以爲還不錯，可是發現很久沒更新了，是一個前端大牛本身弄的，號稱是最適合國內開發風格的前端UI

官網：http://www.h-ui.net/

2.1.3 uikit

感受跟bootstrap差很少的國外的，可是模板沒有bootstrap多，大概看了一下，就沒用了，也是組件問題，感受要找起來麻煩。

官網：http://www.getuikit.net/index.html

2.1.4 拼圖UI

界面仍是蠻不錯的，可是也是兩個web前端大牛弄得，羣裏問過好像會本身更新，可是感受速度仍是跟不上，畢竟人家也要工做不是全職作這個。

官網：http://www.pintuer.com/

2.1.5 淘寶SUI

這個前端框架仍是有移動版，目前移動版比PC版要更新快點，可是PC版好久沒更新了，我發過郵件給淘寶找個UI的相關人員，他們說仍是作版本更新，可是從14年到如今沒什麼消息，因此就放棄了。

官網：http://sui.taobao.org/sui/docs/index.html

2.1.5 ZUI

這個是我目前找到感受還不錯的一個，由於語法跟bootstrap幾乎同樣的，並且也是一個青島的公司開發的，組件也夠用，是在bootstrap基礎上深度定製的，風格也感受清爽，還有移動端今年剛出的，本系統也是用這個WebUI。

官網：http://zui.sexy/

2.1.6 layui

另外還要介紹一個可能會在國慶以後推出1.0版本的webUI框架layui，這個是layer的做者賢心大神，目前已經全職開發的，也是我很期待的，等正式出來就拿來用一下，賢心做品值得期待。

官網：http://www.layui.com/

2.2 前端框架選擇完了以後，就開始選擇各類插件，組件了。

2.2.1 表格：DataTables

目前用到的表格是DataTables插件，很強大的一個js組件。

官網：http://datatables.club/

2.2.2 圖表：Echarts

這是百度推出的圖表組件很漂亮的，3.0是對移動端作了大量支持。

官網：http://echarts.baidu.com/

2.2.3 時間組件：jeDate

jeDate是我找到感受國內最好看的，做者也一直在更新的一個時間js組件，很不錯，功能也很強大。

官網：http://www.jayui.com/jedate/

2.2.4 js分頁組件：laypage

這是賢心做品的分頁組件，感受還不錯，之後應該還會跟着layui一塊兒更新的。

官網：http://laypage.layui.com/

2.2.5 左側菜單組件：metisMenu

這是找個國外的一個，js左側菜單組件，風格跟ZUI很搭配。

官網：http://mm.onokumus.com/

2.2.5 富文本js組件：wangEditor

原本用UEditor或者kindeditor可是以爲這兩個也很久沒跟新了，就找到了wangEditor，做者一直都在更新維護，很不錯，也很好看。

官網：http://www.wangeditor.com/

 

   以上是就是目前系統中使用的前端頁面設計使用的UI框架以及使用到的js組件，我找這些前端ui框架以及js組件主要是看是否還有人員在維護，由於我以爲如今瀏覽器一直都在作版本更新，必定要找一個有人維護的，這樣才能讓系統在新的瀏覽器上運行，不出錯。

  其實我找這些，找了很久，我也是一個很糾結的人，到底用那個，選擇了半天。

下一篇就是介紹目前博客系統功能上的實現，以及MVC佈局頁面的使用，謝謝，你們支持，有什麼問題能夠給我留言，我會改正的。

  PS:全部的前端ui框架以及js組件版權全是原始開發做者全部，我這裏只是介紹，本系統用到了哪些，之後用到了還會繼續補充。