测试开发之Django——No4.Django中前端框架的配置与添加

时间：2023-03-08 20:05:48
测试开发之Django——No4.Django中前端框架的配置与添加

我们在开发一个web项目的时候，虽然我们不是专业开发，但是我们也想要做出来一个美美的前端页面。

这种时候，百度上铺天盖地的前端框架就是我们的最好选择了。

当然，在网上直接下载的框架，我们是不能直接用的，所以本篇介绍一下我们怎么样来修改这个模板

首先，我们先下载一个免费的模板。

测试开发之Django——No4.Django中前端框架的配置与添加

我们可以看到他的目录结构，用浏览器打开index.html文件之后可以看到模板的样式。

测试开发之Django——No4.Django中前端框架的配置与添加

这样我们就可以想要哪个地方，复制哪个地方，到我们的代码里面了。给我们节省了很多编写前端的时间。

那么我们来看一下这个模板我们要怎么去做。

先打开页面的代码

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  <!-- Font Awesome -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

  <!-- Ionicons -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <!-- Theme style -->

  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">

  <!-- AdminLTE Skins. Choose a skin from the css/skins

       folder instead of downloading all of them to reduce the load. -->

  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

  <!-- iCheck -->

  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">

  <!-- Morris chart -->

  <link rel="stylesheet" href="plugins/morris/morris.css">

  <!-- jvectormap -->

  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">

在这里我们可以看到，index.html这个页面，加载了很多css和样式文件，而这些加载样式文件的方式，都是用的相对地址。

我们要说的第一点，就是外链链接，也可以说是静态/动态资源，这些资源包含css、js、图片等等资源地址。

为什么不能在django中直接使用相对地址呢，这个我在尝试添加的时候发现，例如你的页面地址是index.html，那么你添加了相对地址的这些链接地址，都会在你的相对地址前面添加一个/index/。

这就导致了这些模板我们是不能直接拿来使用的。

这种时候，就要用到Django中对于前端的标签语言。

第一步，首先在我们的django项目的根目录中，新建一个文件夹，文件夹名称为static，用来存放这些静态资源。

第二步，把前端模板中的静态资源文件，移动到静态资源的文件夹目录下。

第三步，安装django中支持bootstrap的扩展包，这个扩展包的版本，取决于你使用的模板匹配的版本。

pip install django-bootstrap3

或者

pip install django-bootstrap4　　

然后把扩展包配置到django项目中：

测试开发之Django——No4.Django中前端框架的配置与添加

第四步，根据静态资源文件在项目中的路径，在setting中配置静态资源路径。

STATIC_URL = '/static/'

STATIC_ROOT = '/static/'

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

第五步，修改html文件中的外链链接。

{% load static %}

  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

如代码：

{ % load static % }  ------ 加载静态资源

外链链接 href src 之类的，都可以用这种模式去改。

{ % static '静态文件存放的路径' % }   这个路径，就是你拷贝过来的static目录下面的路径

这里的路径不包含static，是static之后的部分

/PycharmProjects/TestNo1/static/js/demo.js

/PycharmProjects/TestNo1/static/ 部分，不需要加入

需要加入的相对地址是：js/demo.js

这样修改完之后，可以打开谷歌浏览器的开发者工具，选择Network标签，再刷新页面查看加载情况。

测试开发之Django——No4.Django中前端框架的配置与添加

如图，我们修改完静态资源加载链接的页面，就可以正常添加样式显示在我们的网站里啦！

每一个网站，很多都有一个自己固定显示的导航栏，和一些基础模块的显示。

那么这些模块，我们是不是可以单独拿出来，放到另外的一个地方，而不用每一个页面打开的时候都要去写这块的内容呢。

答案当然是可以的。

Django的标签语言中，就给我们提供了相对应的一些标签。

让我们一起来了解一下相关的标签吧，先看一下代码。

{% load static %}

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{{ title }}</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">

    {% include 'layout/_link_css.html' %}

    {% block css %} {% endblock %}

</head>

<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">

    <!-- Left side column. contains the logo and sidebar -->

    {% include 'layout/_header.html' %}

    {% include 'layout/_left_sitebar.html' %}

    <!-- Content Wrapper. Contains page content -->

    <div class="content-wrapper">

    {% block content %}{% endblock %}

    </div>

    {% include 'layout/_footer.html' %}

    <div class="control-sidebar-bg"></div>

</div>

{% include 'layout/_link_js.html' %}

{% block js %}{% endblock %}

</body>

</html>

这是通过上面模板而改出来的横着最上面的导航，和左侧最左边的导航，再加上底部的信息模板。

我们可以看的出来，他首先加载了静态资源文件。

然后在head标签中，导入了css；

在body中，加载了header、侧边导航、底部信息；

而在最后，加载了js；

我们可以分开看一下这一块的代码。

{% include 'layout/_link_css.html' %}

　　文件内容：

