輕量級權限管理系統——后台模板

本文轉載自查看原文 2014-11-12 23:32 3556 C#/ ASP.NET/ .NET/ 權限管理系統/ MVC

引言

最近在學習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-@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";

5、到此基本的模板框架就搭建起來了，運行項目效果如下

結束語

更新會比較慢，我也是邊學邊做的，^_^ 歡迎拍磚

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 輕量級權限管理系統(renren-security) eh-admin一套前后端一體的輕量級后台管理系統 renren-security v2.0.0，輕量級權限管理系統 vue3后台管理系統（模板）一套簡單通用的Java后台管理系統(SpringBoot +Security + Layui實現一套權限管理后台模板) 分享一套輕量級的停車管理系統源碼 SpringBoot : 輕量級城鎮道路養護信息管理系統 vue后台管理系統——權限管理模塊基於thinkphp的后台管理系統模板快速搭建開源免費且優秀的后台管理系統模板整理