从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

一、博客系统进度回顾以及页面设计

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组件版权全是原始开发作者所有,我这里只是介绍,本系统用到了哪些,以后用到了还会继续补充。

时间: 2024-10-07 21:09:46

从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件的相关文章

从零开始,搭建博客系统MVC5+EF6搭建框架(1),EF Code frist、实现泛型数据仓储以及业务逻辑

前言      从上篇30岁找份程序员的工作(伪程序员的独白),文章开始,我说过我要用我自学的技术,来搭建一个博客系统,也希望大家给点意见,另外我很感谢博客园的各位朋友们,对我那篇算是自我阶段总结文章的评论,在里面能看出有很多种声音,有支持的我的朋友给我加油打气,有分享自己工作经历的朋友,有提出忠肯意见的朋友,有对记事本写代码吐槽的朋友,也有希望让我换个行业的,觉得我可能不适合这个行业朋友,不管怎样,我都接受,都是大家同行的一些忠告,谢谢大家. 首先我要在这里感谢很多博客园里面的大牛,写了很多系

从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

从零开始,搭建博客系统MVC5+EF6搭建框架(3),添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController

一.回顾系统进度以及本章概要 目前博客系统已经数据库创建.以及依赖注入Autofac集成,接下来就是日志和缓存集成,这里日志用的是Nlog,其实还有其他的日志框架如log4,这些博客园都有很多介绍,这里就不说了,缓存机制用的是微软自带的MemoryCache和比较流行Redis,这里我也只是了解使用,没有做更升入的研究,以后好好学一下Redis,然后就是实现一个BaseController父类用来重写JsonResult方法为的是返回时间格式问题,默认json返回的时间格式是Date(84923

从零开始,搭建博客系统MVC5+EF6搭建框架(2),测试添加数据、集成Autofac依赖注入

一.测试仓储层.业务层是否能实现对数据库表的操作 1.创建IsysUserInfoRepository接口来继承IBaseRepository父接口 1 namespace Wchl.WMBlog.IRepository 2 { 3 public partial interface IsysUserInfoRepository : IBaseRepository<sysUserInfo> 4 { 5 6 } 7 } 2.创建sysUserInfoRepository类继承BaseReposit

使用ASP.NET MVC+Entity Framework快速搭建博客系统

学习 ASP.NET MVC 也有一段时间了,打算弄个小程序练练手,做为学习过程中的记录和分享. 首先,得确定需求,木有需求的话,那还搞个毛线呀!嗯--大致思考了一下,终于得出如下需求: 1.能自定义分类 2.能发文章 OK!就这样,先从简单的开始(其实是复杂的不会做),后面有需要再添加(希望水平能达到).功能确定了,那么改确定要做成什么样子的了.先和度娘商量一下先-- 终于在我的淫威之下,度娘交出了一个比较简洁的,源网站在这里(表示感谢),被小弟阉割了之后效果如下图: 接下来就开始编码了么?嗯

使用EC2,VPC搭建博客系统详细步骤-1

1搭建 Amazon Virtual Private Cloud (Amazon VPC) 1.1搭建步骤: 1.1.1创建VPC 1.1.2子网 1.1.3路由表 1.1.4Internet网关 1.1.5DHCP选项集 1.1.6NAT网关 1.1.7ACL和安全组 2启动EC2实例,选择合适的AMI等等. 3在 Amazon Linux 2 上安装 LAMP Web 服务器 3.1安装步骤: 3.1.1远程(CRT使用*.pub) 3.1.2安装 Amazon Linux Extras和P

用php搭建博客系统-待续

PHP(全名:PHP: Hypertext Preprocessor)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域.PHP 独特的语法混合了C.Java.Perl以及PHP自创的语法.它可以比CGI或者Perl更快速地执行动态网页.用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多:PHP还可以执行编译后代码,编译可

django 搭建博客系统之创建博客的数据库模型

在我们之前已经创建好了虚拟环境,以及开始一个项目. 现在我们要添加一些功能性代码,django鼓励我们把自己编写的代码放入app中,每个app实现一个功能. 如今新建一个blog app 1,在虚拟环境下进入根目录,运行 python manage.py startapp blog.就建立了一个名为blog的应用,app. 2,在setting.py 中'告诉'django 存在这样的一个app. 好了 我们已经有了blog这个app,是要实现博客文章,博客的文章应该含有标题.正文.作者.发表时

MVC5+EF6+BootStrap3.3.5 博客系统之项目搭建(一)

环境:vs2013,sql2008R2 引用版本:MVC5,EF6,BootStrap3.3.5 在之前一直都是webfrom开发,虽然开发简单:但是有很多不足的地方.在之前开发都是webfrom+MVC三层架构+数据库等等 我在想将MVC5,EF6,BootStrap3.3.5,结合融于之前的开发模式之中. 1.新建解决方案 2.新建控制台应用程序 Blog.MVC.EF.BootStrap.DAL,主要用于EF数据处理 3.新建3个类库 Blog.MVC.EF.BootStrap.Model