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/

效果如下:

点击注册按钮之后,页面下方展示数据部分

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,就可以完美解决这个问题!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(四):简易留言簿基础开发

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

45350
来自专栏wblearn

代码提示插件Spket

Spket是一个可以在Eclipse及MyEclipse中实现JavaScript代码自动提示、自动校验、自动纠错的插件。

12710
来自专栏高性能服务器开发

用Visual Studio调试linux程序

用Visual Studio调试linux程序?你真的没看错,这个是真的,不是标题党。当然如果你说VS2015及以上版本自带的linux调试插件,那就算了。这些...

64860
来自专栏JAVA技术站

JDoc1.0发布 文档生成利器 原

JDoc是基于JAVA开发的,针对主流web框架做的接口文档生成利器,只需极简配置就可以实现文档的生成,且对项目零入侵,主要目的是解决协作开发中接口文档及时更新...

12820
来自专栏肖洒的博客

Web(一):概述

学Python也有一段时间了,学完基本语法后整个人都蒙了。没有什么可以来练手,感觉什么也不会。 准备主攻爬虫和Web。 昨晚学长刚给讲了MVC,回来看到Pyt...

9620
来自专栏程序员的知识天地

程序员常用开发工具配置,给自己留一手!

修改D:javaenvapache-tomcat-7.0.26confserver.xml

12910
来自专栏晓晨的专栏

Jenkins 集群搭建

Jenkins是当下比较流行的一款功能强大的持续集成工具,它支持搭建集群,来提高多项目的构建速度,模式为主从模式,master会将任务分配到各个从节点进行并发构...

16210
来自专栏IT杂记

Pandoc安装实现Markdown转PDF (CentOS6)

Pandoc简介 pandoc 是一种文档标记语言转换工具,可实现不同文档标记语言间的格式转换,由Haskell语言编写,以命令行的形式实现与用户的交互,可支持...

38760
来自专栏拂晓风起

搭建SVN服务器, VisualSvn Server 和 备份

24640
来自专栏Web项目聚集地

什么是跨域?解决方案有哪些?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

82820

扫码关注云+社区

领取腾讯云代金券