當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

AdminLTE

發(fā)布時間：2023/12/13 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了 AdminLTE 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

AdminLTE搭建前端

0 Asp.Net Core 項目實戰(zhàn)之權(quán)限管理系統(tǒng)（0）無中生有

1 Asp.Net Core 項目實戰(zhàn)之權(quán)限管理系統(tǒng)（1）使用AdminLTE搭建前端

2 Asp.Net Core 項目實戰(zhàn)之權(quán)限管理系統(tǒng)（2）實體設(shè)計

github源碼地址

0 布局頁、起始頁及錯誤頁

0.0 布局頁

使用布局頁相當于一個母版頁，可以將各個頁面公用部分，如上方標題區(qū)、左側(cè)導(dǎo)航菜單區(qū)、下方版權(quán)聲明及狀態(tài)顯示區(qū)以及通用的js及css引用等，集中放到布局頁管理，具體功能頁面只需關(guān)注自己獨有的界面元素系布局即可。

創(chuàng)建布局頁

在Views文件夾下新建一個Shared文件夾，文件夾下新建一個名稱為“_Layout.cshtml”的MVC視圖布局頁。

將_Layout.cshtml布局頁的內(nèi)容修改如下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <h1>這里是布局頁面的內(nèi)容，一般是統(tǒng)一的樣式、菜單等各個頁面共性部分</h1>
    <div>
        <!--當創(chuàng)建基于_Layout.cshtml布局頁面的視圖時，視圖的內(nèi)容會和布局頁面合并，視圖的內(nèi)容會渲染呈現(xiàn)在@RenderBody()處-->
        @RenderBody()
    </div>
</body>
</html>

布局頁的使用

使用布局頁，只需要指定頁面的Layout即可，我們以上節(jié)創(chuàng)建的Home下的Index.cshtml為例，只需在頁面上添加如下代碼即可。

