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
posted @   wang_yb  阅读(12241)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae