首页 > 代码库 > 从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文
从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文
一、博客系统进度回顾
上一遍博客介绍到，系统已经实现到了发布以及前台布局展示，接下来就是实现一些，详情页，留言、轮播图管理、右侧博文统计信息实现。
二、博客系统详情页实现
2.1先来看看详情页展示的效果
2.2实现控制器在前台控制器中创建一个Blog的控制器，主要是展示博客分类以及详情页
Action详情页实现：
1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"></param> 5 /// <returns></returns> 6 public ActionResult Detail(int id) 7 { 8 //获取控制器名称 9 ViewBag.controllername = RouteData.Values["controller"].ToString().ToLower(); 10 var model = BlogArticleServive.getBlogDetails(id); 11 ViewBag.gblist = GuestbookServices.QueryOrderBy(c => c.blogId == id, c => c.createdate, false).ToPagedList(1, 5); 12 13 //发布时间排序 14 ViewBag.blogtimelist = BlogArticleServive.QueryOrderBy(c => true, c => c.bCreateTime, false); 15 //评论排序 16 ViewBag.blogtrafficlist = BlogArticleServive.QueryOrderBy(c => true, c => c.btraffic, false); 17 //留言排序 18 string sql = @"select a.*,b.btitle from (select blogId,count(1) as counts from Guestbook group by blogId) as a 19 inner join BlogArticle as b 20 on 21 b.bID=a.blogId order by counts desc"; 22 23 ViewBag.blogguestbooklist = GuestbookServices.RunProc<TopgbViewModels>(sql); 24 25 return View(model); 26 }
由于展示的内容比实际存储在数据库中的信息多，所以把所有能展示的信息都放在BlogViewModels中，在blog业务逻辑层单独实现了一个包含上一页 下一页，以及摘要赋值的方法。
由于这一部分需要从详情内容中只保留部分文字，所以这里需要对索取的详情信息做处理，由于详情信息是通过富文本编辑来添加的里面包含了很多html代码信息，所以在common程序集中，创建一个工具类，Tools类来存放，辅助的相关方法。
ReplaceHtmlTag方法：
1 #region 去除富文本中的HTML标签 2 /// <summary> 3 /// 去除富文本中的HTML标签 4 /// </summary> 5 /// <param name="html"></param> 6 /// <param name="length"></param> 7 /// <returns></returns> 8 public static string ReplaceHtmlTag(string html, int length = 0) 9 { 10 string strText = System.Text.RegularExpressions.Regex.Replace(html, "<[^>]+>", ""); 11 strText = System.Text.RegularExpressions.Regex.Replace(strText, "&[^;]+;", ""); 12 13 if (length > 0 && strText.Length > length) 14 return strText.Substring(0, length); 15 16 return strText; 17 } 18 #endregion
然后在获取到多有信息，要处理的地方就是用三元运算符来判断，截取前面的文字部分
2.3详情页视图代码
1 @model Wchl.WMBlog.Model.VeiwModels.BlogViewModels 2 3 @{ 4 ViewBag.Title = "博客详情页"; 5 } 6 <link href="http://www.mamicode.com/~/Content/lib/zui/doc.css" rel="stylesheet" /> 7 <section> 8 <article> 9 <div spellcheck="false" class="example"> 10 <br> 11 <ul class="breadcrumb"> 12 <li><i class="icon-location-arrow icon-muted"></i></li> 13 <li><a href="http://www.mamicode.com//home/index">首页</a></li> 14 <li><a href="http://www.mamicode.com//blog/index">博客</a></li> 15 <li class="active">Data</li> 16 </ul> 17 <hr> 18 <article class="article"> 19 <header> 20 <h1 class="text-center">@Model.btitle</h1> 21 <dl class="dl-inline"> 22 <dt>发布时间：</dt> 23 <dd>@Model.bCreateTime</dd> 24 <dt>作者：</dt> 25 <dd>@Model.bsubmitter</dd> 26 <dt></dt> 27 <dd class="pull-right"><span class="label label-success">新</span> <span class="label label-warning">火爆</span> <span class="label label-info">原创</span> <span class="label label-danger"><i class="icon-eye-open"></i> @Model.btraffic</span></dd> 28 </dl> 29 <section class="abstract"> 30 <p><strong>摘要：</strong>@Model.digest</p> 31 </section> 32 </header> 33 <section class="article-content"> 34 @Html.Raw(Model.bcontent) 35 </section> 36 <footer> 37 <p class="pull-right text-muted"> 38 发布时间：@Model.bCreateTime.ToString("yyyy年MM月dd日 HH:mm:ss") 点击数：@Model.btraffic 39 </p> 40 <p class="text-important">本文版权所有归<a href="http://www.mamicode.com/###">@Model.bsubmitter</a></p> 41 <ul class="pager pager-justify"> 42 @if (Model.previous == null) 43 { 44 <li class="previous disabled"><a href="http://www.mamicode.com/#" title=""><i class="icon-arrow-left"></i> 上一篇: </a></li> 45 } 46 else 47 { 48 <li class="previous"><a href="http://www.mamicode.com//blog/Detail/@Model.previousID " title="@Model.previous"><i class="icon-arrow-left"></i> 上一篇: @Model.previous.Substring(0, 5) </a></li> 49 } 50 @if (Model.next == null) 51 { 52 <li class="next disabled"><a href="http://www.mamicode.com/#">下一篇: <i class="icon-arrow-right"></i></a></li> 53 } 54 else 55 { 56 <li class="next"><a href="http://www.mamicode.com//blog/Detail/@Model.nextID " title="=@Model.next">下一篇:@Model.next.Substring(0, 5) <i class="icon-arrow-right"></i></a></li> 57 } 58 59 60 </ul> 61 </footer> 62 </article> 63 </div> 64 </article> 65 <div id="comment"> 66 @Html.Partial("_GuestbookPage") 67 </div> 68 69 </section> 70 @section scripts 71 { 72 <script src="http://www.mamicode.com/~/Content/lib/laypage/laypage.js"></script> 73 <script type="text/javascript"> 74 var blogid; 75 var curr; 76 $(function () { 77 $("#blogId").val(@Model.bID); 78 //运行分页 79 blogid = $("#blogId").val(); 80 guestbookpage(curr,blogid); 81 }) 82 83 function su(data) { 84 $("#comment").html(data); 85 $("#blogId").val(@Model.bID); 86 //setTimeout(function () { 87 // if (document.getElementById(‘textcenter‘) != null) { 88 // //运行分页 89 // guestbookpage(1, blogid); 90 // } 91 //}, 3000); 92 if (document.getElementById(‘textcenter‘) != null) { 93 //运行分页 94 guestbookpage(1, blogid); 95 } 96 97 98 99 } 100 101 //以下将以jquery.ajax为例，演示一个异步分页 102 function guestbookpage(curr,blogid) { 103 $.getJSON(‘/blog/getGuestbook‘, { 104 page: curr || 1, 105 blogId: blogid//向服务端传的参数，此处只是演示 106 }, function (res) { 107 //此处仅仅是为了演示变化的内容 108 $("#comments-list").html(res.content); 109 //显示分页 110 laypage({ 111 cont: document.getElementById(‘textcenter‘), //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div> 112 pages: res.pages, //通过后台拿到的总页数 113 curr: curr || 1, //当前页 114 jump: function (obj, first) { //触发分页后的回调 115 if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr 116 curr = obj.curr; 117 guestbookpage(curr, blogid); 118 } else { 119 curr = first; 120 guestbookpage(curr, blogid); 121 } 122 123 } 124 }); 125 }); 126 }; 127 </script> 128 } 129
这里博客的详情页也是通过布局页来实现的。
三、博客系统详情页留言实现
3.1留言展示页面效果
先要创建一个类在数据库中创建一个表：
Guestbook类
1 namespace Wchl.WMBlog.Model.Models 2 { 3 public class Guestbook 4 { 5 6 /// <summary>留言表 7 /// 8 /// </summary> 9 public int id { get; set; } 10 11 /// <summary>博客ID 12 /// 13 /// </summary> 14 public int? blogId { get; set; } 15 /// <summary>创建时间 16 /// 17 /// </summary> 18 public DateTime createdate { get; set; } 19 public string username { get; set; } 20 21 /// <summary>手机 22 /// 23 /// </summary> 24 public string phone { get; set; } 25 /// <summary>qq 26 /// 27 /// </summary> 28 public string QQ { get; set; } 29 30 /// <summary>留言内容 31 /// 32 /// </summary> 33 public string body { get; set; } 34 /// <summary>ip地址 35 /// 36 /// </summary> 37 public string ip { get; set; } 38 39 /// <summary>是否显示在前台,0否1是 40 /// 41 /// </summary> 42 public bool isshow { get; set; } 43 44 public BlogArticle blogarticle { get; set; } 45 } 46 }
GuestbookViewModels展示类：
1 namespace Wchl.WMBlog.Model.VeiwModels 2 { 3 /// <summary> 4 /// 留言信息展示类 5 /// </summary> 6 public class GuestbookViewModels 7 { 8 /// <summary>留言表 9 /// 10 /// </summary> 11 public int id { get; set; } 12 13 /// <summary>博客ID 14 /// 15 /// </summary> 16 public int? blogId { get; set; } 17 /// <summary>创建时间 18 /// 19 /// </summary> 20 public DateTime createdate { get; set; } 21 public string username { get; set; } 22 23 /// <summary>手机 24 /// 25 /// </summary> 26 public string phone { get; set; } 27 /// <summary>qq 28 /// 29 /// </summary> 30 public string QQ { get; set; } 31 32 /// <summary>留言内容 33 /// 34 /// </summary> 35 public string body { get; set; } 36 /// <summary>ip地址 37 /// 38 /// </summary> 39 public string ip { get; set; } 40 41 /// <summary>是否显示在前台,0否1是 42 /// 43 /// </summary> 44 public bool isshow { get; set; } 45 46 public BlogArticle blogarticle { get; set; } 47 } 48 }
GuestbookMap字段约束:
1 2 namespace Wchl.WMBlog.Model.Maps 3 { 4 public class GuestbookMap: EntityTypeConfiguration<Guestbook> 5 { 6 public GuestbookMap() { 7 this.HasKey(p => p.id); 8 //设置外键 9 this.HasRequired(p => p.blogarticle).WithMany().HasForeignKey(p => p.blogId); 10 } 11 } 12 }
接下来就是创建相应的仓储接口、实现，服务接口、实现，这里就不一一介绍了，跟上一篇实现博客类的是一样的。
我在实现这个功能的时候，想使用ajax来提交：
这里我把所有留言的内容放在一个部分视图页
_GuestbookPage代码：
1 <article> 2 <div spellcheck="false" class="example"> 3 <div class="comments"> 4 <header> 5 <div class="pull-right"><a href="http://www.mamicode.com/#commentReplyForm2" class="btn btn-primary"><i class="icon-comment-alt"></i> 发表评论</a></div> 6 <h3>所有评论</h3> 7 </header> 8 <section class="comments-list" id="comments-list"> 9 @{ if (ViewBag.gblist != null) 10 { 11 foreach (var list in ViewBag.gblist) 12 { 13 <div class="comment"> 14 <a href="http://www.mamicode.com/###" class="avatar"> 15 <i class="icon-user icon-2x"></i> 16 </a> 17 <div class="content"> 18 <div class="pull-right text-muted">@list.createdate</div> 19 <div><a href="http://www.mamicode.com/###"><strong>@list.username</strong></a></div> 20 <div class="text">@list.body</div> 21 <div class="actions"> 22 <a href="http://www.mamicode.com/##">回复</a> 23 </div> 24 </div> 25 </div> 26 } 27 } 28 29 } 30 </section> 31 <br /> 32 <div class="text-center" id="textcenter"> 33 34 </div> 35 <footer> 36 <div class="reply-form" id="commentReplyForm2"> 37 <a href="http://www.mamicode.com/###" class="avatar"><i class="icon-user icon-2x"></i></a> 38 @using (Ajax.BeginForm("addGuestbook", "Blog", new AjaxOptions() 39 { 40 HttpMethod = "post", 41 OnSuccess="su" 42 43 }, new { @class = "form-horizontal" })) 44 { 45 <input type="hidden" id="blogId" name="blogId" value=""/> 46 <div class="form-group col-md-4 form-inline"> 47 <label for="username" class="col-xs-3">昵称</label> 48 <div> 49 <input type="text" class="form-control" name="username" id="username" placeholder="昵称"> 50 </div> 51 </div> 52 <div class="form-group col-md-4 form-inline"> 53 <label for="phone" class="col-xs-3">手机</label> 54 <div> 55 <input type="text" class="form-control" name="phone" id="phone" placeholder="手机"> 56 </div> 57 </div> 58 <div class="form-group col-md-4 form-inline"> 59 <label for="QQ" class="col-xs-3">Q Q</label> 60 <div> 61 <input type="text" class="form-control" name="QQ" id="QQ" placeholder="Q Q"> 62 </div> 63 </div> 64 <div class="form-group"></div> 65 <div class="form-group"> 66 <textarea class="form-control new-comment-text" id="body" name="body" rows="4" placeholder="撰写留言..."></textarea> 67 </div> 68 <div class="form-group comment-user"> 69 <div class="row"> 70 <div class="col-md-2 col-md-offset-10"><button type="submit" class="btn btn-block btn-primary " value="提交">提交</button></div> 71 </div> 72 </div> 73 } 74 </div> 75 </footer> 76 </div> 77 </div> 78 </article> 79
其中分为两部分，一部分是输入留言，一部分是展示信息。
留言提交的表单如下：
在blog控制器中实现添加数据方法：
1 /// <summary> 2 ///提交评论 3 /// </summary> 4 /// <param name="model"></param> 5 /// <returns></returns> 6 [HttpPost] 7 public ActionResult addGuestbook(GuestbookViewModels model) 8 { 9 model.createdate = DateTime.Now; 10 model.ip = Request.UserHostAddress; 11 //AutoMapper自动映射 12 Mapper.Initialize(cfg => cfg.CreateMap<GuestbookViewModels, Guestbook > ()); 13 Guestbook models = Mapper.Map< GuestbookViewModels, Guestbook> (model); 14 BlogArticle blogArticle = BlogArticleServive.QueryWhere(a => a.bID == model.blogId).FirstOrDefault(); 15 blogArticle.bcommentNum += 1; 16 BlogArticleServive.SaverChanges(); 17 GuestbookServices.Add(models); 18 GuestbookServices.SaverChanges(); 19 ViewBag.gblist = GuestbookServices.QueryOrderBy(c => c.blogId == model.blogId, c => c.createdate, false).ToPagedList(1, 5); 20 return PartialView("_GuestbookPage"); 21 }
执行成功之后就把信息加载到分页信息的位置。
3.2添加实现之后就是展示数据，展示数据使用的是一个js分页插件laypage.js
在mvc的视图中只能在页面有一个model类，所以就只能使用ViewBag.gblist来传值了，本来这个打算用mvcpager插件，结果发现不行，就只能使用js来分页，实现如下：
后台blog控制器下，实现分页，然后拼接数据：
1 /// <summary> 2 /// js分页实现 3 /// </summary> 4 /// <param name="page"></param> 5 /// <param name="blogId"></param> 6 /// <returns></returns> 7 public ActionResult getGuestbook(int page,int blogId) 8 { 9 StringBuilder sb = new StringBuilder(); 10 int pages = 0; 11 var modelsLists = GuestbookServices.QueryByPage(page, 5,out pages, c => c.blogId == blogId, c => c.createdate, false); 12 foreach (var item in modelsLists) 13 { 14 sb.AppendFormat(@"<div class=‘comment‘> 15 <a href = http://www.mamicode.com/‘###‘ class=‘avatar‘>"color: #008080"> 16 <i class=‘icon-user icon-2x‘></i> 17 </a> 18 <div class=‘content‘> 19 <div class=‘pull-right text-muted‘>{0}</div> 20 <div><a href = http://www.mamicode.com/‘###‘ > {1}
在详情页中直接调用就可以了实现分页了
四、博客系统广告轮播图管理实现
4.1实现效果这里的轮播图使用的是zui中组件来实现的，
4.2主页轮播图视图中的代码实现
4.3轮播图管理后台页面实现展示
这里上传图片使用的是百度的上传控件
视图页代码实现:
1 2 @{ 3 ViewBag.Title = "广告管理"; 4 } 5 @section stylesheet{ 6 <link href="http://www.mamicode.com/~/Content/CSS/blogArticleStyle.css" rel="stylesheet" /> 7 <link href="http://www.mamicode.com/~/Content/lib/DataTables/css/jquery.dataTables.css" rel="stylesheet" /> 8 <link href="http://www.mamicode.com/~/Content/lib/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" /> 9 <link href="http://www.mamicode.com/~/Content/lib/webuploader/dist/webuploader.css" rel="stylesheet" /> 10 <style type="text/css"> 11 .uploader-list { 12 width: 100%; 13 overflow: hidden; 14 } 15 16 .file-item { 17 float: left; 18 position: relative; 19 margin: 0 20px 20px 0; 20 padding: 4px; 21 } 22 23 .file-item .info { 24 position: absolute; 25 left: 4px; 26 bottom: 4px; 27 right: 4px; 28 height: 20px; 29 line-height: 20px; 30 text-indent: 5px; 31 background: rgba(0, 0, 0, 0.6); 32 color: white; 33 overflow: hidden; 34 white-space: nowrap; 35 text-overflow: ellipsis; 36 font-size: 12px; 37 z-index: 10; 38 } 39 40 .file-item .error { 41 position: absolute; 42 top: 4px; 43 left: 4px; 44 right: 4px; 45 background: red; 46 color: white; 47 text-align: center; 48 height: 20px; 49 font-size: 14px; 50 line-height: 23px; 51 } 52 53 .upload-state-done:after { 54 content: "\f00c"; 55 font-family: FontAwesome; 56 font-style: normal; 57 font-weight: normal; 58 line-height: 1; 59 -webkit-font-smoothing: antialiased; 60 -moz-osx-font-smoothing: grayscale; 61 font-size: 32px; 62 position: absolute; 63 bottom: 0; 64 right: 4px; 65 color: #4cae4c; 66 z-index: 99; 67 } 68 69 .thumbnail { 70 } 71 /*表格信息对齐重写*/ 72 .dataTables_wrapper .dataTables_length { 73 float: left; 74 margin-left: 15px; 75 margin-top: 5px; 76 } 77 </style> 78 } 79 80 @*<link href="http://www.mamicode.com/~/Content/CSS/userStyle.css" rel="stylesheet" />*@ 81 <script src="http://www.mamicode.com/~/Content/lib/DataTables/js/jquery.dataTables.js"></script> 82 <script src="http://www.mamicode.com/~/Content/lib/DataTables/js/dataTables.bootstrap.js"></script> 83 <script src="http://www.mamicode.com/~/Content/lib/webuploader/dist/webuploader.js"></script> 84 <script type="text/javascript"> 85 var table; 86 // 图片上传demo 87 $(function () { 88 //百度上传方法 89 baiduuploader(); 90 //创建表格 91 creatabel(); 92 }); 93 //初始化表格 94 function creatabel() { 95 table = $(‘#adtabel‘).DataTable({ 96 "processing": true, 97 "serverSide": true, 98 //"paging": true, 99 "scrollY": 366, 100 "ajax": { 101 url: ‘@Url.Action("getData", "Advertisement")‘ 102 //"dataType": "json" 103 }, 104 // "pagingType": "full_numbers", 105 // "sLoadingRecords": "正在加载数据...", 106 // "sZeroRecords": "暂无数据", 107 //"stateSave": true, 108 "searching": false, 109 "aaSorting": [[1, "desc"]],//默认第几个排序 110 "dom": ‘rt<"bottom"iflp><"clear">‘, 111 "columns": [ 112 { 113 "data": "count", 114 "width": "28px", 115 }, 116 { 117 "data": "imgUrl", 118 "width": "60px", 119 render: function (data, type, row, meta) { 120 //这里是主题 把url变成超链接、把图片路径显示为图片 121 //return "<a href=http://www.mamicode.com/‘" + data + "‘>" + data + "</a>"; 122 return "<img src=http://www.mamicode.com/‘" + data + "‘ style=‘width:50px;height:50px‘ />"; 123 } 124 }, 125 { "data": "title" }, 126 { "data": "url" }, 127 { "data": "createdate" }, 128 { "data": "remark" }, 129 { 130 data: null 131 } 132 ], 133 "columnDefs": [ 134 { 135 // 指定第一列，从0开始，0表示第一列，1表示第二列…… 136 targets: -1, 137 "width": "100px", 138 render: function (data, type, row, meta) { 139 return ‘<a type="button" class="btn btn-danger" href="http://www.mamicode.com/#" onclick="del(\‘‘ + row.id + ‘\‘)" ><i class="icon icon-trash"></i>删除</a>‘ 140 } 141 } 142 ], 143 "language": { 144 "processing": "玩命加载中...", 145 "lengthMenu": "显示 _MENU_ 项结果", 146 "zeroRecords": "没有匹配结果", 147 "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", 148 "infoEmpty": "显示第 0 至 0 项结果，共 0 项", 149 "infoFiltered": "(由 _MAX_ 项结果过滤)", 150 "infoPostFix": "", 151 "url": "", 152 "paginate": { 153 "first": "首页", 154 "previous": "上一页", 155 "next": "下一页", 156 "last": "末页" 157 } 158 } 159 }); 160 }; 161 162 //删除轮播数据 163 function del(adid) { 164 if (confirm("是否确认删除？")) 165 { 166 $.post(‘@Url.Action("del", "Advertisement")‘, { id: adid },function(ajaxobj){ 167 if(ajaxobj.status=="0") 168 { 169 //如果后台删除成功，则刷新表格，并提示用户删除成功 170 //保留分页信息 171 table.ajax.reload(null,false); 172 alert("删除成功"); 173 } 174 }) 175 } 176 } 177 178 //百度上传 179 function baiduuploader() { 180 var $ = jQuery, 181 $list = $(‘#fileList‘), 182 // 优化retina, 在retina下这个值是2 183 ratio = window.devicePixelRatio || 1, 184 185 // 缩略图大小 186 thumbnailWidth = 80 * ratio, 187 thumbnailHeight = 80 * ratio, 188 189 // Web Uploader实例 190 uploader; 191 192 // 初始化Web Uploader 193 uploader = WebUploader.create({ 194 195 // 自动上传。 196 auto: true, 197 198 // swf文件路径 199 swf: ‘/Content/lib/webuploader/dist/Uploader.swf‘, 200 201 // 文件接收服务端。 202 server: ‘@Url.Action("UpLoadProcess", "Advertisement")‘, 203 204 // 选择文件的按钮。可选。 205 // 内部根据当前运行是创建，可能是input元素，也可能是flash. 206 pick: ‘#filePicker‘, 207 208 // 只允许选择文件，可选。 209 accept: { 210 title: ‘Images‘, 211 extensions: ‘gif,jpg,jpeg,bmp,png‘, 212 mimeTypes: ‘image/*‘ 213 } 214 }); 215 216 // 当有文件添加进来的时候 217 uploader.on(‘fileQueued‘, function (file) { 218 var $li = $( 219 ‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ + 220 ‘<img>‘ + 221 ‘<div class="info">‘ + file.name + ‘</div>‘ + 222 ‘</div>‘ 223 ), 224 $img = $li.find(‘img‘); 225 226 $list.append($li); 227 228 // 创建缩略图 229 uploader.makeThumb(file, function (error, src) { 230 if (error) { 231 $img.replaceWith(‘<span>不能预览</span>‘); 232 return; 233 } 234 235 $img.attr(‘src‘, src); 236 }, thumbnailWidth, thumbnailHeight); 237 }); 238 239 // 文件上传过程中创建进度条实时显示。 240 uploader.on(‘uploadProgress‘, function (file, percentage) { 241 var $li = $(‘#‘ + file.id), 242 $percent = $li.find(‘.progress span‘); 243 244 // 避免重复创建 245 if (!$percent.length) { 246 $percent = $(‘<p class="progress"><span></span></p>‘) 247 .appendTo($li) 248 .find(‘span‘); 249 } 250 251 $percent.css(‘width‘, percentage * 100 + ‘%‘); 252 }); 253 254 // 文件上传成功，给item添加成功class, 用样式标记上传成功。 255 uploader.on(‘uploadSuccess‘, function (file, response) { 256 $(‘#‘ + file.id).addClass(‘upload-state-done‘); 257 //alert(response.filePath); 258 $(‘#ImgUrl‘).val(response.filePath); 259 }); 260 261 // 文件上传失败，现实上传出错。 262 uploader.on(‘uploadError‘, function (file) { 263 var $li = $(‘#‘ + file.id), 264 $error = $li.find(‘div.error‘); 265 266 // 避免重复创建 267 if (!$error.length) { 268 $error = $(‘<div class="error"></div>‘).appendTo($li); 269 } 270 271 $error.text(‘上传失败‘); 272 }); 273 274 // 完成上传完了，成功或者失败，先删除进度条。 275 uploader.on(‘uploadComplete‘, function (file) { 276 $(‘#‘ + file.id).find(‘.progress‘).remove(); 277 }); 278 }; 279 //上传轮播信息成功之后调用 280 function afterSu(ajaxobj) { 281 if (ajaxobj.status == "0") { 282 alert("上传成功！"); 283 window.location.reload(); 284 } else if (ajaxobj.status == "1") { 285 alert("上传失败！"); 286 window.location.reload(); 287 } 288 } 289 </script> 290 291 <!-- head star --> 292 <div class="tnav row border-bottom white-bg page-heading"> 293 <div class="col-sm-4"> 294 <h2 class="fl">博客后台</h2> 295 <ol class="breadcrumb fl"> 296 <li><a href="http://www.mamicode.com/admin/Home">广告管理</a></li> 297 <li><strong>轮播图管理</strong></li> 298 </ol> 299 </div> 300 </div> 301 <!-- head end --> 302 303 <div class="example scrollbar-hover" style="max-height: 600px; overflow: scroll;"> 304 <!--table star--> 305 <table id="adtabel" class="table table-striped table-bordered table-hover dataTables-example dataTable" cellspacing="0"> 306 <thead> 307 <tr> 308 <th>编号</th> 309 <th>图片</th> 310 <th>标题</th> 311 <th>链接</th> 312 <th>创建时间</th> 313 <th>备注</th> 314 <th>操作</th> 315 </tr> 316 </thead> 317 <!-- tbody是必须的 --> 318 319 </table> 320 <!--table end--> 321 <hr /> 322 <!--form star--> 323 @using (Ajax.BeginForm("add", "Advertisement", new AjaxOptions() 324 { 325 HttpMethod = "post", 326 OnSuccess = "afterSu" 327 }, new { @class = "form-horizontal" })) 328 { 329 <input type="hidden" id="ImgUrl" name="ImgUrl" value="" /> 330 <div class="form-group"> 331 <div class="form-group"> 332 <label for="Title" class="col-sm-2">标题：</label> 333 <div class="col-md-4 col-sm-10"> 334 <input type="text" class="form-control" id="Title" name="Title" placeholder="标题"> 335 </div> 336 </div> 337 <div class="form-group"> 338 <label for="Url" class="col-sm-2">链接：</label> 339 <div class="col-md-4 col-sm-10"> 340 <input type="text" class="form-control" name="Url" id="Url" placeholder="http://"> 341 </div> 342 </div> 343 <div class="form-group"> 344 <label for="Remark" class="col-sm-2">备注：</label> 345 <div class="col-md-4 col-sm-10"> 346 <textarea rows="2" type="text" class="form-control" name="Remark" id="Remark" placeholder="说明"></textarea> 347 </div> 348 </div> 349 </div> 350 <div class="form-group"> 351 <label for="exampleInputPassword4" class="col-sm-2">上传图片：</label> 352 <div class="col-md-10 col-sm-10"> 353 <!--dom结构部分--> 354 <div id="uploader-demo"> 355 <!--用来存放item--> 356 <div id="fileList" class="uploader-list"></div> 357 <div id="filePicker">选择图片</div> 358 </div> 359 </div> 360 </div> 361 <div class="form-group"> 362 <div class="col-sm-offset-2 col-sm-10"> 363 <button type="submit" class="btn btn-info">提交</button> 364 </div> 365 </div> 366 } 367 <!--form end--> 368 </div> 369 370 371
控制器实现后台代码
1 namespace Wchl.WMBlog.WebUI.Areas.admin.Controllers 2 { 3 public class AdvertisementController : BaseController 4 { 5 IAdvertisementServices AdvertisementServices; 6 public AdvertisementController(IAdvertisementServices AdvertisementServices) 7 { 8 this.AdvertisementServices = AdvertisementServices; 9 } 10 11 // GET: admin/Advertisement 12 public ActionResult Index() 13 { 14 return View(); 15 } 16 17 /// <summary> 18 /// 获取广告信息 19 /// </summary> 20 /// <returns></returns> 21 public ActionResult getData() 22 { 23 int pageIndex = Request["start"] != null ? int.Parse(Request["start"]) : 1; 24 int pageSize = Request["length"] != null ? int.Parse(Request["length"]) : 5; 25 int draw = Request["draw"] != null ? int.Parse(Request["draw"]) : 1; 26 int totalCount; 27 int count = 0; 28 var adInfoList = AdvertisementServices.QueryByBeginPage(pageIndex, pageSize, out totalCount, r =>true , r => r.Createdate, false); 29 var temp = from u in adInfoList 30 select new { count= count+=1, ID = u.Id, Title = u.Title, ImgUrl = u.ImgUrl, Createdate = u.Createdate,url=u.Url, Remark = u.Remark }; 31 return Json(new { 32 data = http://www.mamicode.com/temp.ToList(),"color: #008080"> 33 draw = draw, 34 recordsTotal = totalCount, 35 recordsFiltered = totalCount 36 },JsonRequestBehavior.AllowGet); 37 } 38 39 /// <summary> 40 /// 删除广告 41 /// </summary> 42 /// <param name="id"></param> 43 /// <returns></returns> 44 [HttpPost] 45 public ActionResult del(int id) 46 { 47 Advertisement model = new Advertisement() {Id=id }; 48 AdvertisementServices.Delete(model, false); 49 AdvertisementServices.SaverChanges(); 50 return Json(new { status = "0" },JsonRequestBehavior.AllowGet); 51 } 52 53 /// <summary> 54 /// 添加广告信息 55 /// </summary> 56 /// <returns></returns> 57 [HttpPost] 58 public ActionResult Add(AdvertisementViewModels model) 59 { 60 model.Createdate = DateTime.Now; 61 //AutoMapper自动映射 62 Mapper.Initialize(cfg => cfg.CreateMap<AdvertisementViewModels, Advertisement>()); 63 Advertisement models = Mapper.Map<AdvertisementViewModels, Advertisement>(model); 64 AdvertisementServices.Add(models); 65 AdvertisementServices.SaverChanges(); 66 return Json(new { status="0" },JsonRequestBehavior.AllowGet); 67 } 68 69 /// <summary> 70 /// 百度上传图片 71 /// </summary> 72 /// <param name="id">百度插件自定义对图片的命名id</param> 73 /// <param name="name">图片名称</param> 74 /// <param name="type">图片类型</param> 75 /// <param name="lastModifiedDate">图片本身的修改时间</param> 76 /// <param name="size">图片大小</param> 77 /// <param name="file">文件流</param> 78 /// <returns></returns> 79 public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file) 80 { 81 string filePathName = string.Empty; 82 83 string localPath = Server.MapPath("/upload/"); 84 if (Request.Files.Count == 0) 85 { 86 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" }); 87 } 88 89 string ex = Path.GetExtension(file.FileName); 90 filePathName = Guid.NewGuid().ToString("N") + ex; 91 92 string datedir = DateTime.Now.ToString("yyyyMMdd"); 93 if (!Directory.Exists(localPath + datedir)) 94 { 95 Directory.CreateDirectory(localPath + datedir); 96 } 97 string path = localPath + datedir; 98 try 99 { 100 file.SaveAs(Path.Combine(path, filePathName)); 101 } 102 catch (Exception) 103 { 104 return Json(new { jsonrpc = 2.0, error = new { code = 103, message = "保存失败" }, id = "id" }); 105 } 106 return Json(new 107 { 108 jsonrpc = "2.0", 109 id = id, 110 filePath = "/Upload/"+datedir + "/" + filePathName 111 }); 112 113 } 114 } 115 }
广告对应的表的类Advertisement：
1 namespace Wchl.WMBlog.Model.Models 2 { 3 public class Advertisement 4 { 5 /// <summary> 6 /// 分类ID 7 /// </summary> 8 public int Id { get; set; } 9 /// <summary> 10 /// 创建时间 11 /// </summary> 12 public DateTime Createdate { get; set; } 13 14 /// <summary> 15 /// 广告图片 16 /// </summary> 17 public string ImgUrl { get; set; } 18 19 /// <summary> 20 /// 广告标题 21 /// </summary> 22 public string Title { get; set; } 23 24 /// <summary> 25 /// 广告链接 26 /// </summary> 27 public string Url { get; set; } 28 29 /// <summary> 30 /// 备注 31 /// </summary> 32 public string Remark { get; set; } 33 } 34 }
展示类AdvertisementViewModels:
1 namespace Wchl.WMBlog.Model.VeiwModels 2 { 3 /// <summary> 4 /// 广告类 5 /// </summary> 6 public class AdvertisementViewModels 7 { 8 /// <summary> 9 /// 分类ID 10 /// </summary> 11 public int Id { get; set; } 12 /// <summary> 13 /// 创建时间 14 /// </summary> 15 public DateTime Createdate { get; set; } 16 17 /// <summary> 18 /// 广告图片 19 /// </summary> 20 public string ImgUrl { get; set; } 21 22 /// <summary> 23 /// 广告标题 24 /// </summary> 25 public string Title { get; set; } 26 27 /// <summary> 28 /// 广告链接 29 /// </summary> 30 public string Url { get; set; } 31 32 /// <summary> 33 /// 备注 34 /// </summary> 35 public string Remark { get; set; } 36 } 37 }
表约束AdvertisementMap:
1 namespace Wchl.WMBlog.Model.Maps 2 { 3 public class AdvertisementMap: EntityTypeConfiguration<Advertisement> 4 { 5 public AdvertisementMap() 6 { 7 this.HasKey(p => p.Id); 8 this.Property(p => p.ImgUrl).HasMaxLength(512); 9 this.Property(p => p.Title).HasMaxLength(64); 10 this.Property(p => p.Url).HasMaxLength(256); 11 } 12 } 13 }
这里实现的是添加图片自动上传：
五、博客系统右侧统计
5.1效果显示，这里的统计主要是对发布时间、阅读排行、评论排行做了统计。
后台实现代码：
部分布局视图代码：
1 <!--右边栏部分--> 2 <aside> 3 <div class="col-md-4"> 4 <section class="youbianlan"> 5 <div class="panel-group"> 6 <div class="panel"> 7 <div class="panel-heading"> 8 <div class="panel-title panel-info"> 9 <h4>最新发布</h4> 10 </div> 11 </div> 12 <div class="panel-body"> 13 <ul> 14 @{ 15 if (ViewBag.blogtimelist != null) 16 { 17 for (int i = 0; i < 10; i++) 18 { 19 <li><a href="http://www.mamicode.com//blog/Detail/@ViewBag.blogtimelist[i].bID">@ViewBag.blogtimelist[i].btitle</a></li> 20 } 21 } 22 23 } 24 </ul> 25 </div> 26 </div> 27 </div> 28 </section> 29 <section class="youbianlan"> 30 <div class="panel-group"> 31 <div class="panel"> 32 <div class="panel-heading"> 33 <div class="panel-title panel-info"> 34 <h4>阅读排行榜</h4> 35 </div> 36 </div> 37 <div class="panel-body"> 38 <ul> 39 @{ 40 if (ViewBag.blogtrafficlist != null) 41 { 42 for (int i = 0; i < 10; i++) 43 { 44 <li><a href="http://www.mamicode.com//blog/Detail/@ViewBag.blogtrafficlist[i].bID">@ViewBag.blogtrafficlist[i].btitle</a></li> 45 } 46 } 47 48 } 49 </ul> 50 </div> 51 </div> 52 </div> 53 </section> 54 <section class="youbianlan"> 55 <div class="panel-group"> 56 <div class="panel"> 57 <div class="panel-heading"> 58 <div class="panel-title panel-info"> 59 <h4>评论排行榜</h4> 60 </div> 61 </div> 62 <div class="panel-body"> 63 <ul> 64 @{ 65 List<TopgbViewModels> list = ViewBag.blogguestbooklist as List<TopgbViewModels>; 66 if (list != null && list.Any()) 67 { 68 if (list.Count < 10) 69 { 70 for (int i = 0; i < list.Count; i++) 71 { 72 <li><a href="http://www.mamicode.com//blog/Detail/@list[i].blogId">@list[i].btitle</a></li> 73 } 74 } 75 else 76 { 77 for (int i = 0; i < 10; i++) 78 { 79 <li><a href="http://www.mamicode.com//blog/Detail/@list[i].blogId">@list[i].btitle</a></li> 80 } 81 } 82 83 } 84 85 } 86 </ul> 87 </div> 88 </div> 89 </div> 90 </section> 91 </div> 92 </aside> 93 <!--右边栏部分结束--> 94 95
这里重点讲讲怎么在EF中执行SQL语句：
在仓储父类的实现中这里传入的实体就是需要展示表内容的类：
六、博客系统小结
现阶段博客系统已经完成了前台展示，后台发布基本功能，接下来打算在后台添加一个权限模块，个人能力有限，代码水平不够好，也许我这样的代码还入不了大神的法眼，等我把权限做完之后，我会一点一点的来修改代码。
其实我写代码的时间不长，主要是每次想功能怎么实现的时候，要把每一步都想到，感觉编程，真正实现功能的开发编码的时间只有40%左右。
如果大家对这个有什么意见和想法，可以提出来，我会尽量，去修改的，谢谢了。
从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。