用Django全栈开发——09. 集成AdminLTE的Dashboard页面

title.jpeg

上一讲中，我们已经将AdminLTE中的Login例子搬到了我们的项目中，那么这一节，我们则是需要将AdminLTE的Dashboard集成进来。

需求分析

为什么要继承AdminLTE的Dashboard呢？原因很简单，你看AdminLTE它长的样子：

001.png

这不就是个控制台吗？我们的网站是需要一个CMS(Content Management System)控制系统的。现在有现成的，我们就集成呗，而且，这个东西集成了之后，对以后的开发也是很有好处的，到之后的内容，我们就会看到。

挑选页面

首先我们来简单分析一下我们要继承的页面内容。

我们肯定是想来弄一个类似中控台的页面，这个中控台，大致有这么几个部分：

左侧的菜单栏，这个是最关键的；
右侧的内容页面，针对每一个菜单中的选项，都有一个页面与之对应；
顶部菜单栏；

开始集成

接下来，我们就该将AdminLTE集成到系统里了。

首先，同样是在templates文件夹下创建一个叫Dashboard.html的文件。这个和上节课刚开始集成Login的时候的步骤是一样的。

接着，我们来到已经下载好的AdminLTE文件中，打开任意一个index.html文件，会在浏览器里面看到AdminLTE的样子。

我们既然要集成，那么就得找到代码，这个简单，我们就直接在AdminLTE页面右键查看网页源码：

002.png

既然已经找到源码，那么我们就来一步一步的复制黏贴呗。

head标签

首先是head标签，因为head标签一般是来保存网页基本元信息的，所以我们这里也先把这一部分标签的代码黏贴过来：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

同样，这里直接黏贴不做处理，还是会丢失很多东西，和上节课的问题是一样的，当然，解决方法也和上节课一样，我们稍后在做资源的引入工作，我们先把代码黏贴过来，

NavBar

顶部的NavBar，在Demo中长这个样子：

003.png

看到源码里面接下来的部分就是顶部的Navbar了，这个我们也先黏贴过来，一定要注意我们黏贴时候的结构不要发生改变，Navbar是在Body标签之下的，而且Body标签还有Class，不要忘记黏贴。

由于这里我们不需要Navbar那么多信息，所以可以适当删减一些。把最右侧的通知按钮删掉，只留下左侧的链接和搜索：

<!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index3.html" class="nav-link">Home</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Contact</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

    </nav>

SideBar

接下来就是左侧的SideBar了，这是个重头戏：

004.png

这部分在网页源码里面，是有aside关键字的，但是这里面的东西我们不全用，所以复制黏贴的时候，我们会删减一些，只留下最基本的东西，在以后，随着系统开发，我们会逐渐增加回来。

同样，复制黏贴的时候，要注意代码结构，不要乱套：

<!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="https://via.placeholder.com/100x100" alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item has-treeview menu-open">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                Dashboard
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="./index.html" class="nav-link active">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v1</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./index2.html" class="nav-link">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v2</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-header">EXAMPLES</li>
                    <li class="nav-item">
                        <a href="pages/gallery.html" class="nav-link">
                            <i class="nav-icon far fa-image"></i>
                            <p>
                                Gallery
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

正文内容

接下来就是右侧的主页面了，因为左侧不同的tab对应不同页面，所以右边的这个其实算是个容器。这个在源码中的关键字则是content-wrapper，我们只需要把最外层的div移植进来就好。

 <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row d-flex justify-content-around pt-4 mb-4">
                    <p class="h5">公众号『皮爷撸码』，连载更新此系统的开发教程，敬请关注</p>
                </div>
                <div class="row d-flex justify-content-around">
                    <img class="img-thumbnail" src="../src/images/pylm-qrcode.jpg" alt="">
                </div>
            </div>
        </section>
    </div>

footer

接下来就会发现右侧主页面，每一个页面都有一个footer，源码中的关键字就是footer，我们这里也不需要，所以就不黏贴了，如果有需要的同学，可以自行黏贴，依照上文所讲述的内容，这个自行黏贴的过程完全可以当成小练习来做。

Script

Script内容，一般实在</body>之前，整体body内容的最后，这里面主要包含了网页中所有的JavaScript代码，你也可以将script部分放到header中，如果那样做，那么就会影响网页打开的速度，因为网页是先加载head中的内容，在开始渲染body的，将一些script代码放到body中，可以让浏览器提前渲染body的内容，再加载script代码。提高一定的速度。

这部分黏贴，同样需要将所有确实的引用改为相对地址：

<!-- jQuery -->
<script src="../dist/adminlte/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->

<!-- Bootstrap 4 -->
<script src="../dist/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="../dist/adminlte/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../dist/adminlte/plugins/sparklines/sparkline.js"></script>
<!-- jQuery Knob Chart -->
<script src="../dist/adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../dist/adminlte/plugins/moment/moment.min.js"></script>
<script src="../dist/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../dist/adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../dist/adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="../dist/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/adminlte/dist/js/adminlte.js"></script>

上面的是已经修复好的链接，并且我已经将那些缺失的东西复制黏贴到了dist目录下的adminlte文件夹下。同样，别忘了修改上文提到的head里面的路径问题

005.png

好了，至此我们就将AdminLTE的Dashboard集成到了我们的系统里面，如果你每一步都认真操作的话，最后我们的界面会长这个样子：

006.png

是不是很酷炫？将来我们就在这里面来填充内容。

技术总结

最后总结一下，

集成AdminLTE的Dashboard步骤：

下载源码，打开Demo
右键查看网页源码
在源码里面，按照Demo页面的HTML结构进行复制黏贴
修改head和script路径，修复缺少的文件引用
完毕。

底部图片.png