@{ 
    //布局頁使用
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Hello,Asp.Net Core MVC</h1>

此時，我們運行程序，已經(jīng)成功使用了布局頁

0.1 起始頁

為了避免每個頁面都要指定Layout這種重復(fù)繁瑣的操作，MVC為我們提供了MVC視圖起始頁，我們只需添加一個視圖起始頁，并在視圖起始頁里面添加對布局頁的引用，即可達到所有頁面都使用布局頁的目的。

創(chuàng)建起始頁

右鍵Views文件夾，通過“添加->新建項”菜單添加一個名稱為“_ViewStart.cshtml”的MVC視圖起始頁。

起始頁的使用

在起始頁添加對布局頁的引用，修改_ViewStart.cshtml起始頁的內(nèi)容如下：

@{
    Layout = "_Layout";
}

現(xiàn)在將Home/Index.cshtml頁面頭部中對布局頁的引用部分代碼去掉，運行程序，已經(jīng)可以成功的使用布局頁。

布局頁的禁用

對于個別不需要使用統(tǒng)一布局頁的界面，如登錄界面、注冊界面，我們可以通過在頁面頭部添加以下代碼，禁止使用布局頁面。

@{
    Layout = null;
}

0.2 錯誤頁

開發(fā)環(huán)境錯誤頁

Asp.net Core為我們提供了統(tǒng)一的錯誤處理機制，在Startup.cs中的Configure方法中，已經(jīng)默認添加了以下開發(fā)環(huán)境的錯誤處理代碼。

if (env.IsDevelopment())
{
    //開發(fā)環(huán)境異常處理
    app.UseDeveloperExceptionPage();
}

我們將HomeController中的Index方法修改為直接拋出異常，進行測試。

public IActionResult Index()
{
    throw new Exception("異常");
    //return View();
}

直接開發(fā)環(huán)境調(diào)試運行，得到如下結(jié)果頁面，錯誤頁面上會提示詳細的錯誤信息，這有助于我們快速定位并解決異常信息。

生產(chǎn)環(huán)境錯誤頁

在生產(chǎn)環(huán)境我們一般不會將上述頁面直接呈現(xiàn)給我們的客戶，而是選擇制作一個提示友好的錯誤頁。我們首先修改Startup.cs中Configure方法，添加對生產(chǎn)環(huán)境的錯誤處理。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole();

    if (env.IsDevelopment())
    {
        //開發(fā)環(huán)境異常處理
        app.UseDeveloperExceptionPage();
    }
    else                     
    {
        //生產(chǎn)環(huán)境異常處理
        app.UseExceptionHandler("/Shared/Error");
    }
    //使用靜態(tài)文件
    app.UseStaticFiles();
    //使用Mvc，設(shè)置默認路由
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

在Controllers文件夾下創(chuàng)建一個包含如下內(nèi)容，名稱為SharedController的控制器。

public class SharedController : Controller
 {
     // GET: /<controller>/
     public IActionResult Error()
     {
         return View();
     }
 }

在Shared文件下創(chuàng)建一個名稱為Error.cshtml的錯誤頁面，將Error.cshtml的內(nèi)容修改為如下代碼：

<p>我是一個界面灰常友好漂亮的錯誤頁。</p>

模擬生產(chǎn)環(huán)境運行程序（具體方法參看上一篇使用Kestrel服務(wù)運行程序的第二種方法，或直接發(fā)布部署到IIS上），結(jié)果如下：

1 使用Bower管理器管理前端包

使用Bower管理器管理前端包，類似于使用NuGet管理我們的各種依賴類庫，他的好處是，我們可以根據(jù)需要很方便的對我們引用的各種前端插件進行實時更新，Visual Studio 也會根據(jù)Bower的配置文件自動還原相關(guān)前端包的依賴。

使用Bower管理器

右鍵我們的項目，添加一個Bower配置文件。

Bower管理器添加項目可以通過直接修改Bower.json文件，或者使用可視化的管理器界面兩種方式。以添加我們后續(xù)必不可少的bootstrap、font-awesome、icheck前端程序包引用為例。

1 直接修改Bower.json

右鍵Bower管理器，選擇打開Bower.json，添加相關(guān)的依賴項。

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.6",
    "font-awesome": "4.6.1"
  }
}

2 使用Bower可視化管理器

右鍵Bower管理器，選擇“管理Bower程序包”。搜索我們需要的包，單擊安裝即可。

通過Bower管理器添加的前端程序包，會自動放在wwwroot下的lib文件夾下。

2 靜態(tài)文件

前面說過Asp.net Core所有的請求管道配置都是在Startup.cs的Configure中，上面我們已經(jīng)添加了bootstrap、font-awesome、icheck等前端包的引用，如果我們不對靜態(tài)文件配置進行處理，當頁面中引用相關(guān)css/js/images時，瀏覽器會告訴你找不到資源，我們需要在http請求管道中開啟靜態(tài)文件配置。

在project.json中添加Microsoft.AspNetCore.StaticFiles的依賴，默認已經(jīng)有了，如果沒有自己添加即可

"dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",

    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
    "Microsoft.Extensions.Logging.Console": "1.0.0",
    "Microsoft.AspNetCore.Mvc": "1.0.0",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0"
  },

在Startup.cs的Configure方法中增加如下代碼即可。

//使用靜態(tài)文件
app.UseStaticFiles();

3 使用AdminLTE

AdminLTE是一個完全響應(yīng)管理模板。基于Bootstrap3框架，易定制模板。適合多種屏幕分辨率，從小型移動設(shè)備到大型臺式機。內(nèi)置了多個頁面，包括儀表盤、郵箱、日歷、鎖屏、登錄及注冊、404錯誤、500錯誤等頁面。最重要的是它是開源免費的，我們可以盡情的使用它。目前的最新版本是2.3.6，可以自行去搜索AdminLTE，官網(wǎng)下載使用。

3.0 將AdminLTE相關(guān)核心文件添加至項目

在wwwroot下添加js、css、images三個文件夾。

