從零開始，搭建博客系統MVC5+EF6搭建框架（4）下，前後臺佈局實現、發佈博客以及展示。

一、博客系統進度回顧目前已經完成了，前臺展示，以及後臺發佈的功能，最近都在做這個，其實我在國慶的時候就可以弄完的，但是每天自己弄，突然最後國慶2天，連電腦都不想碰，所以就一直拖著，上一篇寫了前端實現用到的一些WebUI框架以及一些系統中用到的js插件，其實寫了這麼久，還是第一次，有人留言，不要爛尾 ...

一、博客系統進度回顧

目前已經完成了，前臺展示，以及後臺發佈的功能，最近都在做這個，其實我在國慶的時候就可以弄完的，但是每天自己弄，突然最後國慶2天，連電腦都不想碰，所以就一直拖著，上一篇寫了前端實現用到的一些WebUI框架以及一些系統中用到的js插件，其實寫了這麼久，還是第一次，有人留言，不要爛尾的，感覺還是有點點價值的，至少有人關註。

廢話不多說，現在開始上代碼。

二、博客系統後臺佈局實現

2.1.這裡所用的是MVC的佈局頁來實現的，後臺主要分為三部分：導航、菜單、主要內容

代碼實現：

這裡把後臺單獨放在一個區域裡面，所以我這裡建立一個admin的區域

在佈局頁_Layout.cshtml引入公共的一些css文件以及js文件

佈局頁代碼_Layout.cshtml：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>@ViewBag.Title - 博客系統後臺管理</title>
  7     <link href="~/Content/CSS/zui.css" rel="stylesheet" />
  8     <link href="~/Content/CSS/zui-theme.css" rel="stylesheet" />
  9     <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
 10     <link href="~/Content/lib/metisMenu/metisMenu.css" rel="stylesheet" />
 11     <link href="~/Content/CSS/index.css" rel="stylesheet" />
 12     @RenderSection("stylesheet", required: false)
 13     <script src="~/Content/JS/jquery-1.12.4.min.js"></script>
 14     <script src="~/Content/JS/zui.js"></script>
 15     <script src="~/Content/lib/metisMenu/metisMenu.js"></script>
 16     <script src="~/Content/JS/index.js"></script>
 17 
 18     <!--[if lt IE 9]>
 19     <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
 20     <script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
 21     <script src="lib/ieonly/excanvas.js"></script>
 22     <![endif]-->
 23 
 24 </head>
 25 <body>
 26     <!--header-->
 27     <header>
 28         <div class="navbar navbar-inverse " role="navigation">
 29             <div class="navbar-header">
 30                 <!--移動設備上的導航切換按鈕-->
 31                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
 32                     <span class="sr-only">切換導航</span>
 33                     <span class="icon-bar"></span>
 34                     <span class="icon-bar"></span>
 35                     <span class="icon-bar"></span>
 36                 </button>
 37                 <!--品牌名稱或logo-->
 38                 <a class="navbar-brand">系統後臺</a>
 39             </div>
 40             <div class="collapse navbar-collapse navbar-collapse-example">
 41                 <ul class="nav navbar-nav navbar-right">
 42                     <li><a><i class="icon icon-user"></i>&nbsp;&nbsp;您好，admin</a></li>
 43                     <li><a><i class="icon icon-exchange"></i>&nbsp;&nbsp;隱藏菜單</a></li>
 44                     <li><a href="/admin/Home"><i class="icon icon-home"></i>&nbsp;&nbsp;首頁</a></li>
 45                     <li><a><i class="icon icon-question-sign"></i>&nbsp;&nbsp;幫助</a></li>
 46                     <li><a><i class="icon icon-off"></i>&nbsp;&nbsp;退出</a></li>
 47                 </ul>
 48             </div>
 49         </div>
 50     </header>
 51     <!--header end-->
 52     <!--content-->
 53     <div class="clearfix">
 54         @Html.Partial("_sidebar")
 55         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 rightmain">
 56             <div class="col-sm-12  col-md-12  rightcontent">
 57                 @RenderBody()
 58             </div>
 59         </div>
 60     </div>
 61     <!--content end-->
 62     <!--footer-->
 63     <footer class="col-md-12 footer footerstyle">
 64         <p>&copy; @DateTime.Now.Year - 我的博客系統</p>
 65     </footer>
 66     <!--footer end-->
 67 
 68     <script src="~/Scripts/jquery.validate.js"></script>
 69     <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
 70     <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
 71     @RenderSection("scripts", required: false)
 72 </body>
 73 </html>

View Code

