当前位置： 移动技术网 > IT编程>脚本编程>Python > 荐 用Django全栈开发——08. 使用AdminLTE开发前端登录页面

荐 用Django全栈开发——08. 使用AdminLTE开发前端登录页面

2020年07月22日  | 移动技术网IT编程  | 我要评论

大家好，这是皮爷给大家带来的最新的学习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进入到路径下：

在这里插入图片描述

好，目前我们看到的就是那个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步骤：

  1. 下载源码，打开Demo
  2. 找到页面，右键查看网页源码
  3. 在源码里面，按照Demo页面的HTML结构进行复制黏贴
  4. 修改资源引用路径，修复缺少的文件引用
  5. 完毕

整套教程源码获取，可以关注『皮爷撸码』，回复『peekpa.com』

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
在这里插入图片描述

本文地址：https://blog.csdn.net/gl891011/article/details/106613956

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网