用Django全栈开发——08. 使用AdminLTE开发前端登录页面
大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，在Django中集成AdminLTE。
这一章节，我们将会介绍一个非常好用的东西，他叫Adminlte。
官方地址：https://adminlte.io/
在线Demo地址：https://adminlte.io/themes/AdminLTE/index2.html
最新Demo地址（我们就是要继承这个）：https://adminlte.io/themes/v3/index3.html
可以看到这个是一个很完美的Dashboard框架，我们今天就要把这个东西集成到我们的网站里面，一起来跟我做吧。
下载源码
既然要集成这个东西，我们首先就要找到他的源码。源码很简单，就在首页有个Download按钮，点进去之后，就会跳转到Github里面，我们这里选择下载它最新的AdminLTE 3.0.4版本（如果你看到此文的时候，可能AdminLTE的最新版本不是3.0.4，请不用担心，本文所讲的东西，如果不发生重大变化，依然是可以在最新版本上面使用的）：
点击下面的Source Code.zip下载：
下载好之后，打开文件，是这个样子的：
可以看到这个文件夹里面有index1.html, index2.html和index3.html三个文件，其实这三个文件就是对应的Dashboard v1，Dashboard v2和Dashboard v3这三个页面，我们随便点击开一个，这里点击的index3.html，就是以下界面：
这个不就是之前官网的在线Demo。随后我们要找到登录页面，就在左侧的Extras底下的Login：
点击开，整个登录页面长这个样子：
下一步我们就把这个网页集成到我们的系统里。
集成代码
集成这个网页到我们的系统，首先在templates目录下创建Login.html：
然后我们启动gulp，将URL进入到index.html路径下：
好，目前我们看到的就是那个login.html文件里面的内容。
接下来，我们就先来到AdminLTE的Login页面，右键点击“查看网页源码”：
进入到网页源码的页面，其实这里面的代码，就在路径：…/AdminLTE-3.0.4/pages/examples/login.html 下。
我们把这部分网页源码复制黏贴到我们的Login.html文件中，然后在gulp的帮助下，看一下前端变成了什么样子：
看到为什么右边我们的样式和原版的不一样呢？这个现象我们在之前的文章用Django全栈开发——06. 为前端引入Bootstrap框架中提到过，因为我们没有导入CSS文件。我们这个时候返回头看一下Login.html文件，发现有以下代码：
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body>
<!-- 省略内容 -->
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
</body>
我们看到这里面的src，都是绝对路径，正式因为绝对路径，我们都没有导入这些东西，所以我们的网页显示的就有问题。
解决问题很简单，我们只需要把上面缺失的内容导入就可以了。
由于文件比较多，我们这里就以第一个Font Awesome为例。其他的文件导入过程基本和这个是一样的。
首先看到Font Awesome的路径是“…/…/plugins/fontawesome-free/css/all.min.css”
那么，我们就在下载好的文件夹对应的目录里面去看这个文件：
那么我们就直接把这个文件夹复制黏贴到我们的工程里，在dict目录下，创建adminlte路径，然后将这些确实的文件考入到这个目录下：
全部都复制黏贴下来之后，我们再修改之前的路径，由“…/…/plugins/fontawesome-free/css/all.min.css”改为“…/dist/adminlte/plugins/fontawesome-free/css/all.min.css”，这样，我们将之前全部的修改成下面的这样：
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="../dist/adminlte/plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../dist/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/adminlte/dist/css/adminlte.min.css">
</head>
<body>
<!-- 省略内容 -->
<!-- jQuery -->
<script src="../dist/adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../dist/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/adminlte/dist/js/adminlte.min.js"></script>
</body>
修改完毕之后，我们就会惊奇的发现，我们的页面变成了这样：
我们可以看到页面变成了和Demo一模一样的样子。这样就说嘛，迁移登录页面成功了。
接下来我们要结合我们项目自己的特色，来做一些修改，修改完成，登录页面将会变成这个样子：
技术总结
最后总结一下，
集成AdminLTE的Login步骤：
- 下载源码，打开Demo
- 找到页面，右键查看网页源码
- 在源码里面，按照Demo页面的HTML结构进行复制黏贴
- 修改资源引用路径，修复缺少的文件引用
- 完毕
整套教程源码获取，可以关注『皮爷撸码』，回复『peekpa.com』
长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
本文地址：https://blog.csdn.net/gl891011/article/details/106613956