轻量级权限管理系统——后台模板

引言

  最近在学习bootstrap因此在网上找了一个bootstrap管理后台模板,不过bootstrap的版本是2.0的版本,先学习学习吧 :)

 

项目框架

 PS:本来打算领域驱动模型的,但是我也是处于学习阶段,而且还是还没有入门,所以先打算弄一个简单三层的,然后再重构到领域模型。。积累还不够,努力学习ing

 

1、URMS.Model.EF我用的是EntityFramework 的基于数据库的CodeFirst模式生成的

2、URMS.UI.Web.Admin是用的MVC5

 

 

基于数据库的CodeFirst

 

 

 

把Meronic静态模板转换成MVC模板

 1、创建根布局页_Layout.cshtml

 1 <!DOCTYPE html>

 2 

 3 <!--

 4 

 5 Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 2.3.1

 6 

 7 Version: 1.3

 8 

 9 Author: KeenThemes

10 

11 Website: http://www.keenthemes.com/preview/?theme=metronic

12 

13 Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

14 

15 -->

16 <!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->

17 <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->

18 <!--[if !IE]> <html lang="en" class="no-js"> <![endif]-->

19 

20 <html>

21 <!-- BEGIN HEAD -->

22 <head>

23     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

24     <meta charset="utf-8" />

25     <meta name="viewport" content="width=device-width, initial-scale=1.0">

26     <meta content="Lyra | 天琴通用后台管理系统" name="description" />

27     <meta content="lyra" name="author" />

28     <title>@ViewBag.Title - Lyra | 天琴通用后台管理系统</title>

29     <!--BEGIN GLOBAL MANDATORY STYLES 全局样式加载-->

30     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

31     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />

32     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />

33     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style-metro.css")" rel="stylesheet" type="text/css" />

34     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style.css")" rel="stylesheet" type="text/css" />

35     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style-responsive.css")" rel="stylesheet" type="text/css" />

36     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/default.css")" rel="stylesheet" type="text/css" id="style_color" />

37     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/uniform.default.css")" rel="stylesheet" type="text/css" />

38     <!--END GLOBAL MANDATORY STYLES 全局样式加载-->

39     <!-- BEGIN PAGE LEVEL STYLES 页面级样式加载-->

40     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jquery.gritter.css")" rel="stylesheet" type="text/css" />

41     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/daterangepicker.css")" rel="stylesheet" type="text/css" />

42     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/fullcalendar.css")" rel="stylesheet" type="text/css" />

43     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jqvmap.css")" rel="stylesheet" type="text/css" media="screen" />

44     <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jquery.easy-pie-chart.css")" rel="stylesheet" type="text/css" media="screen" />

45     <!-- END PAGE LEVEL STYLES 页面级样式加载-->

46     <link rel="shortcut icon" href="@Url.Content("~/Plugins/metronic.bootstrap/image/favicon.ico")" />

47     @RenderSection("css", required: false)

48 </head>

49 

50 <body class="page-header-fixed">

51     @RenderBody()

52     <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>

53     <!-- BEGIN CORE PLUGINS -->

54     @*<script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-1.10.1.min.js")" type="text/javascript"></script>*@

55     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-migrate-1.2.1.min.js")" type="text/javascript"></script>

56     <!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

57     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-ui-1.10.1.custom.min.js")" type="text/javascript"></script>

58     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>

59 

60     <!--[if lt IE 9]>

61     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/excanvas.min.js")"></script>

62     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/respond.min.js")"></script>

63     <![endif]-->

64 

65     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.slimscroll.min.js")" type="text/javascript"></script>

66     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.blockui.min.js")" type="text/javascript"></script>

67     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.cookie.min.js")" type="text/javascript"></script>

68     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.uniform.min.js")" type="text/javascript"></script>

69     <!-- END CORE PLUGINS -->

70     <!-- BEGIN PAGE LEVEL SCRIPTS -->

71     <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/app.js")" type="text/javascript"></script>

72     <!-- END PAGE LEVEL SCRIPTS -->

73     <script type="text/javascript">

74         jQuery(document).ready(function () {

75             App.init(); // initlayout and core plugins

76         });

77     </script>

78     @RenderSection("scripts", required: false)

79 </body>

