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

时间：2014-11-13 00:32:24 阅读：427 评论：0 收藏：0 [点我收藏+]

标签：des style blog http io color ar os java

引言

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

项目框架

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

bubuko.com,布布扣

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

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

基于数据库的CodeFirst

bubuko.com,布布扣

把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布局视图代码

bubuko.com,布布扣

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-@DateTime.Now.Year &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";

bubuko.com,布布扣

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

bubuko.com,布布扣

结束语

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

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

标签：des style blog http io color ar os java

原文地址：http://www.cnblogs.com/ganqiyin/p/3953209.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行