diango引入静态文件

发布时间:2018-06-17 17:01:39编辑:admin阅读(4712)

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


关键字