菜單部分頁_sidebar.cshtml代碼

  1 @{
  2     string url = Request.Url.ToString().ToLower();
  3 }
  4 @if (url.Contains("home"))
  5 {
  6     <aside class="col-sm-3 col-md-2 sidebar">
  7         <nav class="sidebar-nav">
  8             <ul class="metismenu" id="menu">
  9                 <li class="active">
 10                     <a href="#" aria-expanded="true">
 11                         <i class="icon icon-github"></i>
 12                         系統統計<i class="fa arrow fa-fw"></i>
 13                     </a>
 14                     <ul aria-expanded="true">
 15                         <li>
 16                             <a href="/admin/statistics/visitor">
 17                                 <i class="icon icon-list"></i>
 18                                 訪問統計
 19                             </a>
 20                         </li>
 21                         <li>
 22                             <a href="/admin/statistics/usesr">
 23                                 <i class="icon icon-github"></i>
 24                                 用戶統計
 25                             </a>
 26                         </li>
 27                     </ul>
 28                 </li>
 29                 <li>
 30                     <a href="#" aria-expanded="false">博客管理<i class="fa arrow fa-fw"></i></a>
 31                     <ul aria-expanded="false">
 32                         <li><a href="/admin/BlogArticle/Index">博客列表</a></li>
 33                         <li><a href="/admin/BlogArticle/Add">發佈博客</a></li>
 34                     </ul>
 35                 </li>
 36                 <li>
 37                     <a href="#" aria-expanded="false">廣告管理<i class="fa arrow fa-fw"></i></a>
 38                     <ul aria-expanded="false">
 39                         <li><a href="@Url.Action("index", "Advertisement")">輪播圖管理</a></li>
 40                     </ul>
 41                 </li>
 42                 <li>
 43                     <a href="#" aria-expanded="false">用戶管理<i class="fa arrow fa-fw"></i></a>
 44                     <ul aria-expanded="false">
 45                         <li><a href="#">修改信息</a></li>
 46                         <li><a href="#">修改密碼</a></li>
 47                         <li>
 48                             <a href="#" aria-expanded="false">用戶信息管理<span class="fa plus-times"></span></a>
 49                             <ul aria-expanded="false">
 50                                 <li><a href="#">修改信息</a></li>
 51                                 <li><a href="#">修改密碼</a></li>
 52                             </ul>
 53                         </li>
 54                     </ul>
 55                 </li>
 56                 <li>
 57                     <a href="#" aria-expanded="false">許可權管理<i class="fa arrow fa-fw"></i></a>
 58                     <ul aria-expanded="false">
 59                         <li><a href="#">用戶授權</a></li>
 60                         <li><a href="#">用戶組管理</a></li>
 61                         <li><a href="#">用戶組授權</a></li>
 62                     </ul>
 63                 </li>
 64                 <li>
 65                     <a href="#" aria-expanded="false">日誌管理<i class="fa arrow fa-fw"></i></a>
 66                     <ul aria-expanded="false">
 67                         <li><a href="#">用戶日誌</a></li>
 68                         <li><a href="#">系統日誌</a></li>
 69                     </ul>
 70                 </li>
 71             </ul>
 72         </nav>
 73     </aside>
 74 }
 75 else if (url.Contains("blogarticle"))
 76 {
 77     <aside class="col-sm-3 col-md-2 sidebar">
 78         <nav class="sidebar-nav">
 79             <ul class="metismenu" id="menu">
 80                 <li>
 81                     <a href="#" aria-expanded="true">
 82                         <i class="icon icon-github"></i>
 83                         系統統計<i class="fa arrow fa-fw"></i>
 84                     </a>
 85                     <ul aria-expanded="true">
 86                         <li>
 87                             <a href="/admin/statistics/visitor">
 88                                 <i class="icon icon-list"></i>
 89                                 訪問統計
 90                             </a>
 91                         </li>
 92                         <li>
 93                             <a href="/admin/statistics/usesr">
 94                                 <i class="icon icon-github"></i>
 95                                 用戶統計
 96                             </a>
 97                         </li>
 98                     </ul>
 99                 </li>
100                 <li class="active">
101                     <a href="#" aria-expanded="false">博客管理<i class="fa arrow fa-fw"></i></a>
102                     <ul aria-expanded="false">
103                         <li><a href="/admin/BlogArticle/Index">博客列表</a></li>
104                         <li><a href="/admin/BlogArticle/Add">發佈博客</a></li>
105                     </ul>
106                 </li>
107                 <li>
108                     <a href="#" aria-expanded="false">廣告管理<i class="fa arrow fa-fw"></i></a>
109                     <ul aria-expanded="false">
110                         <li><a href="@Url.Action("index", "Advertisement")">輪播圖管理</a></li>
111                     </ul>
112                 </li>
113                 <li>
114                     <a href="#" aria-expanded="false">用戶管理<i class="fa arrow fa-fw"></i></a>
115                     <ul aria-expanded="false">
116                         <li><a href="#">修改信息</a></li>
117                         <li><a href="#">修改密碼</a></li>
118                         <li>
119                             <a href="#" aria-expanded="false">用戶信息管理<span class="fa plus-times"></span></a>
120                             <ul aria-expanded="false">
121                                 <li><a href="#">修改信息</a></li>
122                                 <li><a href="#">修改密碼</a></li>
123                             </ul>
124                         </li>
125                     </ul>
126                 </li>
127                 <li>
128                     <a href="#" aria-expanded="false">許可權管理<i class="fa arrow fa-fw"></i></a>
129                     <ul aria-expanded="false">
130                         <li><a href="#">用戶授權</a></li>
131                         <li><a href="#">用戶組管理</a></li>
132                         <li><a href="#">用戶組授權</a></li>
133                     </ul>
134                 </li>
135                 <li>
136                     <a href="#" aria-expanded="false">日誌管理<i class="fa arrow fa-fw"></i></a>
137                     <ul aria-expanded="false">
138                         <li><a href="#">用戶日誌</a></li>
139                         <li><a href="#">系統日誌</a></li>
140                     </ul>
141                 </li>
142             </ul>
143         </nav>
144     </aside>
145 }
146 else if (url.Contains("advertisement"))
147 {
148     <aside class="col-sm-3 col-md-2 sidebar">
149         <nav class="sidebar-nav">
150             <ul class="metismenu" id="menu">
151                 <li>
152                     <a href="#" aria-expanded="true">
153                         <i class="icon icon-github"></i>
154                         系統統計<i class="fa arrow fa-fw"></i>
155                     </a>
156                     <ul aria-expanded="true">
157                         <li>
158                             <a href="/admin/statistics/visitor">
159                                 <i class="icon icon-list"></i>
160                                 訪問統計
161                             </a>
162                         </li>
163                         <li>
164                             <a href="/admin/statistics/usesr">
165                                 <i class="icon icon-github"></i>
166                                 用戶統計
167                             </a>
168                         </li>
169                     </ul>
170                 </li>
171                 <li >
172                     <a href="#" aria-expanded="false">博客管理<i class="fa arrow fa-fw"></i></a>
173                     <ul aria-expanded="false">
174                         <li><a href="/admin/BlogArticle/Index">博客列表</a></li>
175                         <li><a href="/admin/BlogArticle/Add">發佈博客</a></li>
176                     </ul>
177                 </li>
178                 <li class="active">
179                     <a href="#" aria-expanded="false">廣告管理<i class="fa arrow fa-fw"></i></a>
180                     <ul aria-expanded="false">
181                         <li><a href="@Url.Action("index", "Advertisement")">輪播圖管理</a></li>
182                     </ul>
183                 </li>
184                 <li>
185                     <a href="#" aria-expanded="false">用戶管理<i class="fa arrow fa-fw"></i></a>
186                     <ul aria-expanded="false">
187                         <li><a href="#">修改信息</a></li>
188                         <li><a href="#">修改密碼</a></li>
189                         <li>
190                             <a href="#" aria-expanded="false">用戶信息管理<span class="fa plus-times"></span></a>
191                             <ul aria-expanded="false">
192                                 <li><a href="#">修改信息</a></li>
193                                 <li><a href="#">修改密碼</a></li>
194                             </ul>
195                         </li>
196                     </ul>
197                 </li>
198                 <li>
199                     <a href="#" aria-expanded="false">許可權管理<i class="fa arrow fa-fw"></i></a>
200                     <ul aria-expanded="false">
201                         <li><a href="#">用戶授權</a></li>
202                         <li><a href="#">用戶組管理</a></li>
203                         <li><a href="#">用戶組授權</a></li>
204                     </ul>
205                 </li>
206                 <li>
207                     <a href="#" aria-expanded="false">日誌管理<i class="fa arrow fa-fw"></i></a>
208                     <ul aria-expanded="false">
209                         <li><a href="#">用戶日誌</a></li>
210                         <li><a href="#">系統日誌</a></li>
211                     </ul>
212                 </li>
213             </ul>
214         </nav>
215     </aside>
216 }

