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

时间：2018-11-05 19:19:49 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：url 函数 ast login laptop amp 部分没有 title

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

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

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

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

技术分享图片

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

技术分享图片

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

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

先打开页面的代码

<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，用来存放这些静态资源。

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

第三步，根据静态资源文件在项目中的路径，在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的标签语言中，就给我们提供了相对应的一些标签。

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

{% 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

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

标签：url 函数 ast login laptop amp 部分没有 title

原文地址：https://www.cnblogs.com/AngesZhu/p/9910295.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

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