原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
http://ddkangfu.blog.51cto.com/311989/73218
原文地址:
[url]http://www.willarson.com/blog/ ?p=36
[/url]
本人英文比较烂,翻译的也不怎么样,大家凑合着看吧
。
第一部分:Django与Ajax:介绍和安装
近来我开始向正在用Django开发的一个项目中添加Ajax技术
,开始有点坎坷。有关于这方面可用的文档资料几乎找不到
。这里所写的文章就算是我为改变这种资料贫乏的现状所做的一点微薄
的努力吧。
我将分6个部分来介绍使用Ajax和Django创建动态网站 ,这篇文章是第一部分。
第一部分:Django与Ajax:介绍和安装
第二部分:Django与Prototype:Ajax Updater(动态更新内容)
第三部分:Django与Prototype:Ajax Request(send data out of band)
第四部分:Django与Script.aculo.us :Sortables(Drag and Drop)
第五部分:Django与Script.aculo.us :Visual Effects(Web2.0 Kitsch)
我将分6个部分来介绍使用Ajax和Django创建动态网站
第一部分:Django与Ajax:介绍和安装
第二部分:Django与Prototype:Ajax Updater(动态更新内容)
第三部分:Django与Prototype:Ajax Request(send data out of band)
第四部分:Django与Script.aculo.us
第五部分:Django与Script.aculo.us
介绍与安装
这篇文章将逐步的让你获得本教程中其它章节所用到的一些库 。这里将它分为两部分:第一部分是对安装的一个快速概述
-这应该足以让一名有Django经验的用户配置他的系统
-在概述之后我将给那些Django开发新手做一个循序渐进的安装
讲解。(只要你已经看完了这个
Django教程,应该是可以很好的
理解这篇文章的)
这篇文章将逐步的让你获得本教程中其它章节所用到的一些库
安装概述
我们需要做的第一件事情就是获取Protoculouse库 ,它是结合了
Prototype和
Script.aclo.us
,并被高比例压缩的一个库。从
这里下载Protoculous库。
在你下载的Protoculous库文件名中会标明多种的版本号数 字,这里我选用的是protoculous-1.0.2
-packed.js这个版本的(因为文章的发表时间不同
,可能会有各种不同的版本号)。你需要将protoculous
-1.0.2-packed.js文件放到可以静态的使用它的位置
。
下一步你需要把protoculous库的引用添加到项目的bas e模板中(你一定在每个项目中都使用了一个base模板,对吗?
)。我的base模板的相关行像下面这样:
我们需要做的第一件事情就是获取Protoculouse库
在你下载的Protoculous库文件名中会标明多种的版本号数
下一步你需要把protoculous库的引用添加到项目的bas
{% block javascript %}
< script type ="text/javascript" src ="http://127.0.0.1/media/protoculous-1.0.2-packed.js" > </script>
{% endblock %}
< script type ="text/javascript" src ="http://127.0.0.1/media/protoculous-1.0.2-packed.js" > </script>
{% endblock %}
这段代码被放到了templates文件夹中ajaxap
p/base.html文件的header部分。说到文件夹
,如果你按照我的文件夹的层次来安排,整个过程就会变得相当容易
,但如果你不按我的文件夹层次来安排,可能或多或少的需要做一些琐
碎的变化。
我的文件夹层次
在ajaxproject文件夹中有一个ajaxapp应用文件夹
这就是你所需要做的。如果你觉得上面说的有些太快了
循序渐进的安装过程
安装Django
我们需要的第一个东西就是Django。如果你没有从Subver sion中签出的版本,那么你得先去签出(如果你没有使用Subv
ersion(在命令行中输入svn进行签出),那么就去获取Dj
ango的最新安装包吧。安装包与Subversion版本不一致
的地方可能是一个issue)。从Subversion中签出dj
ango包使用下面的命令:
安装Django
我们需要的第一个东西就是Django。如果你没有从Subver
下载完成后你需要使用下面的命令去安装它们:
你要使用相应的python版本去安装Django库
,如果你的服务器上有多个版本的Python,那么你需要分别对它
们进行安装:
cd trunk
python setup.py install
python setup.py install
python2.4 setup.py install
python2.5 setup.py install
python2.5 setup.py install
安装Protoculous
Protoculous非常容易获取,Script.aculo.us和Prothotype都我们都会用到。从下载页面上仅需要获取z ip文件,它包含两个的库,并用高压缩比将它们压缩到一个文件中
。这个文件中会包含不同的版本号,我们将使用protoculou
s-1.0.2.packed.js这个版本。
Protoculous非常容易获取,Script.aculo.us和Prothotype都我们都会用到。从下载页面上仅需要获取z
安装XAMPP
我们将使用XAMPP来为我们的静态文件服务。它比修改urls .py文件要更容易请求得到某些静态文件。
这里下载XAMPP
。它包含一个标准的安装程序("double click and if doesn't work its someone else's fault" variety.)。
我们将使用XAMPP来为我们的静态文件服务。它比修改urls
Firebug
虽然Firebug不是必须的,但当你开始在使用html
设置XAMPP
你现在打算要运行XAMPP了,启动之后,你可能就要想在上面打开
设置Django
第一步需要在Django中创建一个项目。进到你想要创建项目的目
django-admin.py startproject ajaxproject
现在我们来创建以后会用到的文件夹。在ajaxproject文件
夹中创建一个templates文件夹,在templates文件
中再创建一个ajaxapp文件夹。然后开始修改settings
.py文件。
设置settings.py
在我们的开发环境中将使用SQLite作为数据库 ,因此我们需要在项目中安装数据库。进到你刚刚创建ajaxpro
ject文件夹中打开settings.py文件
。数据库配置就像这个样子(绝对路径可能因为操作系统不同而与我的
有差异):
接下来你就要根据本地XAMPP来修改MEDIA
_ROOT和MEDIA_URL设置了。根据你安装XAMPP的m
edia文件夹的路径不同,你的设置也会略有不同
,但它们看起应该差不多是这个样的:
创建我们的应用
现在我们来创建在settings.py文件中已经包含了的 "ajaxapp"应用(在ajaxproject文件夹中运行下
面的命令行)。
创建数据库:
在我们的开发环境中将使用SQLite作为数据库
DATABASE_ENGINE = 'sqlite3′
DATABASE_NAME = '/Users/will/ajaxproject/ajax.db'
DATABASE_USER = "
DATABASE_PASSWORD = "
DATABASE_HOST = "
DATABASE_PORT = "
DATABASE_NAME = '/Users/will/ajaxproject/ajax.db'
DATABASE_USER = "
DATABASE_PASSWORD = "
DATABASE_HOST = "
DATABASE_PORT = "
MEDIA_ROOT = '/Applications/xampp/xamppfiles/htdocs/ajaxproject/'
MEDIA_URL = 'http://127.0.0.1/ajaxproject/'
MEDIA_URL = 'http://127.0.0.1/ajaxproject/'
让我们把Django的管理程序也添加进来,我们随后将会创建的应
用程序ajaxapp也要放到INSTALLED_APPS中
。你的INSTALLED_APPS应该像这样:
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.admin',
'ajaxproject.ajaxapp',
)
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.admin',
'ajaxproject.ajaxapp',
)
我们最后修改settings.py来声明templates文件
夹的位置。确切的路径取决于你早些时候创建的文件夹的位置。
TEMPLATE_DIRS = (
"/Users/will/ajaxproject/templates",
)
"/Users/will/ajaxproject/templates",
)
我们已经完成了对settings.py文件的修改
,现在可以关掉它并继续往下进行了。
创建我们的应用
现在我们来创建在settings.py文件中已经包含了的
python manage.py startapp ajaxapp
创建数据库:
python manage.py syncdb
python manage.py runserver
如果一切都能正常运转,你会看到一个Django友好的占位页面
。真是太神奇了。
设置urls.py文件
我们将需要在做其它修改的时候一并对urls.py文件进行相应的
from django.conf.urls.defaults import *
urlpatterns = patterns(",
(r'^admin/', include('django.contrib.admin.urls')),
(r'^', include('ajaxproject.ajaxapp.urls')),
)
urlpatterns = patterns(",
(r'^admin/', include('django.contrib.admin.urls')),
(r'^', include('ajaxproject.ajaxapp.urls')),
)
我们同时也需要将urls.py复制一份到ajaxapp文件夹中
。
cp urls.py ajaxapp/
我们将会在后面的教程中对ajaxapp/urls
.py进行修改,但我们现在不会把它搞乱。
创建base模板
安装的最后部分就是创建一个base.html模板文件
<
html lang=en
>
< head >
{% block javascript %}
< script type ="text/javascript" src ="http://127.0.0.1/ajaxproject/protoculous-1.0.2-packed.js" > </script>
{% endblock %}
< title > {% block title %} Pastie Lobby {% endblock %} </title>
</head>
< body >
{% block content %}{% endblock content %}
</body>
</html>
< head >
{% block javascript %}
< script type ="text/javascript" src ="http://127.0.0.1/ajaxproject/protoculous-1.0.2-packed.js" > </script>
{% endblock %}
< title > {% block title %} Pastie Lobby {% endblock %} </title>
</head>
< body >
{% block content %}{% endblock content %}
</body>
</html>
完成安装
好啦,我们现在完成了对ajaxproject项目和ajaxap p应用的设置。我们也为静态文件设置了XAMPP
。我们已经为下一步实际的Ajax开发做好了准备工作
。点击
这里进入到教程的第二部分。
好啦,我们现在完成了对ajaxproject项目和ajaxap