本文将详细讲述如何在Django中配置静态文件,如图片(images),JavaScript,CSS等。
我们将要实现的网页如下:
当按下按钮“Change Text”时,图片下方的“Good morning!”会变成“Good night!”.再次按下时,则会变成“Good morning!”,如此循环往复地变化。如下图所示:
首先在’/home/vagrant/django_project’下新建Django项目staticFilesTest,在该项目中新建APP为myapp,命令行代码如下:
cd ~/django_project
django-admin.py startproject staticFilesTest
cd ./staticFilesTest
django-admin.py startapp myapp
配置settings.py文件,如下:
- 添加应用:在“INSTALLED_APPS”中添加’myapp’;
- 设置模板路径:在"TEMPLATES"中的“DIRS”中添加“/home/vagrant/django_project/staticFilesTets/myapp/”
- 在“STATIC_URL = ‘/static/’”后添加代码
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
在myapp文件夹下,新建index.html文件,这是我们创建的网页页面的模板。代码如下:
<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文件,代码如下:(显然,这仅仅只是一个简单的例子而已~)
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'),
]
这样我们就完成了全部的配置。如果想过运行该项目,只需在命令行中输入:
cd ~/django_project/staticFilesTest
python3 manage.py runserver 8000