View Code

其實我這個菜單選中的效果做的很垃圾，我自己都覺得不要，但是目前我也只能想到這個方法，因為每次載入一個嵌套的頁面就會從新去載入一次佈局頁_Layout.cshtml的內容，我這個菜單是有一個active選中的樣式的，這個是菜單插件裡面已經寫好了，這裡遇到的問題就是每次刷新都會把頁面選中效果設置到預設的菜單上，假如點擊了發佈博客菜單應該顯示博客管理這個菜單內容，但是從新載入的時候就會回到預設的系統統計菜單上，所以這裡就用地址路徑來判斷應該顯示那個菜單，方法真的很笨，見諒，各位。

2.2博客信息添加功能實現

在model層的Models文件創建一個BlogArticle類，然後在創建一個文件VeiwModels，Models文件夾裡面的類是用來生成資料庫對應的表，而VeiwModels文件夾裡面對應的類是用來在view視圖頁面展示數據用的，當你一個表欄位很多不需要所有數據都展示，或者要做一些處理計算的類，這樣就需要一個VeiwModels類來分離。

BlogArticle類：

  1 namespace Wchl.WMBlog.Model.Models
  2 {
  3     /// <summary>博客文章
  4     /// 
  5     /// </summary
  6     public class BlogArticle
  7     {
  8         /// <summary>
  9         /// 
 10         /// </summary>
 11         public int bID { get; set; }
 12         /// <summary>創建人
 13         /// 
 14         /// </summary>
 15         public string bsubmitter { get; set; }
 16 
 17         /// <summary>博客標題
 18         /// 
 19         /// </summary>
 20         public string btitle { get; set; }
 21 
 22         /// <summary>類別
 23         /// 
 24         /// </summary>
 25         public string bcategory { get; set; }
 26 
 27         /// <summary>內容
 28         /// 
 29         /// </summary>
 30         public string bcontent { get; set; }
 31 
 32         /// <summary>
 33         /// 訪問量
 34         /// </summary>
 35         public int btraffic { get; set; }
 36 
 37         /// <summary>
 38         /// 評論數量
 39         /// </summary>
 40         public int bcommentNum { get; set; }
 41 
 42         /// <summary> 修改時間
 43         /// 
 44         /// </summary>
 45         public DateTime bUpdateTime { get; set; }
 46 
 47         /// <summary>
 48         /// 創建時間
 49         /// </summary>
 50         public System.DateTime bCreateTime { get; set; }
 51         /// <summary>備註
 52         /// 
 53         /// </summary>
 54         public string bRemark { get; set; }
 55     }
 56 }

