一、博客系統進度回顧以及頁面設計
1.1頁面設計說明
緊接前面基礎基本完成了框架搭建,現在開始設計頁面,前台頁面設計我是模仿我博客園的風格來設計的,後台是常規的左右布局風格。
1.2前台頁面風格
主頁面:
技術博客風格:
詳情頁風格:
詳情頁留言風格:
1.3後台風格:
表格風格:
博客發布風格:
以上看到的系統頁面是目前系統完成的風格,以後頁面設計都參考這些頁面風格。
二、使用前端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組件版權全是原始開發作者所有,我這裡只是介紹,本系統用到了哪些,以後用到了還會繼續補充。