一、博客系統進度回顧
上一遍博客介紹到，系統已經實現到了發布以及前台布局展示，接下來就是實現一些，詳情頁，留言、輪播圖管理、右側博文統計信息實現。
二、博客系統詳情頁實現
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 }
View Code
由於展示的內容比實際存儲在數據庫中的信息多，所以把所有能展示的信息都放在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
View Code
然後在獲取到多有信息，要處理的地方就是用三元運算符來判斷，截取前面的文字部分
2.3詳情頁視圖代碼
1 @model Wchl.WMBlog.Model.VeiwModels.BlogViewModels
2
3 @{
4 ViewBag.Title = "博客詳情頁";
5 }
6 <link href="~/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="/home/index">首頁</a></li>
14 <li><a href="/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="###">@Model.bsubmitter</a></p>
41 <ul class="pager pager-justify">
42 @if (Model.previous == null)
43 {
44 <li class="previous disabled"><a href="#" title=""><i class="icon-arrow-left"></i> 上一篇: </a></li>
45 }
46 else
47 {
48 <li class="previous"><a href="/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="#">下一篇: <i class="icon-arrow-right"></i></a></li>
53 }
54 else
55 {
56 <li class="next"><a href="/blog/Detail/@Model.nextID " title="[email protected]">下一篇:@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="~/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
View Code
這裡博客的詳情頁也是通過布局頁來實現的。
三、博客系統詳情頁留言實現
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 }
View Code
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 }
View Code
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 }
View Code
接下來就是創建相應的倉儲接口、實現，服務接口、實現，這裡就不一一介紹了，跟上一篇實現博客類的是一樣的。
我在實現這個功能的時候，想使用ajax來提交：
這裡我把所有留言的內容放在一個部分視圖頁
_GuestbookPage代碼：
1 <article>
2 <div spellcheck="false" class="example">
3 <div class="comments">
4 <header>
5 <div class="pull-right"><a href="#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="###" 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="###"><strong>@list.username</strong></a></div>
20 <div class="text">@list.body</div>
21 <div class="actions">
22 <a href="##">回復</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="###" 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
View Code
其中分為兩部分，一部分是輸入留言，一部分是展示信息。
留言提交的表單如下：
在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 }
View Code
執行成功之後就把信息加載到分頁信息的位置。
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 = '###' class='avatar'>
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 = '###' ><strong > {1}</strong ></a ></div>
21 <div class='text'>{2}</div>
22 <div class='actions'>
23 <a href = '##' > 回復 </a>
24 </div >
25 </div >
26 </div >",item.createdate,item.username,item.body);
27 }
28 if (pages % 5 == 0)
29 {
30 pages = pages / 5;
31 }
32 else
33 {
34 pages = (pages / 5)+1;
35 }
36
37
38 return Json(new {
39 content = sb.ToString(),
40 pages= pages
41 });
42 }
View Code
在詳情頁中直接調用就可以了實現分頁了
四、博客系統廣告輪播圖管理實現
4.1實現效果這裡的輪播圖使用的是zui中組件來實現的，
4.2主頁輪播圖視圖中的代碼實現
4.3輪播圖管理後台頁面實現展示
這裡上傳圖片使用的是百度的上傳控件
視圖頁代碼實現:
1
2 @{
3 ViewBag.Title = "廣告管理";
4 }
5 @section stylesheet{
6 <link href="~/Content/CSS/blogArticleStyle.css" rel="stylesheet" />
7 <link href="~/Content/lib/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
8 <link href="~/Content/lib/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
9 <link href="~/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="~/Content/CSS/userStyle.css" rel="stylesheet" />*@
81 <script src="~/Content/lib/DataTables/js/jquery.dataTables.js"></script>
82 <script src="~/Content/lib/DataTables/js/dataTables.bootstrap.js"></script>
83 <script src="~/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='" + data + "'>" + data + "</a>";
122 return "<img src='" + 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="#" 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="/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">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
View Code
控制器實現後台代碼
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 = temp.ToList(),
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 }
View Code
廣告對應的表的類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 }
View Code
展示類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 }
View Code
表約束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 }
View Code
這裡實現的是添加圖片自動上傳：
五、博客系統右側統計
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="/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="/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="/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="/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
View Code
這裡重點講講怎麼在EF中執行SQL語句：
在倉儲父類的實現中這裡傳入的實體就是需要展示表內容的類：
六、博客系統小結
現階段博客系統已經完成了前台展示，後台發布基本功能，接下來打算在後台添加一個權限模塊，個人能力有限，代碼水平不夠好，也許我這樣的代碼還入不了大神的法眼，等我把權限做完之後，我會一點一點的來修改代碼。
其實我寫代碼的時間不長，主要是每次想功能怎麼實現的時候，要把每一步都想到，感覺編程，真正實現功能的開發編碼的時間只有40%左右。
如果大家對這個有什麼意見和想法，可以提出來，我會盡量，去修改的，謝謝了。
