本篇主要內容：
- django中引用javascript
- django中引用css及圖片資源
1. django中引用javascript
web開發中必然要引用一些javascript的函式庫來進行一些前端的處理，django也不例外。
下面主要介紹如何在django中引用當前比較流行的js庫JQuery。
首先，新建一個django工程siteWithResources，新建的方法參照Django使用心得（一）
然後分別配置以下幾個檔案：
1.1 urls.py
|
1
2
3
4
5
6
7
8
|
urlpatterns = patterns(``,
# Example:
# (r`^siteWithResources/`, include(`siteWithResources.foo.urls`)),
( r`^js/(?P<path>.*)$`, `django.views.static.serve`,
{ `document_root`: `D:/Vim/python/django/django-resources/js/` }
),
) |
1.2 views.py
|
1
2
3
4
5
|
from django.shortcuts import render_to_response
def PageWithJquery( request ):
return render_to_response( `default.html`,
{"mytitle":"customize_title"})
|
1.3 default.html (引用javascript)
|
1
|
<script type="text/javascript" src="/js/jquery/jquery-1.4.4.min.js"></script>
|
然後就可以在default.html中使用jquery的各種函式了。
2. django中引用css及圖片資源
引用css和圖片資源的方法也和引用js是一樣的，在urls.py中加入如下內容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
urlpatterns = patterns(``,
# Example:
# (r`^siteWithResources/`, include(`siteWithResources.foo.urls`)),
(r`^test/$`, `siteWithResources.views.PageWithJquery`),
( r`^js/(?P<path>.*)$`, `django.views.static.serve`,
{ `document_root`: `D:/Vim/python/django/django-resources/js/` }
),
( r`^css/(?P<path>.*)$`, `django.views.static.serve`,
{ `document_root`: `D:/Vim/python/django/django-resources/css/` }
),
( r`^images/(?P<path>.*)$`, `django.views.static.serve`,
{ `document_root`: `D:/Vim/python/django/django-resources/images/` }
),
) |
完整版的default.html如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ mytitle }}</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript" src="/js/jquery/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(`#btn_down`).bind( `click`, move_txt_down );
$(`#btn_up`).bind( `click`, move_txt_up );
$(`#btn_fadeIn`).bind( `click`, fade_img_in );
$(`#btn_fadeOut`).bind( `click`, fade_img_out );
});
function move_txt_down(){
$(`#txt`).animate({left:100,top:500 }, `slow`);
}
function move_txt_up(){
$(`#txt`).animate({left:100,top:150 }, `slow`);
}
function fade_img_in(){
$(`#logo1`).fadeIn(`slow`);
}
function fade_img_out(){
$(`#logo1`).fadeOut(`slow`);
}
</script>
</head>
<body>
<h1>My Resource Test</h1>
<input type="button" name="btn" id="btn_down" value="Move the text down"/>
<input type="button" name="btn" id="btn_up" value="Move the text up"/>
<input type="button" name="btn" id="btn_fadeIn" value="Fade the logo in"/>
<input type="button" name="btn" id="btn_fadeOut" value="Fade the logo out"/>
<br />
<img src="/images1/Logo1.gif" alt="logo1" id="logo1" />
<div id="txt" style="position: absolute;left:100px;top:150px;">this is the text for move</div>
</body>
</html> |
當然，還得在settings.py中加上模板所在的配置。
|
1
2
3
4
5
6
|
TEMPLATE_DIRS = (
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don`t forget to use absolute paths, not relative paths.
"D:/Vim/python/django/django-templates/siteWithResources",
) |
最後，整個工程的目錄結構如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
D:Vimpythondjango |- siteWithResources
| |- __init__.py
| |- manage.py
| |- settings.py
| |- urls.py
| `- views.py
|
|- django-resources
| |- css
| | `- base.css
| |
| |- images1
| | |- Sunset.jpg
| | `- Logo1.gif
| |
| `- js
| `- jquery
| `- jquery-1.4.4.min.js
|
`- django-templates
`- siteWithResources
`- default.html
|