{% load static %}

  <!-- Bootstrap 3.3.6 -->

  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

  <!-- Font Awesome -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

  <!-- Ionicons -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <!-- Theme style -->

  <link rel="stylesheet" href="{% static 'css/AdminLTE.min.css' %}">

  <!-- AdminLTE Skins. Choose a skin from the css/skins

       folder instead of downloading all of them to reduce the load. -->

  <link rel="stylesheet" href="{% static 'css/skins/_all-skins.min.css' %}">

  <!-- iCheck -->

  <link rel="stylesheet" href="{% static 'plugins/iCheck/flat/blue.css' %}">

  <!-- Morris chart -->

  <link rel="stylesheet" href="{% static 'plugins/morris/morris.css' %}">

  <!-- jvectormap -->

  <link rel="stylesheet" href="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.css' %}">

  <!-- Date Picker -->

  <link rel="stylesheet" href="{% static 'plugins/datepicker/datepicker3.css'%}">

  <!-- Daterange picker -->

  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">

  <!-- bootstrap wysihtml5 - text editor -->

  <link rel="stylesheet" href="{% static 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css' %}">

　　

{% include 'layout/_header.html' %}

　　文件内容：

{% load static %}

<!-- Main Header -->

<header class="main-header">

    <!-- Logo -->

    <a href="index2.html" class="logo">

        <!-- mini logo for sidebar mini 50x50 pixels -->

        <span class="logo-mini"><b>A</b>LT</span>

        <!-- logo for regular state and mobile devices -->

        <span class="logo-lg"><b>Admin</b>LTE</span>

    </a>

    <!-- Header Navbar: style can be found in header.less -->

    <nav class="navbar navbar-static-top">

        <!-- Sidebar toggle button-->

        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">

            <span class="sr-only">Toggle navigation</span>

        </a>

        <div class="navbar-custom-menu">

            <ul class="nav navbar-nav">

                <!-- User Account: style can be found in dropdown.less -->

                <li class="dropdown user user-menu">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        <img src="{% static 'img/user2-160x160.jpg' %}" class="user-image" alt="User Image">

                        <span class="hidden-xs">Alexander Pierce</span>

                    </a>

                    <ul class="dropdown-menu">

                        <!-- User image -->

                        <li class="user-header">

                            <img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

                            <p>

                                Alexander Pierce - Web Developer

                                <small>Member since Nov. 2012</small>

                            </p>

                        </li>

                        <!-- Menu Body -->

                        <li class="user-body">

                            <div class="row">

                                <div class="col-xs-4 text-center">

                                    <a href="#">Followers</a>

                                </div>

                                <div class="col-xs-4 text-center">

                                    <a href="#">Sales</a>

                                </div>

                                <div class="col-xs-4 text-center">

                                    <a href="#">Friends</a>

                                </div>

                            </div>

                            <!-- /.row -->

                        </li>

                        <!-- Menu Footer-->

                        <li class="user-footer">

                            <div class="pull-left">

                                <a href="#" class="btn btn-default btn-flat">Profile</a>

                            </div>

                            <div class="pull-right">

                                <a href="#" class="btn btn-default btn-flat">Sign out</a>

                            </div>

                        </li>

                    </ul>

                </li>

                <!-- Control Sidebar Toggle Button -->

            </ul>

        </div>

    </nav>

</header>>

　　

{% include 'layout/_left_sitebar.html' %}

　　文件内容：

