欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-27 10:58:34
大家好,这是皮爷给大家带来的最新的学习Python能干啥?之Django教程,从零开始,到最后成功部署上线的项目。这一节,在Django中集成AdminLTE。Peekpa.com的官方地址:http://peekpa.com这一章节,我们将会介绍一个非常好用的东西,他叫Adminlte。官方地址:https://adminlte.io/在线Demo地址:https://adminlte.io/themes/AdminLTE/index2.html最新Demo地址(我们就是要继承这个):http...

大家好,这是皮爷给大家带来的最新的学习Python能干啥?之Django教程,从零开始,到最后成功部署上线的项目。这一节,在Django中集成AdminLTE。

这一章节,我们将会介绍一个非常好用的东西,他叫Adminlte。

官方地址:https://adminlte.io/

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

在线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,请不用担心,本文所讲的东西,如果不发生重大变化,依然是可以在最新版本上面使用的):

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

点击下面的Source Code.zip下载:

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

下载好之后,打开文件,是这个样子的:

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

可以看到这个文件夹里面有index1.html, index2.html和index3.html三个文件,其实这三个文件就是对应的Dashboard v1,Dashboard v2和Dashboard v3这三个页面,我们随便点击开一个,这里点击的index3.html,就是以下界面:

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

这个不就是之前官网的在线Demo。随后我们要找到登录页面,就在左侧的Extras底下的Login:

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

点击开,整个登录页面长这个样子:

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

下一步我们就把这个网页集成到我们的系统里。

集成代码

集成这个网页到我们的系统,首先在templates目录下创建Login.html:

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

然后我们启动gulp,将URL进入到index.html路径下:

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

好,目前我们看到的就是那个login.html文件里面的内容。

接下来,我们就先来到AdminLTE的Login页面,右键点击“查看网页源码”:

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

进入到网页源码的页面,其实这里面的代码,就在路径:…/AdminLTE-3.0.4/pages/examples/login.html 下。

我们把这部分网页源码复制黏贴到我们的Login.html文件中,然后在gulp的帮助下,看一下前端变成了什么样子:

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

看到为什么右边我们的样式和原版的不一样呢?这个现象我们在之前的文章用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”

那么,我们就在下载好的文件夹对应的目录里面去看这个文件:

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

那么我们就直接把这个文件夹复制黏贴到我们的工程里,在dict目录下,创建adminlte路径,然后将这些确实的文件考入到这个目录下:

用Django全栈开发——08. 使用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>

修改完毕之后,我们就会惊奇的发现,我们的页面变成了这样:

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

我们可以看到页面变成了和Demo一模一样的样子。这样就说嘛,迁移登录页面成功了。

接下来我们要结合我们项目自己的特色,来做一些修改,修改完成,登录页面将会变成这个样子:

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

技术总结

最后总结一下,

集成AdminLTE的Login步骤:

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

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

长按下图二维码关注,如文章对你有启发,欢迎在看与转发。
用Django全栈开发——08. 使用AdminLTE开发前端登录页面

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