专栏首页python3diango引入静态文件

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 条评论
登录 后参与评论

相关文章

  • 利用python处理网页信息

        在前几周的grep/sed/awk实战中提到,“和CoreSite - Any2 California接入商建立网络BGP邻居关系。从peeringdb...

    py3study
  • Python爬虫爬取豆瓣电影之数据提取值

    工具:Python 3.6.5、PyCharm开发工具、Windows 10 操作系统、谷歌浏览器

    py3study
  • python3中多重继承的问题

    本来以为多重继承很简单,但是多看了一些资料后发现还是挺复杂的。 如果继承情况简单就还比较好理解,但是如果继承的情况太过于复杂的话,python3 ...

    py3study
  • jQuery点击按钮,生成input输入框

    需求,点击添加按钮,生成input输入框,如果上一个输入框为空,则弹出提示框提示,若不为空,则生成一行input框。

    王小婷
  • 深入解析CSS样式优先级

    作为前端多多少少都会对CSS样式的权重有一定的了解。最常用的方法就是对不同的选择器分配不同的权重比,常见的就是

    踏浪
  • Todo List: 待办事项自定义分组 – 第三章

    有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义任务分组。

    Javanx
  • 移动端效果之CellSwiper

    写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中...

    糊糊糊糊糊了
  • jquery动态生成input,并且限制生成个数

    写一个小的demo,具体是点击添加按钮,会自动生成input输入框,并且根据要求限制生成的input输入框的个数。

    王小婷
  • 利用python处理网页信息

        在前几周的grep/sed/awk实战中提到,“和CoreSite - Any2 California接入商建立网络BGP邻居关系。从peeringdb...

    py3study
  • 框架的 总结(nop)------添加功能

    wfaceboss

扫码关注云+社区

领取腾讯云代金券