80 </html>
跟布局页代码

 2、创建带布局的视图页_LayoutHeader.cshtml 继承自_Layout.cshtml

  1 @{

  2     Layout = "~/Views/Shared/_Layout.cshtml";

  3 }

  4 <!-- BEGIN HEADER -->

  5 <div class="header navbar navbar-inverse navbar-fixed-top">

  6     <!-- BEGIN TOP NAVIGATION BAR -->

  7     <div class="navbar-inner">

  8         <div class="container-fluid">

  9             <!-- BEGIN LOGO -->

 10             <a class="brand" href="@Url.Action("Index","Home")">

 11                 <img src="@Url.Content("~/Plugins/metronic.bootstrap/image/logo.png")" alt="logo" />

 12             </a>

 13             <!-- END LOGO -->

 14             <!-- BEGIN RESPONSIVE MENU TOGGLER -->

 15             <a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">

 16                 <img src="@Url.Content("~/Plugins/metronic.bootstrap/image/menu-toggler.png")" alt="" />

 17             </a>

 18             <!-- END RESPONSIVE MENU TOGGLER -->

 19             <!-- BEGIN TOP NAVIGATION MENU -->

 20             <ul class="nav pull-right">

 21                 <!-- BEGIN NOTIFICATION DROPDOWN -->

 22                 <li class="dropdown" id="header_notification_bar">

 23                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">

 24                         <i class="icon-warning-sign"></i>

 25                         <span class="badge">6</span>

 26                     </a>

 27                     <ul class="dropdown-menu extended notification">

 28                         <li>

 29                             <p>你有6条新通知</p>

 30                         </li>

 31                         <li>

 32                             <a href="#">

 33                                 <span class="label label-success"><i class="icon-plus"></i></span>

 34                                 New user registered.

 35                                 <span class="time">Just now</span>

 36                             </a>

 37                         </li>

 38                         <li>

 39                             <a href="#">

 40                                 <span class="label label-important"><i class="icon-bolt"></i></span>

 41                                 Server #12 overloaded.

 42                                 <span class="time">15 mins</span>

 43                             </a>

 44                         </li>

 45                         <li>

 46                             <a href="#">

 47                                 <span class="label label-warning"><i class="icon-bell"></i></span>

 48                                 Server #2 not respoding.

 49                                 <span class="time">22 mins</span>

 50                             </a>

 51                         </li>

 52                         <li>

 53                             <a href="#">

 54                                 <span class="label label-info"><i class="icon-bullhorn"></i></span>

 55                                 Application error.

 56                                 <span class="time">40 mins</span>

 57                             </a>

 58                         </li>

 59                         <li>

 60                             <a href="#">

 61                                 <span class="label label-important"><i class="icon-bolt"></i></span>

 62                                 Database overloaded 68%.

 63                                 <span class="time">2 hrs</span>

 64                             </a>

 65                         </li>

 66                         <li>

 67                             <a href="#">

 68                                 <span class="label label-important"><i class="icon-bolt"></i></span>

 69                                 2 user IP blocked.

 70                                 <span class="time">5 hrs</span>

 71                             </a>

 72                         </li>

 73                         <li class="external">

 74                             <a href="#">See all notifications <i class="m-icon-swapright"></i></a>

 75                         </li>

 76                     </ul>

 77                 </li>

 78                 <!-- END NOTIFICATION DROPDOWN -->

 79                 <!-- BEGIN INBOX DROPDOWN -->

 80                 <li class="dropdown" id="header_inbox_bar">

 81                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">

 82                         <i class="icon-envelope"></i>

 83                         <span class="badge">5</span>

 84                     </a>

 85                     <ul class="dropdown-menu extended inbox">

 86                         <li>

 87                             <p>你有1条新消息</p>

 88                         </li>

 89                         <li>

 90                             <a href="#">

 91                                 <span class="photo"><img src="@Url.Content("~/Plugins/metronic.bootstrap/image/avatar2.jpg")" alt="" /></span>

 92                                 <span class="subject">

 93                                     <span class="from">Lisa Wong</span>

 94                                     <span class="time">Just Now</span>

 95                                 </span>

 96                                 <span class="message">

 97                                     Vivamus sed auctor nibh congue nibh. auctor nibh

 98                                     auctor nibh...

 99                                 </span>

100                             </a>

101                         </li>

102                     </ul>

103                 </li>

104                 <!-- END INBOX DROPDOWN -->

