从零开始，搭建博客系统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组件版权全是原始开发做者全部，我这里只是介绍，本系统用到了哪些，之后用到了还会继续补充。