Python后端Flask、Django分别如何在html模板中引入css、js等static资源

问题描述：

之前一直做的前端，写页面的时候像css、js这些资源都是href=“”或src=“”等直接引入就可以了；在学习pyhton后端框架flask和django时就会遇到渲染html页面时资源无效，才知道是需要做一些修改的，在此做个笔记。

方法：

• Flask中

  像原本的：

  <link rel="stylesheet" href="../stnatic/bootstrap/css/bootstrap.mi.css">
  <script src="../static/js/html5shiv.js"></script>
  

  需要改成：

  <link rel="stylesheet" href="{{url_for('static',filename='../stnatic/bootstrap/css/bootstrap.mi.css')}}">
  <script src="{{url_for('static',filename ='../static/js/html5shiv.js')}}"></script>
  

  即将src = “ xxx ” 换成 src= “ {{ url_for ( ’ static ’ , filename = ’ xxx ’ ) }} ”

• Django中

  1. 在django project中创建 static文件夹

  2. settings.py中配置要在 STATIC_URL = ‘/static/’ 下边加上

     STATICFILES_DIRS = [

     ​ os.path.join(BASE_DIR, ‘static’),

     ]

     或

     STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)

  3. 前端引入

     方法一：

     ​ 在页面的较上处写：

     ​ {% load static（后面不加files，加上报错）%}

     ​ 在 link script 等src 改 ：

     ​ {%static ‘xxx.css’%}

     ​ {%static ‘xxx.js’%}

     ​ {%static ‘xxx.jpg/png’%}

     ​ 记得加 ‘ ’

     方式二：

     ​ 在 link script 等src 写 ：

     ​ /static/xxx.cs

     两者可混用，但不推荐