Django<加载static目录下的CSS-JS>

来源：互联网发布：oracle导出数据库命令编辑：程序博客网时间：2024/05/19 17:48

博主之前没有接触过Django,最近有一个项目需求要做一个可视化的展示，但是一直无法加载static文件下的JS和CSS，经过一番折腾，最后终于搞定了。下面是完整的过程：

1.我的项目结构：

这里写图片描述

2.在与settings.py文件的统计目录下，新建static文件夹，然后在新建两个子目录（static_dirs、static_root）,然后在settings.py文件中添加以下代码：

STATIC_URL = '/static/'STATIC_ROOT = os.path.join(BASE_DIR, 'mysite', 'static', 'static_root')STATICFILES_DIRS = (    os.path.join(BASE_DIR, 'mysite', 'static', 'static_dirs'),)

3.在pycharm的终端中运行shell

 python manage.py collectstatic

这里写图片描述
不出意外的话，static/static_root下会多出这么写文件

这里写图片描述

接下来将需要使用到的js和css文件放到对应的目录下，如下图：

这里写图片描述

在html中引入这些js、css

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    {% load static %}    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}">    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>    <script src="{% static 'js/bootstrap.js' %}"></script></head><body><!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><!-- 信息警告消息的上下文按钮 --><button type="button" class="btn btn-info">信息按钮</button><!-- 表示应谨慎采取的动作 --><button type="button" class="btn btn-warning">警告按钮</button><!-- 表示一个危险的或潜在的负面动作 --><button type="button" class="btn btn-danger">危险按钮</button><!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --><button type="button" class="btn btn-link">链接按钮</button><table class="table">    <caption>基本的表格布局</caption>   <thead>      <tr>         <th>名称</th>         <th>城市</th>      </tr>   </thead>   <tbody>      <tr>         <td>Tanmay</td>         <td>Bangalore</td>      </tr>      <tr>         <td>Sachin</td>         <td>Mumbai</td>      </tr>   </tbody></table></body></html>

然后重启App, 观察浏览器的效果，可以看到效果已经加载进来了：
这里写图片描述

至此，相应的文件已经加载进来了。待我有时间好好学一学Django之后，再来解释其中的奥秘。

阅读全文

0 0