View Code

BlogViewModels類：

  1 namespace Wchl.WMBlog.Model.VeiwModels
  2 {
  3     /// <summary>
  4     /// 博客信息展示類
  5     /// </summary>
  6     public class BlogViewModels
  7     {
  8         /// <summary>
  9         /// 
 10         /// </summary>
 11         public int bID { get; set; }
 12         /// <summary>創建人
 13         /// 
 14         /// </summary>
 15         public string bsubmitter { get; set; }
 16 
 17         /// <summary>博客標題
 18         /// 
 19         /// </summary>
 20         public string btitle { get; set; }
 21 
 22         /// <summary>摘要
 23         /// 
 24         /// </summary>
 25         public string digest { get; set; }
 26 
 27         /// <summary>
 28         /// 上一篇
 29         /// </summary>
 30         public string previous { get; set; }
 31 
 32         /// <summary>
 33         /// 上一篇id
 34         /// </summary>
 35         public int previousID { get; set; }
 36 
 37         /// <summary>
 38         /// 下一篇
 39         /// </summary>
 40         public string next { get; set; }
 41 
 42         /// <summary>
 43         /// 下一篇id
 44         /// </summary>
 45         public int nextID { get; set; }
 46 
 47         /// <summary>類別
 48         /// 
 49         /// </summary>
 50         public string bcategory { get; set; }
 51 
 52         /// <summary>內容
 53         /// 
 54         /// </summary>
 55         public string bcontent { get; set; }
 56 
 57         /// <summary>
 58         /// 訪問量
 59         /// </summary>
 60         public int btraffic { get; set; }
 61 
 62         /// <summary>
 63         /// 評論數量
 64         /// </summary>
 65         public int bcommentNum { get; set; }
 66 
 67         /// <summary> 修改時間
 68         /// 
 69         /// </summary>
 70         public DateTime bUpdateTime { get; set; }
 71 
 72         /// <summary>
 73         /// 創建時間
 74         /// </summary>
 75         public System.DateTime bCreateTime { get; set; }
 76         /// <summary>備註
 77         /// 
 78         /// </summary>
 79         public string bRemark { get; set; }
 80     }
 81 }

View Code

在maps文件夾中添加相應的約束

BlogArticleMap類：

：

  1 namespace Wchl.WMBlog.Model.Maps
  2 {
  3     public class BlogArticleMap: EntityTypeConfiguration<BlogArticle>
  4     {
  5         public BlogArticleMap()
  6         {
  7             this.HasKey(p => p.bID);
  8             this.Property(p => p.btitle).HasMaxLength(256);
  9             this.Property(p => p.bsubmitter).HasMaxLength(60);
 10             this.Property(p => p.bcontent).HasColumnType("Text").IsMaxLength();
 11         }
 12     }
 13 }

View Code

然後在控制台使用更新資料庫命令：update database -force，一定要選擇model層

創建好了表，然後就是在倉儲層以及業務層創建相應的介面和實現類

IBlogArticleRepository類：

  1 namespace Wchl.WMBlog.IRepository
  2 {