Django学习(6)配置静态文件
2018-01-10 15:46
323 查看
本文将详细讲述如何在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
在本地浏览器中输入“localhost:8000/test”即可看到一开始展示的页面~~
本次分享到此结束,欢迎大家交流与批评 ~~
参考网址:
相关文章推荐
- Django学习(6)配置静态文件
- 01.Django学习之安装,建立项目,传参,MySQL数据库,静态文件配置和模板的使用
- java学习笔记7 - Spring mvc 统一异常处理和静态文件的配置
- Django配置静态文件(CSS\js)及Django调用JS、CSS、图片等静态文件
- Django静态文件配置
- Django中配置静态文件路径
- django+apache配置网站的robots.txt和sitemaps等理静态文件
- Django ====> 1.4版本静态文件路径设置--MEDIA_ROOT,MEDIA_URL, STATIC_ROOT, STATIC_URL学习
- Django静态文件配置
- Python(三)Django静态文件配置
- django中的静态文件配置
- Django静态文件配置备忘录
- django静态文件配置
- django 配置对于静态文件访问的路径
- Django静态文件的配置(二)
- Django 静态文件和媒体文件配置
- django 1.6 静态文件的配置
- Django静态文件配置
- Django静态文件配置