在做一個django項目。導入外部css和js文件時，發現各種導入無效問題。記錄一下。
1、新建一個static文件夾，與app同目錄下。我的app名爲demo
2、在settings.py下添加路徑
STATIC_URL = '/static/'
STATICFILES_DIRS=(
os.path.join(BASE_DIR,'static'), #注意括號後面的還有個逗號
)
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
3、在settings.py文件裏看到如下添加：
4、在添加外部css和js文件之前，需要先在html頁面load 上面的staticfiles 。具體寫法參考如下：
<head>
<title>Event Delegation Tests</title>
{%load staticfiles%} <!--需要添加load staticfiles-->
<link rel="stylesheet" href="{% static 'css/div.css' %}"> <!--引入使用的css文件-->
{%block css%}
{%endblock css%} <!--在子模板添加css文件方式-->
</head>
<body>
<script src="{% static 'jquery/src/jquery.js' %}"></script> <!--引入jquery庫。必須放在js文件最前面，避免子模板出現$is not defined問題-->
{%block js%}
{%endblock js%} <!--在子模板添加js文件方式-->
</body>
5、子模板導入方式（load 和block js文件 和添加script頭部尾部），參考如下:
{% extends "./baset.html"%}
{%load staticfiles%}
{%block css%}
<style></style> <!--或外部css文件-->
{%endblock css%}
{%block js%}
<!--script之前加如下-->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--script-->
<script src="{% static 'jquery/src/jquery.js' %}"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("{% url 'test' %}",function(data){
alert("dssaf"+data.data)
});
});
$.ajaxSetup({
data: {csrfmiddlewaretoken:'{{ csrf_token }}'},
});
$('branchId').change(function(){
var branch_name = $("#branchId").find("option:selected").Text();
$.ajax({
type:"GET",
data:{"branch_name":branch_name},
url:"{% url 'test' %}",
cache:false,
dataType:json,
success:function(teList){
alert(teList);
},
error:function(){
alert('false');
}
});
});
});
</script>
<!--script之後加如下-->
<script>if (window.module) module = window.module;</script>
{%endblock js%}
6、每個人遇到的情況都可能不一樣，添加在線jquery庫感覺還是比較穩妥的。如上註釋部分
造成is not defined的情況可能是jquery庫還沒有加載進來，就開始使用（這種情況下，一般在chorm上可以看到jquery的路徑，說明路徑添加沒有問題的）。或者有可能版本沒有對齊。