ABP+AdminLTE+Bootstrap Table許可權管理系統第九節--AdminLTE引入及模板頁和佈局和選單
AdminLTE
首先去官網下載包下來,然後引入專案.
然後我們在web層新增區域Admin以及Common,關於AdminLTE的地址我們放在Common路勁下面.
在Common下新增LayoutController控制器.
Layout
這裡選單我們先不管,在後面的章節我在加上,首先是_Layout頁程式碼:
1 @{ 2 Layout = null; 3 } 4 5 @using System.Web.Optimization 6 @{ 7 List<JCmsErp.Menu.Menus> sidebarMenuDataList = ViewBag.SidebarMenuModel;View Code8 } 9 <!DOCTYPE html> 10 <html> 11 <head> 12 <meta charset="UTF-8" /> 13 <title>AdminLTE 2 | Dashboard</title> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 <script src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jQuery/jQuery-2.1.4.min.js"></script> 16 17 <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 18 <!-- Bootstrap 3.3.4 --> 19 <script src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/js/bootstrap.js"></script> 20 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/css/bootstrap.css" rel="stylesheet" /> 21 <!-- FontAwesome 4.3.0 --> 22 <!-- Ionicons 2.0.0 --> 23 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/ionicons.min.css" rel="stylesheet" type="text/css" /> 24 <!-- Theme style --> 25 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> 26 <!-- AdminLTE Skins. Choose a skin from the css/skins 27 folder instead of downloading all of them to reduce the load. --> 28 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" /> 29 <!-- iCheck --> 30 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" /> 31 <!-- Morris chart --> 32 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/morris/morris.css" rel="stylesheet" type="text/css" /> 33 <!-- jvectormap --> 34 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" /> 35 <!-- Date Picker --> 36 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" /> 37 <!-- Daterange picker --> 38 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /> 39 <!-- bootstrap wysihtml5 - text editor --> 40 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> 41 42 <!-- ./wrapper --> 43 <!-- REQUIRED JS SCRIPTS --> 44 <!-- jQuery 2.2.3 --> 45 46 47 <style type="text/css"> 48 body { 49 font-family: verdana,helvetica,arial,sans-serif; 50 padding: 0 !important; 51 margin: 0; 52 } 53 54 .content { 55 min-height:700px; height:auto!important; 56 } 57 </style> 58 59 </head> 60 61 <body class="hold-transition skin-blue sidebar-mini"> 62 <div class="wrapper"> 63 @Html.Action("_MainHeader", "Layout", new { area = "Common" }) 64 @Html.Action("_LeftSideMenus", "Layout", new { area = "Common" }) 65 66 <div class="content-wrapper"> 67 @RenderBody() 68 </div> 69 @Html.Action("_MainFooter", "Layout", new { area = "Common" }) 70 <div class="control-sidebar-bg"></div> 71 </div> 72 </body> 73 </html>
這裡總的模板頁.以後在其他地方引用的話就引用這個頁面.
頭部頁面
接下來是頭部頁面:
1 @{ 2 Layout = null; 3 } 4 5 <header class="main-header"> 6 <!-- Logo --> 7 <a href="@Url.Action("Index", "Home", new { area="Common"})" class="logo"> 8 <!-- mini logo for sidebar mini 50x50 pixels --> 9 <span class="logo-mini"><b>RMS</b></span> 10 <!-- logo for regular state and mobile devices --> 11 <span class="logo-lg"><b>WY</b>RMS</span> 12 </a> 13 <!-- Header Navbar --> 14 <nav class="navbar navbar-static-top" role="navigation"> 15 <!-- Sidebar toggle button--> 16 <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> 17 <span class="sr-only">Toggle navigation</span> 18 </a> 19 <!-- Navbar Right Menu --> 20 <div class="navbar-custom-menu"> 21 <ul class="nav navbar-nav"> 22 <!-- Messages: style can be found in dropdown.less--> 23 <li class="dropdown messages-menu"> 24 <!-- Menu toggle button --> 25 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 26 <i class="fa fa-envelope-o"></i> 27 <span class="label label-success">4</span> 28 </a> 29 <ul class="dropdown-menu"> 30 <li class="header">You have 4 messages</li> 31 <li> 32 <!-- inner menu: contains the messages --> 33 <ul class="menu"> 34 <li> 35 <!-- start message --> 36 <a href="#"> 37 <div class="pull-left"> 38 <!-- User Image --> 39 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="img-circle" alt="User Image"> 40 </div> 41 <!-- Message title and timestamp --> 42 <h4> 43 Support Team 44 <small><i class="fa fa-clock-o"></i> 5 mins</small> 45 </h4> 46 <!-- The message --> 47 <p>Why not buy a new awesome theme?</p> 48 </a> 49 </li><!-- end message --> 50 </ul><!-- /.menu --> 51 </li> 52 <li class="footer"><a href="#">See All Messages</a></li> 53 </ul> 54 </li><!-- /.messages-menu --> 55 <!-- Notifications Menu --> 56 <li class="dropdown notifications-menu"> 57 <!-- Menu toggle button --> 58 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 59 <i class="fa fa-bell-o"></i> 60 <span class="label label-warning">10</span> 61 </a> 62 <ul class="dropdown-menu"> 63 <li class="header">You have 10 notifications</li> 64 <li> 65 <!-- Inner Menu: contains the notifications --> 66 <ul class="menu"> 67 <li> 68 <!-- start notification --> 69 <a href="#"> 70 <i class="fa fa-users text-aqua"></i> 5 new members joined today 71 </a> 72 </li><!-- end notification --> 73 </ul> 74 </li> 75 <li class="footer"><a href="#">View all</a></li> 76 </ul> 77 </li> 78 <!-- Tasks Menu --> 79 <li class="dropdown tasks-menu"> 80 <!-- Menu Toggle Button --> 81 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 82 <i class="fa fa-flag-o"></i> 83 <span class="label label-danger">9</span> 84 </a> 85 <ul class="dropdown-menu"> 86 <li class="header">You have 9 tasks</li> 87 <li> 88 <!-- Inner menu: contains the tasks --> 89 <ul class="menu"> 90 <li> 91 <!-- Task item --> 92 <a href="#"> 93 <!-- Task title and progress text --> 94 <h3> 95 Design some buttons 96 <small class="pull-right">20%</small> 97 </h3> 98 <!-- The progress bar --> 99 <div class="progress xs"> 100 <!-- Change the css width attribute to simulate progress --> 101 <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 102 <span class="sr-only">20% Complete</span> 103 </div> 104 </div> 105 </a> 106 </li><!-- end task item --> 107 </ul> 108 </li> 109 <li class="footer"> 110 <a href="#">View all tasks</a> 111 </li> 112 </ul> 113 </li> 114 <!-- User Account Menu --> 115 <li class="dropdown user user-menu"> 116 <!-- Menu Toggle Button --> 117 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 118 <!-- The user image in the navbar--> 119 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="user-image" alt="User Image"> 120 <!-- hidden-xs hides the username on small devices so only the image appears. --> 121 <span class="hidden-xs">管理員</span> 122 </a> 123 <ul class="dropdown-menu"> 124 <!-- The user image in the menu --> 125 <li class="user-header"> 126 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="img-circle" alt="User Image"> 127 <p> 128 管理員 - Web Developer 129 <small>Member since 2015.8.20</small> 130 </p> 131 </li> 132 <!-- Menu Body --> 133 <li class="user-body"> 134 <div class="col-xs-4 text-center"> 135 <a href="#">Followers</a> 136 </div> 137 <div class="col-xs-4 text-center"> 138 <a href="#">Sales</a> 139 </div> 140 <div class="col-xs-4 text-center"> 141 <a href="#">Friends</a> 142 </div> 143 </li> 144 <!-- Menu Footer--> 145 <li class="user-footer"> 146 <div class="pull-left"> 147 <a href="#" class="btn btn-default btn-flat">個人資訊</a> 148 </div> 149 <div class="pull-right"> 150 <a href="@Url.Action("Logout", "Login", new { Area="Common"})" class="btn btn-default btn-flat">退出</a> 151 </div> 152 </li> 153 </ul> 154 </li> 155 156 </ul> 157 </div> 158 </nav> 159 </header>View Code
頭部是要是導航欄裡面的東西包括使用者退出功能也在這裡.
選單
接下來是選單,選單我還沒有設計資料庫,會在接下來的章節說明.先寫死:
1 @model JCmsErp.Web.Areas.Common.Models.MeunViewModel 2 @{ 3 Layout = null; 4 } 5 6 7 <aside class="main-sidebar"> 8 <!-- sidebar: style can be found in sidebar.less --> 9 <section class="sidebar"> 10 <!-- Sidebar user panel (optional) --> 11 <div class="user-panel"> 12 <div class="pull-left image"> 13 <img src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> 14 </div> 15 <div class="pull-left info"> 16 <p>Alexander Pierce</p> 17 <!-- Status --> 18 <a href="#"><i class="fa fa-circle text-success"></i> Online</a> 19 </div> 20 </div> 21 <!-- search form (Optional) --> 22 <form action="#" method="get" class="sidebar-form"> 23 <div class="input-group"> 24 <input type="text" name="q" class="form-control" placeholder="Search..."> 25 <span class="input-group-btn"> 26 <button type="submit" name="search" id="search-btn" class="btn btn-flat"> 27 <i class="fa fa-search"></i> 28 </button> 29 </span> 30 </div> 31 </form> 32 <!-- /.search form --> 33 <!-- Sidebar Menu --> 34 <ul class="sidebar-menu"> 35 <li class="header">HEADER</li> 36 <!-- Optionally, you can add icons to the links --> 37 <li class="active"><a href="/User/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>使用者管理</span></a></li> 38 <li><a href="/WorkFlow/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>職位管理</span></a></li> 39 <li><a href="/Member/Role/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>角色管理</span></a></li> 40 <li class="active"><a href="/Home/Userinfo"><i class="fa fa-windows"></i> <span>使用者詳情</span></a></li> 41 <li class="active"><a href="/Home/UsersList"><i class="fa fa-windows"></i> <span>角色管理</span></a></li> 42 <li class="active"><a href="/Home/AbpLanguages"><i class="fa fa-windows"></i> <span>會員管理</span></a></li> 43 <li><a href="/Home/ReadMail"><i class="fa fa-link"></i> <span>郵件管理</span></a></li> 44 <li><a href="/Home/UserProfile"><i class="fa fa-link"></i> <span>語言管理</span></a></li> 45 <li><a href="/Home/ChartJS"><i class="fa fa-link"></i> <span>Chart管理</span></a></li> 46 <li class="treeview"> 47 <a href="/Home/ChartJS"> 48 <i class="fa fa-link"></i> <span>選單管理</span> 49 <span class="pull-right-container"> 50 <i class="fa fa-angle-left pull-right"></i> 51 </span> 52 </a> 53 <ul class="treeview-menu"> 54 <li><a href="/Home/ChartJS">Link in level 2</a></li> 55 <li><a href="/Home/ChartJS">Link in level 2</a></li> 56 </ul> 57 </li> 58 </ul> 59 <!-- /.sidebar-menu --> 60 </section> 61 <!-- /.sidebar --> 62 </aside>View Code
Foot
最後是Foot:
1 @{ 2 Layout = null; 3 } 4 5 <footer class="main-footer"> 6 <!-- To the right --> 7 <div class="pull-right hidden-xs"> 8 Anything you want 9 </div> 10 <!-- Default to the left --> 11 <strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved. 12 </footer> 13 <aside class="control-sidebar control-sidebar-dark"> 14 <!-- Create the tabs --> 15 <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> 16 <li class="active"><a href="相關推薦
ABP+AdminLTE+Bootstrap Table許可權管理系統第九節--AdminLTE引入及模板頁和佈局和選單
AdminLTE 首先去官網下載包下來,然後引入專案. 然後我們在web層新增區域Admin以及Common,關於AdminLTE的地址我們放在Common路勁下面. 在Common下新增LayoutController控制器. Layout 這裡選單我們先不管,在後
ABP+AdminLTE+Bootstrap Table許可權管理系統第七節--登入邏輯及幾種abp封裝的Javascript函式庫
簡介 經過前幾節,我們已經解決資料庫,模型,DTO,控制器和注入等問題.那麼再來看一下登入邏輯.這裡算是前面幾節的一個初次試水. 首先我們資料庫已經有的相應的資料. 新增Login方法 模型和DTO已經建好,所以我們直接在服務層新增Login方法就可
ABP+AdminLTE+Bootstrap Table許可權管理系統第十節--AdminLTE模板選單處理
AdminLTE選單 上節我們把佈局頁,也有的臨時的選單,但是選單不是應該動態載入的麼?,所以我們這節來寫選單.首先我們看一下AdminLTE原始碼裡面的選單以及結構. <aside class="main-sidebar"> <!--
ABP+AdminLTE+Bootstrap Table許可權管理系統第四節--倉儲,服務,服務介面及依賴注入
AbpModule 在ABP框架中,倉儲,服務,這塊算是最為重要一塊之一了.ABP框架提供了建立和組裝模組的基礎，一個模組能夠依賴於另一個模組,一個程式集可看成一個模組, 一個模組可以通過一個類來定義這個模組，而給定義這個類要繼承自已經瘋轉好的AbpModule..net通過反射來獲取這些程
ABP+AdminLTE+Bootstrap Table許可權管理系統第六節--abp控制器擴充套件及json封裝
一,控制器AbpController 說完了Swagger ui 我們再來說一下abp對控制器的處理和json的封裝. 首先我們定義一個控制器,在新增控制器的時候,控制器會自動繼承自AbpController,AbpController
ABP+AdminLTE+Bootstrap Table許可權管理系統第十一節--Bootstrap Table使用者管理列表以及Module Zero之使用者管理
使用者實體 使用者實體代表應用的一個使用者，它派生自AbpUser類，如下所示： public class User : AbpUser<Tenant, User> { //add your own user properties here
ABP+AdminLTE+Bootstrap Table許可權管理系統第三節--abp分層體系,實體相關及ABP模組系統
ABP模組系統 說了這麼久,還沒有詳細說到abp框架,abp其實基於DDD(領域驅動設計)原則的細看分層如下: 再看我們專案解決方案如下: JCmsErp.Application,應用層:進行展現層與領域層之間的協調，協調業務物件來執行特定的應用程式的任務。它不包含業務邏輯,主要包
ABP+AdminLTE+Bootstrap Table許可權管理系統第八節--ABP錯誤機制及AbpSession相關
((ClaimsPrincipal)Thread.CurrentPrincipal).Claims.FirstOrDefault(c => c.Type == ClaimTypes.NameIdentifier); 需要獲取會話資訊則必須實現IAbpSession介面。雖然你
ABP+AdminLTE+Bootstrap Table許可權管理系統第一節--使用ASP.NET Boilerplate模板建立解決方案
ABP+AdminLTE+Bootstrap Table許可權管理系統一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate-Project-CMS 前往部落格園總目錄
ABP+AdminLTE+Bootstrap Table許可權管理系統一期
初衷 學而時習之,不亦說乎,溫顧溫知新,可以為師矣. 看懂遠不如動手去做,動手做才能發現很多自己不懂的問題,不斷的反思和總結,“樂於分享是一種境界的突破”。" 分享是很有意思，也是可以鍛鍊人的。 分享意味著自我的不斷淨化提升，不給自己後退的餘地。為什麼這麼說呢？因為：一，分
ABP+AdminLTE+Bootstrap Table許可權管理系統第二節--在ABP的基礎做資料庫指令碼處理
第一點,上一篇文章中我們講到codefirst中一些問題包括如圖，codefirst在每次執行命令的時候會生成新的類，後來會越來越多。 1,codefirst在執行的資料庫遷移過程中產生了很多檔案,對於強迫症的我而言特別不爽,這些其實是可以不用生成的。 2,在codefirst實際
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十三節--RBAC模式及ABP許可權管理（附贈福利）
角色訪問控制（RBAC） 角色訪問控制（RBAC）應該是目前用得最多也是關注最多的許可權管理模型了。 許可權（Permission）與角色（Role）相關聯，使用者（User）通過成為適當角色的成員而得到這些角色的許可權。這就極大地簡化了許可權的管理。 RBAC引入了角色（Role）概念，目的應該是解耦了P
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十四節--後臺工作者HangFire與ABP框架Abp.Hangfire及擴充套件
HangFire與Quartz.NET相比主要是HangFire的內建提供整合化的控制檯,方便後臺檢視及監控，對於大家來說，比較方便。 HangFire是什麼 Hangfire是一個開源框架（.NET任務排程框架），可以幫助您建立，處理和管理您的後臺作業，處理你不希望放入請求處理管道的操作： 通知/通訊;
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十七節--Quartz與ABP框架Abp.Quartz及擴充套件
Quartz簡介 Quartz.NET是一個開源的作業排程框架，是 OpenSymphony 的 Quartz API 的.NET移植，它用C#寫成，可用於winform和asp.net應用中。它提供了巨大的靈活性而不犧牲簡單性。你能夠用它來為執行一個作業而建立簡單的或複雜的排程。它有很多特徵，如：資料庫支
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十六節--SignalR與ABP框架Abp.Web.SignalR及擴充套件
SignalR簡介 SignalR是什麼？ ASP.NET SignalR 是為 ASP.NET 開發人員提供的一個庫，可以簡化開發人員將實時 Web 功能新增到應用程式的過程。實時 Web 功能是指這樣一種功能：當所連線的客戶端變得可用時伺服器程式碼可以立即向其推送內容，而不是讓伺服器等待客戶端請求新的資
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十二節--小結,Bootstrap Table之角色管理以及module-zero角色管理
寫在前面的話 很多人說ABP不適合高併發大型,有一定的道理,但是我覺得還是可以的,就看架構師的能力了,我之前公司就是ABP絕對百萬資料級專案,是一個線上教育網站,涉及到平臺,學院,院系,班級,課程,學生等,一個平臺多少大學,一個大學多少院系,一個院系多少班級多少課程,其負責程度一
ABP module-zero +AdminLTE+Bootstrap Table+jQuery許可權管理系統第十五節--快取小結與ABP框架專案中 Redis Cache的實現
快取 為什麼要用快取 為什麼要用快取呢，說快取之前先說使用快取的優點。 減少寄宿伺服器的往返呼叫（round-trips）。 如果快取在客戶端或是代理，將減少對伺服器的請求，減少頻寬。 減少對資料庫伺服器的往返呼叫（round-trips）。 當內容快取在web伺服器，能夠減輕對資料庫的請求。 減少網路
Spring Boot + Spring Cloud 實現許可權管理系統 後端篇（十八）：服務註冊和發現（Consul）
什麼是 Consul Consul 是 HashiCorp 公司推出的開源工具，用於實現分散式系統的服務發現與配置。與其它分散式服務註冊與發現的方案，Consul 的方案更“一站式”，內建了服務註冊與發現框架、分佈一致性協議實現、健康檢查、Key/Value 儲存、多資料中心方案，不再需要依賴其它工具（比如
SpringSecurity許可權管理系統實戰—三、主要頁面及介面實現
## 系列目錄 [SpringSecurity許可權管理系統實戰—一、專案簡介和開發環境準備](https://www.cnblogs.com/codermy/p/13516372.html) [SpringSecurity許可權管理系統實戰—二、日誌、介面文件等實現](https://www.cnblogs
SpringSecurity許可權管理系統實戰—九、資料許可權的配置
## 目錄 [SpringSecurity許可權管理系統實戰—一、專案簡介和開發環境準備](https://www.cnblogs.com/codermy/p/13516372.html) [SpringSecurity許可權管理系統實戰—二、日誌、介面文件等實現](https://www.cnblogs.c