{% load static %}

  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->

    <section class="sidebar">

      <!-- Sidebar user panel -->

      <div class="user-panel">

        <div class="pull-left image">

          <img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

        </div>

        <div class="pull-left info">

          <p>Alexander Pierce</p>

          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>

        </div>

      </div>

      <!-- search form -->

      <form action="#" method="get" class="sidebar-form">

        <div class="input-group">

          <input type="text" name="q" class="form-control" placeholder="Search...">

              <span class="input-group-btn">

                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>

                </button>

              </span>

        </div>

      </form>

      <!-- /.search form -->

      <!-- sidebar menu: : style can be found in sidebar.less -->

      <ul class="sidebar-menu">

        <li class="header">MAIN NAVIGATION</li>

        <li class="active treeview">

          <a href="#">

            <i class="fa fa-dashboard"></i> <span>测试用例库</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li class="active"><a href="../index.html"><i class="fa fa-circle-o"></i>接口</a></li>

            <li><a href="/index/"><i class="fa fa-circle-o"></i>UI</a></li>

          </ul>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-files-o"></i>

            <span>Layout Options</span>

            <span class="pull-right-container">

              <span class="label label-primary pull-right">4</span>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>

          </ul>

        </li>

        <li>

          <a href="#">

            <i class="fa fa-th"></i> <span>Widgets</span>

            <span class="pull-right-container">

              <small class="label pull-right bg-green">new</small>

            </span>

          </a>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-pie-chart"></i>

            <span>Charts</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>

          </ul>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-laptop"></i>

            <span>UI Elements</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> General</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Icons</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Modals</a></li>

          </ul>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-edit"></i> <span>Forms</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>

          </ul>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-table"></i> <span>Tables</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>

          </ul>

        </li>

        <li>

          <a href="#">

            <i class="fa fa-calendar"></i> <span>Calendar</span>

            <span class="pull-right-container">

              <small class="label pull-right bg-red">3</small>

              <small class="label pull-right bg-blue">17</small>

            </span>

          </a>

        </li>

        <li>

          <a href="#">

            <i class="fa fa-envelope"></i> <span>Mailbox</span>

            <span class="pull-right-container">

              <small class="label pull-right bg-yellow">12</small>

              <small class="label pull-right bg-green">16</small>

              <small class="label pull-right bg-red">5</small>

            </span>

          </a>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-folder"></i> <span>Examples</span>

            <span class="pull-right-container">

              <i class="fa fa-angle-left pull-right"></i>

            </span>

          </a>

          <ul class="treeview-menu">

            <li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Profile</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Login</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Register</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a></li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a></li>

          </ul>

        </li>

        <li class="treeview">

          <a href="#">

            <i class="fa fa-share"></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="#"><i class="fa fa-circle-o"></i> Level One</a></li>

            <li>

              <a href="#"><i class="fa fa-circle-o"></i> Level One

                <span class="pull-right-container">

                  <i class="fa fa-angle-left pull-right"></i>

                </span>

              </a>

              <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>

                <li>

                  <a href="#"><i class="fa fa-circle-o"></i> Level Two

                    <span class="pull-right-container">

                      <i class="fa fa-angle-left pull-right"></i>

                    </span>

                  </a>

                  <ul class="treeview-menu">

                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>

                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>

                  </ul>

                </li>

              </ul>

            </li>

            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>

          </ul>

        </li>

        <li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li>

        <li class="header">LABELS</li>

        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>

        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>

        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>

      </ul>

    </section>

    <!-- /.sidebar -->

  </aside>

　　

 {% include 'layout/_footer.html' %}

　　文件内容：

  <!-- /.content-wrapper -->

  <footer class="main-footer">

    <div class="pull-right hidden-xs">

      <b>Version</b> 2.3.12

    </div>

    <strong>Copyright © 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights

    reserved.

  </footer>

　

{% include 'layout/_link_js.html' %}

　　文件内容：

{% load static %}

  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<!-- jQuery 2.2.3 -->

<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>

<!-- jQuery UI 1.11.4 -->

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!-- Bootstrap 3.3.6 -->

<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

<!-- Morris.js charts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<script src="{% static 'plugins/morris/morris.min.js' %}"></script>

<!-- Sparkline -->

<script src="{% static 'plugins/sparkline/jquery.sparkline.min.js' %}"></script>

<!-- jvectormap -->

<script src="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js' %}"></script>

<script src="{% static 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js' %}"></script>

<!-- jQuery Knob Chart -->

<script src="{% static 'plugins/knob/jquery.knob.js' %}"></script>

<!-- daterangepicker -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>

<!-- datepicker -->

<script src="{% static 'plugins/datepicker/bootstrap-datepicker.js' %}"></script>

<!-- Bootstrap WYSIHTML5 -->

<script src="{% static 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js' %}"></script>

<!-- Slimscroll -->

<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>

<!-- FastClick -->

<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>

<!-- AdminLTE App -->

<script src="{% static 'js/app.min.js' %}"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->

<script src="{% static 'js/pages/dashboard.js' %}"></script>

<!-- AdminLTE for demo purposes -->

<script src="{% static 'js/demo.js' %}"></script>

　　

这是我们整个前端导航模板的一些代码，可以拿来做一些参考。

这个时候有小伙伴就会问了，这里还有标签没有讲呀。

    {% include 'layout/_link_css.html' %}

    {% block css %} {% endblock %}

没错，就是这两个标签语言。

第一个include，很容易大家理解，就是导入，意为把相对链接中html文件中的内容导入到include的位置上。

第二个block css，

block标签，相当于一个函数，css是对该函数的命名，开发者可自行命名，在一个模板中添加多个block标签，每个block标签的命名不能有相同的。

在使用时，我们可以在代码中添加跟这个相同的标签，然后在中间，写上需要改变或添加的元素

模板写完之后，就是一个使用了。这个模板我们编辑完之后，要怎么去使用呢？

这里要引入另外一个标签：{ % extends 'base.html' %}

在需要使用这个模板的文件开头，写好这个标签的内容，就可以继承这个模板中的内容了！

是不是在做web网站的时候一个很棒的模板呢！

详情可以加入黎梦课堂交流群来提问或者探讨，欢迎各种有志之士加入我们。每周末也会有腾讯课堂的公开课来讲解一些知识。

QQ群号：823625453