1 將/AdminLTE-2.3.6/dist/js下的app.js及app.min.js兩個文件拷貝至wwwroot/js文件夾下。

2 將/AdminLTE-2.3.6/dist/css下的所有文件拷貝至wwwroot/css文件夾下。

3 將/AdminLTE-2.3.6/dist/img下的所有文件拷貝至wwwroot/images文件夾下。

3.1 _Layout.cshtml布局頁面修改

添加AdminLTE相關(guān)css及js引用

<head>
    <title>權(quán)限管理系統(tǒng)</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="~/css/AdminLTE.css">
    <!--皮膚-->
    <link rel="stylesheet" href="~/css/skins/skin-blue.css">
</head>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/app.js"></script>

修改菜單部門代碼

<ul class="sidebar-menu">
     <li class="header">權(quán)限管理</li>
     <!-- Optionally, you can add icons to the links -->
     <li class="active"><a href="#"><i class="fa fa-link"></i> <span>組織機構(gòu)</span></a></li>
     <li><a href="#"><i class="fa fa-link"></i> <span>角色管理</span></a></li>
     <li><a href="#"><i class="fa fa-link"></i> <span>用戶管理</span></a></li>
     <li><a href="#"><i class="fa fa-link"></i> <span>功能管理</span></a></li>
     <li><a href="#"><i class="fa fa-link"></i> <span>權(quán)限管理</span></a></li>
     @*<li class="treeview">
         <a href="#">
             <i class="fa fa-link"></i> <span>Multilevel</span>
             <span class="pull-right-container">
                 <i class="fa fa-angle-left pull-right"></i>
             </span>
         </a>
         <ul class="treeview-menu">
             <li><a href="#">Link in level 2</a></li>
             <li><a href="#">Link in level 2</a></li>
         </ul>
     </li>*@
 </ul>

完整代碼請從github獲取。

此時運行我們的程序，主頁面已經(jīng)變得比較漂亮了。

3.2 登錄界面

1 創(chuàng)建控制器

在Contrllers文件夾下添加LoginController控制器

2 創(chuàng)建登錄界面視圖

在Views文件夾下新建Login文件夾，在Login文件夾下新增登錄界面Index.cshtml，修改為不使用布局頁，整體界面代碼如下：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>系統(tǒng)登錄</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="~/css/AdminLTE.css">
    <link rel="stylesheet" href="~/lib/iCheck/skins/square/blue.css">
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a  target="_blank"><b>Fonour</b></a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg">權(quán)限管理系統(tǒng)</p>
            <form action="/Home/Index" method="post">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="用戶名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" placeholder="密碼">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox"> 記住我
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button type="submit" class="btn btn-primary btn-block btn-flat">登錄</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/lib/iCheck/icheck.js"></script>
    <script>
        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>
</body>
</html>

3 將登陸頁面修改為默認頁面

修改Startup.cs的Configure方法，設(shè)置默認路由為系統(tǒng)登錄。

//使用Mvc，設(shè)置默認路由為系統(tǒng)登錄
 app.UseMvc(routes =>
 {
     routes.MapRoute(
         name: "default",
         template: "{controller=Login}/{action=Index}/{id?}");
 });

運行系統(tǒng)，默認進入登錄界面。

單擊登錄按鈕，已經(jīng)可以跳轉(zhuǎn)進入系統(tǒng)首頁。

4 總結(jié)

本次我們主要創(chuàng)建了系統(tǒng)通用的布局頁、起始頁及錯誤頁，然后使用Bower管理器對系統(tǒng)前端依賴程序包進行了添加，配置啟用靜態(tài)文件，最后使用AdminLTE實現(xiàn)了系統(tǒng)登錄頁及主界面的布局。

作者：Fonour
出處：http://fonour.cnblogs.com/

總結(jié)

以上是生活随笔為你收集整理的AdminLTE的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

AdminLTE

上一篇： picturectrl控件中加载图片并显
下一篇： ping网关丢包_网络/摄像机丢包的原因