Django使用心得(二)

  1. 云栖社区>
  2. 博客>
  3. 正文

Django使用心得(二)

zting科技 2017-11-09 11:02:00 浏览842
展开阅读全文

本篇主要内容:

  • 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
标签: django框架


本文转自wang_yb博客园博客,原文链接:http://www.cnblogs.com/wang_yb/archive/2011/04/21/2024311.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
zting科技
+ 关注