Django与Ajax教程（一）

2008-04-23 22:05:23

原文地址：http://www.willarson.com/blog/?p=36

本人英文比较烂，翻译的也不怎么样，大家凑合着看吧

。

第一部分：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)

介绍与安装
这篇文章将逐步的让你获得本教程中其它章节所用到的一些库。这里将它分为两部分：第一部分是对安装的一个快速概述－这应该足以让一名有Django经验的用户配置他的系统－在概述之后我将给那些Django开发新手做一个循序渐进的安装讲解。（只要你已经看完了这个Django教程，应该是可以很好的理解这篇文章的）

        安装概述
       我们需要做的第一件事情就是获取Protoculouse库，它是结合了Prototype和Script.aclo.us，并被高比例压缩的一个库。从这里下载Protoculous库。
        在你下载的Protoculous库文件名中会标明多种的版本号数字，这里我选用的是protoculous-1.0.2-packed.js这个版本的（因为文章的发表时间不同，可能会有各种不同的版本号）。你需要将protoculous-1.0.2-packed.js文件放到可以静态的使用它的位置。
    下一步你需要把protoculous库的引用添加到项目的base模板中（你一定在每个项目中都使用了一个base模板，对吗？）。我的base模板的相关行像下面这样：

{% block javascript %}
<script type="text/javascript" src="http://127.0.0.1/media/protoculous-1.0.2-packed.js"></script>
{% endblock %}

这段代码被放到了templates文件夹中ajaxapp/base.html文件的header部分。说到文件夹，如果你按照我的文件夹的层次来安排，整个过程就会变得相当容易，但如果你不按我的文件夹层次来安排，可能或多或少的需要做一些琐碎的变化。

        我的文件夹层次
        在ajaxproject文件夹中有一个ajaxapp应用文件夹，还有一个templates文件夹。在templates文件夹中还有一个叫ajaxapp的文件夹。
       这就是你所需要做的。如果你觉得上面说的有些太快了，那下面我将逐步的对它们进行详细的介绍。

        循序渐进的安装过程
         安装Django
         我们需要的第一个东西就是Django。如果你没有从Subversion中签出的版本，那么你得先去签出（如果你没有使用Subversion（在命令行中输入svn进行签出），那么就去获取Django的最新安装包吧。安装包与Subversion版本不一致的地方可能是一个issue）。从Subversion中签出django包使用下面的命令：

svn co http://code.djangoproject.com/svn/django/trunk/

下载完成后你需要使用下面的命令去安装它们：

cd trunk
python setup.py install

你要使用相应的python版本去安装Django库，如果你的服务器上有多个版本的Python，那么你需要分别对它们进行安装：

python2.4 setup.py install
python2.5 setup.py install

安装Protoculous
Protoculous非常容易获取，Script.aculo.us和Prothotype都我们都会用到。从下载页面上仅需要获取zip文件，它包含两个的库，并用高压缩比将它们压缩到一个文件中。这个文件中会包含不同的版本号，我们将使用protoculous-1.0.2.packed.js这个版本。

安装XAMPP
我们将使用XAMPP来为我们的静态文件服务。它比修改urls.py文件要更容易请求得到某些静态文件。这里下载XAMPP。它包含一个标准的安装程序（"double click and if doesn't work its someone else's fault" variety.）。

Firebug
虽然Firebug不是必须的，但当你开始在使用html，CSS和JavaScript混合开发的时候，你可以使用它很方便的来查看你所创建网页的所有数据。Firebug（https://addons.mozilla.org/en-US/firefox/addon/1843）是Firefox的一个插件，它是一个非常棒的小工具。我实际上并不怎么使用Firefox－我更喜欢Camino－但我在web编程开发的时候一直用它。

设置XAMPP
你现在打算要运行XAMPP了，启动之后，你可能就要想在上面打开它的Apache服务了。你还需要决定到htdocs文件夹（这是Apache服务器在XAMPP中用来输出内容的文件夹）的绝对路径。我的路径是'/Applications/xampp/xamppfiles/htdocs/'，但你的可能会与我的不同（取决于你的操作系统）。在文件夹里创建一个名叫"ajaxproject"的文件夹。然后复制一个protoculous-1.0.2-packed.js文件到你刚刚创建的中文件夹中。

设置Django
第一步需要在Django中创建一个项目。进到你想要创建项目的目录然后输入：

django-admin.py startproject ajaxproject

现在我们来创建以后会用到的文件夹。在ajaxproject文件夹中创建一个templates文件夹，在templates文件中再创建一个ajaxapp文件夹。然后开始修改settings.py文件。

设置settings.py
在我们的开发环境中将使用SQLite作为数据库，因此我们需要在项目中安装数据库。进到你刚刚创建ajaxproject文件夹中打开settings.py文件。数据库配置就像这个样子（绝对路径可能因为操作系统不同而与我的有差异）：

DATABASE_ENGINE = 'sqlite3′
DATABASE_NAME = '/Users/will/ajaxproject/ajax.db'
DATABASE_USER = "
DATABASE_PASSWORD = "
DATABASE_HOST = "
DATABASE_PORT = "

接下来你就要根据本地XAMPP来修改MEDIA_ROOT和MEDIA_URL设置了。根据你安装XAMPP的media文件夹的路径不同，你的设置也会略有不同，但它们看起应该差不多是这个样的：

MEDIA_ROOT = '/Applications/xampp/xamppfiles/htdocs/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',
)

我们最后修改settings.py来声明templates文件夹的位置。确切的路径取决于你早些时候创建的文件夹的位置。

TEMPLATE_DIRS = (
"/Users/will/ajaxproject/templates",
)

我们已经完成了对settings.py文件的修改，现在可以关掉它并继续往下进行了。

创建我们的应用
现在我们来创建在settings.py文件中已经包含了的"ajaxapp"应用（在ajaxproject文件夹中运行下面的命令行）。

python manage.py startapp ajaxapp

创建数据库：

python manage.py syncdb

让我们来确定一下所有的配置到现在都能正常运行。首先打开浏览器，然后输入 http://127.0.0.1:8000。

python manage.py runserver

如果一切都能正常运转，你会看到一个Django友好的占位页面。真是太神奇了。

设置urls.py文件
我们将需要在做其它修改的时候一并对urls.py文件进行相应的修改。我们需要告诉它ajaxapp这个应用转换url所需要的相关urls列表。

from django.conf.urls.defaults import *
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模板文件，其它所有模板都会从这个文件中进行扩展。在项目中有一个base模板是一个不错的做法，在这种情况下它让我们只导入一次javascript库就可以了。我们的base.html文件将被放在ajaxproject/templates/ajaxapp/文件夹下，并被命名为.....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>

完成安装
好啦，我们现在完成了对ajaxproject项目和ajaxapp应用的设置。我们也为静态文件设置了XAMPP。我们已经为下一步实际的Ajax开发做好了准备工作。点击这里进入到教程的第二部分。

昵称：
验证码：		点击图片可刷新验证码　　博客过2级，无需填写验证码
内容：

一叶障目

Django与Ajax教程（一）