0%

《Python Web开发从入门到实践》— Bug & Buffer 记录

如题,Bug & Buffer。

Static Files

问题描述: 网页无法找到static文件夹中的图片

解决方案:

1
2
3
4
5
6
settings.py 中:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = os.path.join(BASE_DIR, "static"), #添加此句,别忘了逗号

详细描述:

此问题大概是第四章才遇到,之前其实也“遇到过”,在head里有

1
2
3
4
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

但是我怎么换这些文件,首页样式就是不变,无奈换成了链接:

1
2
3
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

今天在第四章需要引用图片,一直报404,给我郁闷坏了,查了很多才了解到,settings.py中的static file有两个范围,STATIC_URL定义的是当前app中的static资源路径,而STATICFILES_DIRS定义的则是整个项目的static资源路径。

参考链接: django 静态资源配置详解管理静态文件 | Django 文档 | Django


Script标签放置位置

问题描述: script中的js代码无法生效

解决方案: 将目标script标签放置在需要操作的html标签的后面(相对位置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
原:
<script type="text/javascript">
$('#{{active_menu}}').addClass(" active");
</script>
<li class="nav-top" id="science">
<a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>

后:
<li class="nav-top" id="science">
<a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>
<script type="text/javascript">
$('#{{active_menu}}').addClass(" active");
</script>

参考链接: Script标签位置

<script> 加载顺序、使用方式的说明:

  1. type="text/javascript" 可加可不加,即使没有指定该属性,默认值也是它。
  2. <script> 有两种使用方式: 页面中嵌入javascript代码 和 引入外部javascript文件
  3. <script> 元素内部的代码会被从上到下依次解释。(在<script> 元素内部所有的代码解释完之前,页面其余内容都不会被浏览器加载和显示)
  4. <script> 元素在解析外部文件(包括下载)时,页面的处理也会暂停(同于解析内部代码)
  5. <script> 元素在引入外部文件(使用src)时,就不能再嵌入内部代码(<script></script>之间添加代码),否则嵌入的代码会被忽略

<script> 的解析顺序的说明:

  • 浏览器会按照 <script> 元素在页面中出现的先后顺序,对它们依次进行解析

    <script> 存放位置的说明:

  1. 传统做法,<script> 元素都应该放在页面的 <head> 元素中。(这种做法的目的是把所有的外部文件引用都放在一起,例如 CSS文件和Javascript文件)
  2. 但是,放在 <head> 元素中,就意味着必须等到全部的javascript代码都被下载、解析和执行完成以后,才能开始呈现页面内容。(因为浏览器在遇到 <body> 标签时才开始呈现内容)
  3. 因此,放在 <head> 元素中,容易出现较长时间的空白页面(因为呈现被阻塞,如果javascript代码需要很多的话)
  4. 所以,最终 <script> 元素一般都放在 <body> 标签中页面内容的后面(也就是 </body> 标签的前面)