Django使用心得（二）
生活随笔
收集整理的這篇文章主要介紹了
Django使用心得（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇主要內容：
- 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:\Vim\python\django ?????|- 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 |
本文轉自wang_yb博客園博客，原文鏈接：http://www.cnblogs.com/wang_yb/archive/2011/04/21/2024311.html，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的Django使用心得（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用IsLine FrameWork开发
- 下一篇： BGP选路进程