??本文將詳細(xì)講述如何在Django中配置靜態(tài)文件芥吟，如圖片（images）,JavaScript,CSS等侦铜。
??我們將要實(shí)現(xiàn)的網(wǎng)頁(yè)如下：
當(dāng)按下按鈕“Change Text”時(shí)，圖片下方的“Good morning!”會(huì)變成“Good night!”.再次按下時(shí)钟鸵，則會(huì)變成“Good morning!”钉稍，如此循環(huán)往復(fù)地變化。如下圖所示：
??首先在'/home/vagrant/django_project'下新建Django項(xiàng)目staticFilesTest,在該項(xiàng)目中新建APP為myapp,命令行代碼如下：
cd ~/django_project
django-admin.py startproject staticFilesTest
cd ./staticFilesTest
django-admin.py startapp myapp
??配置settings.py文件棺耍，如下：
- 添加應(yīng)用：在“INSTALLED_APPS”中添加'myapp';
- 設(shè)置模板路徑：在"TEMPLATES"中的“DIRS”中添加“/home/vagrant/django_project/staticFilesTets/myapp/”
- 在“STATIC_URL = '/static/'”后添加代碼
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
??在myapp文件夾下贡未，新建index.html文件，這是我們創(chuàng)建的網(wǎng)頁(yè)頁(yè)面的模板蒙袍。代碼如下：
<html>
<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/my.css' %}" />
<script type="text/javascript" src="{% static 'myapp/changeText.js' %}"></script>
</head>
<body>
<h1>Hello Django!</h1>
<img src="{% static "myapp/django.jpg" %}" alt="My image"/>
<p id="text">Good morning!</p>
<button type="button" onclick="change()">Change Text</button>
</body>
</html>
??編輯views.py文件俊卤，代碼如下：（顯然，這僅僅只是一個(gè)簡(jiǎn)單的例子而已~）
from django.shortcuts import render_to_response
def index(request):
return render_to_response('index.html')
??在myapp文件夾下新建static文件夾害幅，在static文件夾下新建myapp文件夾消恍，在此myapp文件夾下，放置的文件如下：
其中my.css中的代碼如下：
h1 {
color: red;
text-align: left;
font-size: 20pt;
}
p {margin-left: 20px;}
changeText.js中的代碼如下：
function change(){
var word = document.getElementById("text");
if(String(word.innerHTML) == "Good morning!"){
word.innerHTML = "Good night!";
}
else{
word.innerHTML = "Good morning!";
}
}
??最后配置urls.py,代碼如下：
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^test', 'myapp.views.index'),
]
??這樣我們就完成了全部的配置以现。如果想過(guò)運(yùn)行該項(xiàng)目狠怨，只需在命令行中輸入：
cd ~/django_project/staticFilesTest
python3 manage.py runserver 8000
在本地瀏覽器中輸入“l(fā)ocalhost:8000/test”即可看到一開始展示的頁(yè)面~~
??本次分享到此結(jié)束，歡迎大家交流與批評(píng) ~~
參考網(wǎng)址：
