diango引入静态文件
web开发需要使用到css和javascript文件,才能让网页展示比较好看。下面介绍在Django框架中引入这些静态文件，来实现一个bootstrap网页。
首先，在你建立的工程的根目录中建立一个static文件夹，用来存放css，js和图片等静态文件。css和js文件已经放到对应目录了。
目录结构如下：
mysite/
├── blog
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── models.py
│ └── views.py
├── manage.py
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── static
│ ├── css
│ │ └── bootstrap.min.css
│ ├── images
│ └── js
│ ├── bootstrap.min.js
│ └── jquery-3.3.1.min.js
└── templates
└── index.html然后进入工程文件夹mysite，打开settings.py文件,找到最后一行，有STATIC_URL的位置，进行如下配置：
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,"static"),
)STATICFILES_DIRS 表示配置静态目录，Django 就能自动找到放在里面的静态文件。
基于上一篇文档，修改templates目录下的index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--适用于移动设备，禁止页面缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<script src='../static/js/jquery-3.3.1.min.js'></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../static/js/bootstrap.min.js"></script>
<title>Title</title>
<style>
.col-center-block {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!--正文-->
<div class="container">
<div class="row">
<div class="col-md-6 col-center-block">
<!--面板-->
<!--panel-success显示绿色-->
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title text-center">注册</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/userInfo/" method="post">
<div class="form-group">
<label for="inputUser1" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" name="username" class="form-control" id="inputUser1" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="inputPassword1" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success text-left">注册</button>
</div>
</div>
</form>
{#判断列表有数据的情况下#}
{% if user_list %}
<hr/>
<h2>数据展示</h2>
<!--面板-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">标签</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
{#使用for循环遍历列表#}
{% for i in user_list %}
<tr>
{#展示数据#}
<td>{{i.username}}</td>
<td>{{i.password}}</td>
<td>{{i.email}}</td>
</tr>
{#结束for循环#}
{% endfor %}
</tbody>
</table>
</div>
</div>
{#一定要写结束符#}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</body>
</html>启动mysite项目，访问页面
http://127.0.0.1:8000/userInfo/
效果如下：
blob.png
点击注册按钮之后，页面下方展示数据部分
blob.png
STATIC_URL为增强可移植性，在模板中可以用：STATIC_URL来代替具体的/static/来设置资源路径。
举例：
修改settings.py文件，将STATIC_URL修改为abc
STATIC_URL = '/abc/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,"static"),
)将index.html的head部分的static替换为abc
<!-- Bootstrap -->
<script src='../abc/js/jquery-3.3.1.min.js'></script>
<link href="../abc/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../abc/js/bootstrap.min.js"></script>再次访问网页，也是正常的。
因为diango利用前缀STATIC_URL的具体内容,来映射STATICFILES_DIRS, 那么它就可以找到具体的文件。
比如前台页面的静态资源路径，一般都是写死了,可能涉及到几百个网页。网站在运营过程中，难免后台服务器，需要做迁移工作，可能和之前的存储路径不一样的。这个时候，让前端去改几百个网页，是一个很繁杂的工作。现在只需要修改STATIC_URL，就可以完美解决这个问题！！！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-06-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读