105                 <!-- BEGIN TODO DROPDOWN -->

106                 <li class="dropdown" id="header_task_bar">

107                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">

108                         <i class="icon-tasks"></i>

109                         <span class="badge">5</span>

110                     </a>

111                     <ul class="dropdown-menu extended tasks">

112                         <li>

113                             <p>你有12个待处理事务</p>

114                         </li>

115                         <li>

116                             <a href="#">

117                                 <span class="task">

118                                     <span class="desc">New release v1.2</span>

119                                     <span class="percent">30%</span>

120                                 </span>

121                                 <span class="progress progress-success ">

122                                     <span style="width: 30%;" class="bar"></span>

123                                 </span>

124                             </a>

125                         </li>

126                     </ul>

127                 </li>

128                 <!-- END TODO DROPDOWN -->

129                 <!-- BEGIN USER LOGIN DROPDOWN -->

130                 <li class="dropdown user">

131                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">

132                         <img alt="" src="@Url.Content("~/Plugins/metronic.bootstrap/image/avatar1_small.jpg")" />

133                         <span class="username">Bob Nilson</span>

134                         <i class="icon-angle-down"></i>

135                     </a>

136                     <ul class="dropdown-menu">

137                         <li><a href="extra_profile.html"><i class="icon-user"></i> My Profile</a></li>

138                         <li><a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>

139                         <li><a href="inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li>

140                         <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>

141                         <li class="divider"></li>

142                         <li><a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li>

143                         <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>

144                     </ul>

145                 </li>

146                 <!-- END USER LOGIN DROPDOWN -->

147             </ul>

148             <!-- END TOP NAVIGATION MENU -->

149         </div>

150     </div>

151     <!-- END TOP NAVIGATION BAR -->

152 </div>

153 <!-- END HEADER -->

154     @RenderBody()
Header布局视图代码

 3、创建布局视图页_LayoutContainer.cshtml 继承自_LayoutHeader.cshtml

 1 @{

 2     Layout = "~/Views/Shared/_LayoutHeader.cshtml";

 3 }

 4 <!-- BEGIN CONTAINER -->

 5 <div class="page-container">

 6     <!-- BEGIN SIDEBAR -->

 7     <div class="page-sidebar nav-collapse collapse">

 8         <!-- BEGIN SIDEBAR MENU -->

 9         <ul class="page-sidebar-menu">

10             <li>

11                 <!-- BEGIN SIDEBAR TOGGLER BUTTON -->

12                 <div class="sidebar-toggler hidden-phone"></div>

13                 <!-- END SIDEBAR TOGGLER BUTTON -->

14             </li>

15             <li>

16                 <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->

17                 <form class="sidebar-search">

18                     <div class="input-box">

19                         <a href="javascript:;" class="remove"></a>

20                         <input type="text" placeholder="搜索..." />

21                         <input type="button" class="submit" value=" " />

22                     </div>

23                 </form>

24                 <!-- END RESPONSIVE QUICK SEARCH FORM -->

25             </li>

26             <li class="start active ">

27 

28                 <a href="@Url.Action("Index","Home")">

29                     <i class="icon-home"></i>

30                     <span class="title">首页</span>

31                     <span class="selected"></span>

32                 </a>

33 

34             </li>

35         </ul>

36         <!-- END SIDEBAR MENU -->

37     </div>

38     <!-- END SIDEBAR -->

39     <!-- BEGIN PAGE -->

40     <div class="page-content">

41         @RenderBody()

42     </div>

43     <!-- END PAGE -->

44 </div>

45 <!-- END CONTAINER -->

46 <!-- BEGIN FOOTER -->

47 <div class="footer">

48     <div class="footer-inner">

49         2014[email protected] &copy;  Lyra | 天琴通用后台管理系统.

50     </div>

51     <div class="footer-tools">

52         <span class="go-top">

53             <i class="icon-angle-up"></i>

54         </span>

55     </div>

56 </div>

57 <!-- END FOOTER -->
代码

 4、修改_ViewStart.cshtml的代码为: Layout = "~/Views/Shared/_LayoutContainer.cshtml";

 5、到此基本的模板框架就搭建起来了,运行项目效果如下

 

结束语

 更新会比较慢,我也是边学边做的,^_^ 欢迎拍砖

 

 

 

你可能感兴趣的:(权限管理)