测试开发之Django——No4.Django中前端框架的配置与添加
我们在开发一个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，用来存放这些静态资源。
第二步，把前端模板中的静态资源文件，移动到静态资源的文件夹目录下。
第三步，安装django中支持bootstrap的扩展包，这个扩展包的版本，取决于你使用的模板匹配的版本。
pip install django-bootstrap3 或者 pip install django-bootstrap4
然后把扩展包配置到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的标签语言中，就给我们提供了相对应的一些标签。
让我们一起来了解一下相关的标签吧，先看一下代码。
{% 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
详情可以加入黎梦课堂交流群来提问或者探讨，欢迎各种有志之士加入我们。每周末也会有腾讯课堂的公开课来讲解一些知识。
QQ群号：823625453
