chapter05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/base.css">
    <title>第五章 内容分享功能</title>

</head>
<body>
<h1 id="top"><b>第五章 内容分享功能</b></h1>
<p>在上一章我们使用内置验证框架迅速的建立了整个网站的用户相关功能，还学习了如何通过一对一字段扩展用户信息，以及为网站添加第三方认证登录功能。</p>
<p>这一章会学习使用JavaScript小书签程序，将其他网站的图片内容分享到本站，还将学习使用jQuery在Django中使用AJAX技术。本章包含如下要点</p>
<ul>
    <li>创建多对多关系</li>
    <li>自定义表单行为</li>
    <li>在Django中使用jQuery</li>
    <li>创建jQuery小书签程序</li>
    <li>使用sorl-thumbnail创建缩略图</li>
    <li>使用jQuery发送AJAX请求和创建AJAX视图</li>
    <li>创建视图的自定义装饰器</li>
    <li>AJAX动态加载页面</li>
</ul>

<h2 id="c5-1"><span class="title">1</span>创建图片分享功能</h2>
<p>我们的站点将让用户可以收藏然后分享他们在互联网上看到的图片到本站来，为此将要做以下工作：</p>
<ul>
    <li>用一个数据类存放图片和相关信息</li>
    <li>建立表单和视图用于处理图片上传</li>
    <li>需要建立一个系统，让用户将外站图片贴到本站来。</li>
</ul>
<p>这是一个独立与用户验证系统的新功能，为此新建一个应用<code>images</code>：</p>
<pre>django-admin startapp images</pre>
<p>然后在<code>settings.py</code>中激活该应用：</p>
<pre>
INSTALLED_APPS = [
    # ...
    <b>'images.apps.ImagesConfig',</b>
]
</pre>

<h3 id="c5-1-1"><span class="title">1.1</span>创建图片模型</h3>
<p>编辑<code>images</code>应用的<code>models.py</code>文件，添加如下代码：</p>
<pre>
from django.db import models
from django.conf import settings


class Image(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='images_created', on_delete=models.CASCADE)
    title = models.CharField(max_length=200)
    slug = models.SlugField(max_length=200,blank=True)
    url = models.URLField()
    image = models.ImageField(upload_to='images/%Y/%m/%d')
    description = models.TextField(blank=True)
    created = models.DateField(auto_now_add=True,db_index=True)

    def __str__(self):
        return self.title
</pre>
<p>这是我们用于存储图片的模型，来看一下具体的字段：</p>
<ul>
    <li><code>user</code>：这是一个连接到<code>User</code>模型的外键，体现了用户与图片的一对多关系，即一个用户可以上传多个图片。</li>
    <li><code>title</code>：图片的名称</li>
    <li><code>slug</code>：该图片的简称，用于动态建立该图片的URL</li>
    <li><code>image</code>：图片文件字段，用于存放图片</li>
    <li><code>description</code>：可选的关于图片的描述</li>
    <li><code>created</code>：图片分享到本站来的时间，使用了<code>auto_now_add</code>自动生成创建时间，并且使用了<code>db_index=True</code>创建索引
</ul>
<p class="hint">数据库索引可以有效的提高数据库查询效率。对于频繁使用<code>filter()</code>，<code>exclude()</code>或者<code>order_by()</code>等方法的字段推荐创建字段。<code>ForeignKey</code>和设置了<code>unique=True</code>的字段默认会被创建索引。还可以使用<code>Meta.index_together</code>创建联合索引。</p>
<p class="emp">译者注：为<code>created</code>字段创建索引是常用做法。</p>
<p>这里我们需要自定义该模型的行为，重写<code>Image</code>模型的<code>save()</code>方法，使图片在保存到数据库时，自动根据<code>title</code>字段生成<code>slug</code>字段的内容。导入<code>slugify()</code>然后为<code>Image</code>模型添加一个<code>save()</code>方法：</p>
<pre>
<b>
from django.utils.text import slugify</b>

class Image(models.Model):
    # ......

    <b>def save(self, *args, **kwargs):</b>
        <b>if not self.slug:</b>
            <b>self.slug = slugify(self.title)</b>
        <b>super(Image, self).save(*args, **kwargs)</b>
</pre>
<p class="emp">译者注：原书代码缩进有误，此处已经修改为正确版本。</p>
<p>在这段代码里，使用了Django内置的<code>slugify()</code>自动生成了<code>slug</code>字段的内容。之后调用超类的方法保存图片，这样用户无需手工输入。</p>


<h3 id="c5-1-2"><span class="title">1.2</span>创建多对多关系</h3>
<p>我们将在<code>Image</code>模型中再添加一个外键，用于存储哪些用户喜欢该图片。由于一个用户可能喜欢多个图片，一个图片也可能被多个用户喜欢，因此图片和用户之间多对多的关系，需要修改<code>Image</code>模型添加如下字段：</p>
<pre>
users_like = models.ManyToManyField(settings.AUTH_USER_MODEL, related_name='images_liked', blank=True)
</pre>
<p>当定义了<code>ManyToManyField</code>多对多外键字段时，Django会创建一张中间表，中间表分别通过外键关联到当前的模型和<code>ManyToManyField()</code>的第一个参数对应的模型，多对多关系可以用于任意两个有关系的模型。</p>
<p>与<code>ForeignKey</code>一样，<code>related_name</code>属性定义了多对多字段反向查询的名称，多对多字段提供了一个多对多模型管理器用来进行查询，类似<code>image.users_like.all()</code>，如果是从<code>user</code>对象查询，则类似<code>user.images_liked.all()</code>。</p>
<p>之后进行<code>Image</code>类的数据迁移。</p>


<h3 id="c5-1-3"><span class="title">1.3</span>添加图片模型至管理后台</h3>
<p>编辑<code>images</code>应用的<code>admin.py</code>文件，将<code>Image</code>类添加至管理后台：</p>
<pre>
from django.contrib import admin
<b>from .models import Image</b>

<b>@admin.register(Image)</b>
<b>class ImageAdmin(admin.ModelAdmin):</b>
    <b>list_display = ['title', 'slug', 'image', 'created']</b>
    <b>list_filter = ['created']</b>
</pre>
<p>启动站点，打开<a href="http://127.0.0.1:8000/admin/" target="_blank">http://127.0.0.1:8000/admin/</a>，可以看到<code>Image</code>已经被加入管理后台，如图所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-01.png" alt=""></p>

<h2 id="c5-2"><span class="title">2</span>从外站分享内容至本站</h2>
<p>我们实现用户将外站图片分享到本站的方式是：用户提供图片的URL，一个标题和可选的秒数，我们的站点会将该图片下载下来，建立一个对应的新<code>Image</code>对象，然后保存进数据库。</p>
<p>已经建立完了图片模型，这里我们需要建立一个表单供用户提交图片信息。在<code>Images</code>应用下建立f<code>orms.py</code>文件，然后添加如下代码：</p>
<pre>
from django import forms
from .models import Image

class ImageCreateForm(forms.ModelForm):
    class Meta:
        model = Image
        fields = ('title', 'url', 'description',)
        widgets = {
            'url': forms.HiddenInput,
        }
</pre>
<p>这里使用了<code>ModelForm</code>类，基于<code>Image</code>模型创建了表单，仅包含<code>title</code>，<code>url</code>和<code>description</code>字段。用户无需直接在表单中输入图片URL，我们将使用一个JavaScript小书签程序来从外站选择一个图片并将其URL作为<code>Get</code>请求的参数，然后访问我们的站点。所以我们使用了<code>HiddenInput</code>小插件替代了默认的<code>url</code>字段的设置。我们这么做是希望这个字段不被用户看到。</p>

<h3 id="c5-2-1"><span class="title">2.1</span>验证表单字段</h3>
<p>为了验证这个URL是一个图片，需要检查URL中的文件名是否以<code>.jpg</code>或<code>.jpeg</code>扩展名结尾。像在之前章节那样，我们将针对<code>url</code>字段编写一个自定义验证器<code>clean_url()</code>，这样表单对象调用<code>is_valid()</code>时，我们的验证器就可以修改数据或者报错。添加如下方法到<code>ImageCreateForm</code>：</p>
<pre>
def clean_url(self):
    url = self.cleaned_data['url']
    valid_extensions = ['jpg', 'jpeg']
    extension = url.rsplit('.', 1)[1].lower()
    if extension not in valid_extensions:
        raise forms.ValidationError('The given URL does not match valid image extensions.')
    return url
</pre>
<p>在上边的代码中，定义了clean_URL()方法来验证url字段，该方法解释如下：</p>
<ol>
    <li>从<code>cleaned_data</code>中获取<code>url</code>字段的值</li>
    <li>将URL通过从右边开始的第一个<code>.</code>进行切分，然后取切分结果的第二个元素，也就是扩展名进行比较。如果验证失败，则抛出一个<code>ValidationError</code>错误。这里我们采用的验证方式比较简陋，而且仅支持<code>jpg</code>类型图片，你可以采用正则表达式或者其他高级方法来验证URL是否是一个有效的图片文件地址。</li>
    <li></li>
</ol>
<p>除了验证URL之外，我们还必须在验证成功的时候将图片下载并保存到数据库中。我们可以使用处理该表单的视图来完成这个操作，但更常用的方式是重写表单的<code>save()</code>来实现此功能。</p>

<h3 id="c5-2-2"><span class="title">2.2</span>重写表单的<code>save()</code>方法</h3>
<p>在之前已经知道，<code>ModelForm</code>有一个<code>save()</code>方法，将当前的模型数据存储到数据库中并且返回该对象。这个方法还接受一个<code>commit</code>布尔值参数，用于确定是否实际将数据持久化到数据库中。如果<code>commit=False</code>，则<code>save()</code>方法仅返回当前的数据对象，但不执行数据库写入操作。因此我们可以重写<code>save()</code>方法，让其下载图片之后，再将数据对象写入数据库。</p>
<p>添加如下导入语句到<code>forms.py</code>文件：</p>
<pre>
from urllib import request
from django.core.files.base import ContentFile
from django.utils.text import slugify
</pre>
<p>之后添加下列<code>save()</code>方法至<code>ImageCreateForm</code>类中：</p>
<pre>
def save(self, force_insert=False, force_update=False, commit=True):
    image = super(ImageCreateForm, self).save(commit=False)
    image_url = self.cleaned_data['url']
    image_name = '{}.{}'.format(slugify(image.title), image_url.rsplit('.', 1)[1].lower())

    # 根据URL下载图片
    response = request.urlopen(image_url)
    image.image.save(image_name, ContentFile(response.read()), save=False)

    if commit:
        image.save()
    return image
</pre>
<p>我们重写了<code>save()</code>方法，保持与原来方法一样的默认参数设置。重写的方法工作逻辑如下：</p>
<ol>
    <li>先调用父类的<code>save()</code>方法，使用现有表单数据建立一个新的<code>image</code>数据对象但不保存</li>
    <li>从<code>cleaned_data</code>中获取URL</li>
    <li>将<code>image.slug</code>与扩展名拼成新的文件名</li>
    <li>使用Python的<code>urllib</code>模块下载图片，然后使用<code>image</code>字段的<code>save()</code>方法保存到<code>MEDIA</code>目录中。<code>image</code>字段的<code>save()</code>方法的参数之一<code>ContentFile</code>是下载的图片内容，这里使用了<code>save=False</code>防止直接将字段写入数据库。</li>
    <li>为了和原<code>save()</code>方法的行为保持一致，仅当<code>commit=True</code>的时候写入数据库。</li>
</ol>
<p class="emp">译者注：本章到现在为止出现了模型的<code>save()</code>方法，表单的<code>save()</code>方法和<code>image</code>字段的<code>save()</code>方法，读者不要混淆。</p>
<p>之后来编写处理表单的视图，编辑<code>images</code>应用的<code>views.py</code>文件，添加如下代码：</p>
<pre>
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from .forms import ImageCreateForm

@login_required
def image_create(request):
    if request.method == "POST":
        # 表单被提交
        form = ImageCreateForm(request.POST)
        if form.is_valid():
            # 表单验证通过
            cd = form.cleaned_data
            new_item = form.save(commit=False)
            # 将当前用户附加到数据对象上
            new_item.user = request.user
            new_item.save()
            messages.success(request, 'Image added successfully')
            # 重定向到新创建的数据对象的详情视图
            return redirect(new_item.get_absolute_url())
    else:
        # 根据GET请求传入的参数建立表单对象
        form = ImageCreateForm(data=request.GET)

    return render(request, 'images/image/create.html', {'section': 'images', 'form': form})
</pre>
<p>使用<code>@login_required</code>装饰器令<code>image_create</code>视图仅供登录后的用户使用，这个视图工作逻辑如下：：</p>
<ol>
    <li>我们通过一个<code>Get</code>请求附加的参数创建表单对象，参数会带着<code>url</code>和<code>title</code>字段对应的内容。这个<code>Get</code>请求是由之后我们创建的JavaScript小书签程序发起的，现在，我们就假设该表单已经被初始化而且被用户确认并提交。</li>
    <li>表单提交后，如果验证通过，那么建立一个新的<code>Image</code>对象，但是不存入数据库。</li>
    <li>取得当前的用户，赋给<code>Image</code>对象的外键后进行保存，这样就可以知道该图片由哪个用户上传。</li>
    <li>将图片写入数据库。</li>
    <li>创建一个成功保存图片的消息，然后将用户重定向到规范化的图片对象的URL，现在还没有为<code>Image</code>模型创建<code>get_absolute_url()</code>方法，稍后会进行创建。</li>
</ol>
<p>在<code>images</code>应用中建立<code>urls.py</code>文件，添加如下代码：</p>
<pre>
from django.urls import path
from . import views

app_name = 'images'

urlpatterns = [
    path('create/', views.image_create, name='create'),
]
</pre>
<p>然后编辑bookmarks项目的根urls.py文件，为images应用增加一条二级路由匹配：</p>
<pre>
urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include('account.urls')),
    path('social-auth/', include('social_django.urls', namespace='social')),
    <b>path('images/', include('images.urls', namespace='images')),</b>
]
</pre>
<p>最后来建立对应的模板，在images应用的目录下创建如下目录和文件结构：</p>
<pre>
templates/
    images/
        image/
            create.html
</pre>
<p>然后编辑刚刚创建的<code>create.html</code>文件，添加如下代码：</p>
<pre>
{# create.html #}
{% extends "base.html" %}
{% block title %}Bookmark an image{% endblock %}
{% block content %}
    &lt;h1>Bookmark an image&lt;/h1>
    &lt;img src="{{ request.GET.url }}" class="image-preview">
    &lt;form action="." method="post">
        {{ form.as_p }}
        {% csrf_token %}
        &lt;input type="submit" value="Bookmark it!">
    &lt;/form>
{% endblock %}
</pre>
<p>现在启动站点，输入类似<code>http://127.0.0.1:8000/images/create/?title=...&url=...</code>的链接，其中包含<code>title</code>和<code>url</code>两个参数，分别表示图片的名称和URL地址。可以使用下边这个测试地址：</p>
<p><a href="http://127.0.0.1:8000/images/create/?title=%20Django%20and%20Duke&url=http://upload.wikimedia.org/wikipedia/commons/8/85/Django_Reinhardt_and_Duke_Ellington_%28Gottlieb%29.jpg" target="_blank">http://127.0.0.1:8000/images/create/?title=%20Django%20and%20Duke&url=http://upload.wikimedia.org/wikipedia/commons/8/85/Django_Reinhardt_and_Duke_Ellington_%28Gottlieb%29.jpg</a></p>
<p>应该可以看到下面的页面：</p>
<p><img src="http://img.conyli.cc/django2/C05-02.png" alt=""></p>
<p>在description内输入一些内容，然后点击BOOKMARK IT!按钮，一个新的Image对象会被存入数据库。由于此时<code>get_absolute_url()</code>方法还未编写，所以会报错如下：</p>
<p><img src="http://img.conyli.cc/django2/C05-i01.jpg" alt=""></p>
<p>此时不用担心这个错误信息，通过刚才编写的视图可以知道，执行到这里报错说明图片已经成功存入数据库，打开<a href="http://127.0.0.1:8000/admin/images/image/" target="_blank">http://127.0.0.1:8000/admin/images/image/</a>即可看到该图片的信息，如下图所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-i02.jpg" alt=""></p>


<h3 id="c5-2-3"><span class="title">2.3</span>使用jQuery创建小书签程序</h3>
<p><a href="https://zh.wikipedia.org/wiki/%E5%B0%8F%E4%B9%A6%E7%AD%BE" target="_blank">小书签程序</a>是一段JavaScript代码，可以被浏览器保存为书签，在点击该小书签时，其中的JavaScript代码被执行，从而实现一些功能。</p>
<p>一些比较知名的站点，如Pinterest，使用小书签程序让用户可以从其他网站将内容分享到其网站上。我们建立的程序和这个小书签程序类似，让用户将图片分享到我们的站点来。</p>
<p>我们将使用jQuery建立小书签程序，jQuery是一个得到广泛使用的JavaScript库，可以快速开发基于JavaScript的程序，可以访问其官方站点<a href="https://jquery.com/" target="_blank">https://jquery.com/</a>了解更多信息。</p>
<p>用户将会这样使用我们的小书签：</p>
<ol>
    <li>用户将我们网站上的一个链接拖到浏览器的书签栏中，这个链接的<code>href</code>属性中保存着JS代码，这个链接被保存到浏览器书签成为一个可点击的书签</li>
    <li>用户在其他网站上看到想分享的图片，点击这个小书签，小书签里边的程序被运行，让用户选择要分享的图片然后自动以GET请求访问我们的网站。</li>
</ol>
<p>由于小书签程序保存在用户的浏览器上，在用户第一次保存后，想要更新该程序就很困难，所以一般小书签程序实际上是一个程序启动器，实际执行的程序位于我们的网站上。这就是我们创建小书签的方法解说，现在来实现：</p>
<p>在<code>images/templates/</code>目录下创建一个文件，叫做<code>bookmarklet_launcher.js</code>，添加如下JavaScript代码：</p>
<pre>
(function () {
    if (window.myBookmarklet !== undefined) {
        myBookmarklet()
    }
    else {
        document.body.appendChild(document.createElement('script')).src = 'http://127.0.0.1:8000/static/js/bookmarklet.js?r=' + Math.floor(Math.random() * 99999999999999999999);
    }
})();
</pre>
<p>这段JavaScript代码首先检查<code>myBookmarklet</code>这个名称是否存在于当前环境，这样用户反复点击小书签程序也不会多次运行相同程序。如果名称不存在，就在当前的页面中增加一个<code>&lt;script&gt;</code>标签，也就是导入了我们网站的一段JavaScript程序并且执行。之后的r参数生成了一段随机数，目的是让浏览器每次都去请求实际的JavaScript文件，而不从缓存中直接读取</p>
<p>新增的<code>&lt;script&gt;</code>标签的src属性为<code>"http://127.0.0.1:8000/static/js/bookmarklet.js?r=xxxxxxxxxxxxxxxxxxxx"</code>，指向我们网站自己的JavaScript程序文件，这样小程序每次执行的时候，都会将我们网站上的JavaScript程序在当前页面执行。下边我们把小程序链接加入到用户登录首页，以让用户可以将其保存成书签。</p>
<p>这就是一个启动器，用于加载实际上位于我们站点上的bookmarklet.js然后在当前页面运行。</p>
<p>编辑<code>account</code>应用的模板目录中的<code>account/dashboard.html</code>，让其看起来像下边这样：</p>
<pre>
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
    &lt;h1>Dashboard&lt;/h1>

    <b>{% with total_images_created=request.user.images_created.count %}</b>
        <b>&lt;p>Welcome to your dashboard. You have bookmarked {{ total_images_created }} image{{ total_images_created|pluralize }}.&lt;/p></b>
    <b>{% endwith %}</b>

    <b>&lt;p>Drag the following button to your bookmarks toolbar to bookmark images from other websites &lt;a href="javascript:{% include "bookmarklet_launcher.js" %}" class="button">Bookmark it&lt;/a>&lt;/p></b>

    &lt;p>You can also &lt;a href="{% url "edit" %}">edit your profile&lt;/a> or &lt;a href="{% url "password_change" %}">change your password&lt;/a>.&lt;p>
{% endblock %}
</pre>
<p>现在首页已经当前用户已经分享了多少图片到本站，使用了<code>{% with %}</code>标签用于设置一个变量名给图片总数，可以避免反复查询数据库。然后包含了一个<code>href</code>属性是小标签启动器程序的链接，供用户将其拖动到浏览器的书签栏上。这里使用了<code>include</code>将JavaScript文件的内容导入。</p>
<p class="emp">译者注：这里灵活使用了<code>include</code>标签，可见引入的模板文件不需要是HTML文件，只要是文本文件即可，这里就通过该标签将<code>bookmarklet_launcher.js</code>文件引入，避免了在此处硬编码JavaScript代码。</p>
<p>在浏览器中打开<a href="http://127.0.0.1:8000/account/" target="_blank">http://127.0.0.1:8000/account/</a>，可以看到如下页面：</p>
<p><img src="http://img.conyli.cc/django2/C05-i03.jpg" alt=""></p>
<p>现在开始来编写实际执行的JavaScript程序，在images应用下建立如下目录和文件结构：</p>
<pre>
static/
    js/
        bookmarklet.js
</pre>
<p>在随书代码中可以看到<code>images</code>应用目录下有<code>static/css/</code>目录，将其中的<code>css/</code>目录拷贝到你的应用的<code>static/</code>目录下，小书签程序将要使用其中的<code>bookmarklet.css</code>文件。</p>
<p>打开刚建立的<code>bookmarklet.js</code>文件，添加如下代码：</p>
<pre>
(function () {
    let jquery_version = '3.3.1';
    let site_url='http://127.0.0.1:8000/';
    let static_url = site_url + 'static/';
    let min_width = 100;
    let min_height = 100;
    function bookmarklet(msg){
        //这里是分享图片的代码
    }

    // 检查页面是否加载了jQuery，如果没有就进行加载，尝试15次
    if(typeof window.jQuery !== 'undefined'){
        bookmarklet();
    }
    else {
        let conflict = typeof window.$ !== 'undefined';
        let script = document.createElement('script');
        script.src = '//ajax.googleapis.com/ajax/libs/jquery/' + jquery_version + '/jquery.min.js';
        document.head.appendChild(script);
        let attempts = 15;
        (function(){
            if(typeof window.jQuery === 'undefined'){
                if(--attempts>0){
                    window.setTimeout(arguments.callee, 250)
                }else {
                    alert("An error ocurred while loading jQuery")
                }
            }else {
                bookmarklet()
            }
        })();
    }
})();
</pre>
<p>这是加载jQuery的代码。如果jQuery已经在当前页面加载，则会使用当前页面的jQuery，如果没有加载，则将jQuery位于google的CDN地址加入到页面中。当jQuery被成功加载的时候，就去执行<code>bookmarklet()</code>函数，该函数含有实际的分享图片代码。在文件开始的地方还定义了如下几个全局变量：</p>
<ul>
    <li><code>jquery_version</code>：jQuery的版本号</li>
    <li><code>site_url</code>和<code>static_url</code>：我们网站的地址和静态文件地址</li>
    <li><code>min_width</code>和<code>min_height</code>：用于控制程序寻找的最小图片宽高，小于这个宽或高的图片不会出现在供分享的清单中。</li>
</ul>
<p>现在来编写<code>bookmarklet()</code>函数，编辑文件里的<code>bookmarklet()</code>函数的代码如下：</p>
<pre>
function bookmarklet(msg){
    // 加载CSS文件
    let css = jQuery('&lt;link>');
    css.attr({
        rel:'stylesheet',
        type:'text/css',
        href:static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
    });
    jQuery('head').append(css);

    // 加载HTML结构
    box_html = '&lt;div id="bookmarklet">&lt;a href="#" id="close">&times;&lt;/a>&lt;h1>Select an image to bookmark:&lt;/h1>&lt;div class="images">&lt;/div>&lt;/div>';
    jQuery('body').append(box_html);

    // 关闭事件
    jQuery('#boorkmarklet #close').click(function () {
        jQuery("#bookmarklet").remove();
    });
};
</pre>
<p>这段代码的逻辑如下：</p>
<ol>
    <li>加载<code>bookmarklet.css</code>，使用随机数确保浏览器不从缓存中读取</li>
    <li>加入一块HTML结构代码到当前页面的<code>&lt;body&gt;</code>标签中，在页面的右上方显示一个浮动的图片列表区域</li>
    <li>加入了一个事件，用户点击新增的区域的关闭按钮时，将我们添加的HTML结构代码从当前页面中删除。使用jQuery，通过父元素ID为<code>bookmarklet</code>的<code>#bookmarklet</code>和<code>#close</code>选择器定位我们的HTML元素。关于jQuery的选择器，可以参考<a href="https://api.jquery.com/category/selectors/" target="_blank">https://api.jquery.com/category/selectors/</a>。</li>
</ol>
<p>在加载了HTML结构和对应的CSS样式后，接下来要添加分享功能，将如下代码追加在<code>bookmarklet()</code>函数的内部：</p>
<pre>
    // 寻找页面内所有图片然后显示在新增的HTML结构中
    jQuery.each(jQuery('img[src$="jpg"]'), function(index, image) {
    if (jQuery(image).width() >= min_width && jQuery(image).height() >= min_height)
    {
        image_url = jQuery(image).attr('src');
        jQuery('#bookmarklet .images').append('&lt;a href="#">&lt;img src="'+ image_url +'" />&lt;/a>');
    }
});
</pre>
<p>这段代码使用了<code>img[src$="jpg"]</code>选择器来选择所有jpg格式的<code>&lt;img&gt;</code>元素，然后使用<code>each()</code>方法，对其中每个图片检查是否大于最小宽高，如果大于就将其加入到我们HTML结构的<code>&lt;div class="images"&gt;</code>标签中。</p>
<p>在开始试验编写的功能之前，还必须进行最后的设置。现在HTTPS协议使用的很广泛，为了安全起见，浏览器一般不会允许HTTP协议的小书签程序运行，因此必须给我们自己的网站一个HTTPS地址，但是Django的测试服务器无法自动支持HTTPS，为了测试小书签的功能，使用<a href="https://ngrok.com/download" target="_blank">Ngrok</a>可以建立一个隧道将自己的本机通过HTTP和HTTPS地址向外提供服务。</p>
<p>在<a href="https://ngrok.com/download" target="  ">https://ngrok.com/download</a>下载Ngrok，之后在系统命令行里运行如下命令：</p>
<pre>./ngrok http 8000</pre>
<p>Ngrok建立一个隧道连接到本机的8000端口，然后为其分配一个域名，可以看到窗口里显示：</p>
<pre>
ngrok by @inconshreveable                                                                               (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 58 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://d0de3ca5.ngrok.io -> localhost:8000
Forwarding                    https://d0de3ca5.ngrok.io -> localhost:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
</pre>
<p>其中的<code>https://d0de3ca5.ngrok.io</code>就是可以访问到本机Django服务的HTTPS地址，把这个地址加入到<code>settings.py</code>文件的的<code>ALLOWED_HOSTS</code>里：</p>
<pre>
ALLOWED_HOSTS = [
    'mysite.com',
    'localhost',
    '127.0.0.1',
    <code>'d0de3ca5.ngrok.io'</code>
]
</pre>
<p class="emp">译者注：最好按照Ngrok官网的教程注册一个用户再使用，否则HTTPS的域名很快过期，需要重新启动Ngrok并进行相关配置。</p>
<p>启动站点，然后访问这个HTTPS地址，应该可以看到站点的登录页面，说明HTTPS服务正常。</p>
<p>获得HTTPS地址之后，编辑<code>bookmarklet_launcher.js</code>文件，将其中的<code>http://127.0.0.1:8000/</code>替换为新获得的HTTPS地址：</p>
<pre>
(function () {
    if (window.myBookmarklet !== undefined) {
        myBookmarklet()
    }
    else {
        document.body.appendChild(document.createElement('script')).src = '<b>https://d0de3ca5.ngrok.io/</b>static/js/bookmarklet.js?r=' + Math.floor(Math.random() * 99999999999999999999);
    }
})();
</pre>
<p>再将<code>js/bookmarklet.js</code>文件中的这一行：</p>
<pre>let site_url='http://127.0.0.1:8000/';</pre>
<p>修改为：</p>
<pre>let site_url='<b>https://d0de3ca5.ngrok.io/</b>';</pre>
<p>然后打开<code>https://d0de3ca5.ngrok.io/account/</code>，将页面上的BOOKMART IT的绿色按钮拖到浏览器的书签栏上，如图所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-04.png" alt=""></p>
<p>打开任意一个图片比较多的网站，点击小书签，应该可以看到屏幕右上方显示一块新区域，里边列出了当前站点可供分享的图片，如下所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-05.png" alt=""></p>
<p>我们希望用户点击一张图片，就可以将该图片分享到我们的网站，进入之前编写的视图对应的表单填写页面上，编辑<code>js/bookmarklet.js</code>文件，在<code>bookmarklet()</code>函数底部追加：</p>
<pre>
    // 点击图片时按照指定URL访问我们的网站
    jQuery('#bookmarklet .images a').click(function(e){
      let selected_image = jQuery(this).children('img').attr('src');
      // hide bookmarklet
      jQuery('#bookmarklet').hide();
      // open new window to submit the image
      window.open(site_url +'images/create/?url='
                  + encodeURIComponent(selected_image)
                  + '&title='
                  + encodeURIComponent(jQuery('title').text()),
                  '_blank');
    });
</pre>
<p>这个函数的逻辑如下：</p>
<ol>
    <li>为每个图片元素绑定一个<code>click()</code>事件</li>
    <li>当用户点击一个图片时，设置一个变量selected_image，是这个图片的URL地址。</li>
    <li>之后隐藏新增的HTML结构，使用selected_image和网站的的&lt;title&gt;的内容外加我们的网站地址，生成一个链接然后在新窗口中打开链接，实现GET请求附带参数访问我们自己的网站。</li>
</ol>
<p>打开一个网站，然后点击小书签，在右上方出现的窗口中点击一张图片，会被重定向到我们网站的图片创建页面，如下所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-i04.jpg" alt=""></p>
<p>撒花庆祝，我们实现了第一个小书签程序，然后将其集成到了我们的Django项目中。</p>

<h2 id="c5-3"><span class="title">3</span>创建图片详情视图</h2>
<p>完成了图片分享并保存的功能之后，现在需要建立一个详情视图用来展示具体图片，编辑<code>images</code>应用的<code>views.py</code>文件，添加如下代码：</p>
<pre>
from django.shortcuts import get_object_or_404
from .models import Image

def image_detail(request, id, slug):
    image = get_object_or_404(Image, id=id,slug=slug)
    return render(request, 'images/image/detail.html', {'section':'images','image':image})
</pre>
<p>这是一个简单的用于展示某个图片详情的视图，编辑<code>images</code>应用的<code>urls.py</code>文件为该视图添加一行URL：</p>
<pre>
path('detail/&lt;int:id>/&lt;slug:slug>/', views.image_detail, name='detail'),
</pre>
<p>有过上个项目的经验，此时可以知道必须编写<code>Image</code>类的<code>get_absolute_url()</code>方法用于生成规范化链接，打开<code>images</code>应用的<code>models.py</code>文件，添加<code>get_absolute_url()</code>方法如下：</p>
<pre>
<b>from django.urls import reverse</b>

class Image(models.Model):
    # ...
    <b>def get_absolute_url(self):</b>
        <b>return reverse('images:detail', args=[self.id, self.slug])</b>
</pre>
<p>记住在每个编写的模型中加入该方法，以快捷的生成对应的URL。</p>
<p class="emp">译者注：在django 2里，<code>urls.py</code>文件中使用<code>include()</code>方法并通过<code>namespace</code>参数指定命名空间，还需要在对应的下一级<code>urls.py</code>里写上<code>app_name = 'namespace'</code> 来设置命名空间。如果<code>include()</code>方法中设置了命名空间，其对应的<code>urls.py</code>文件中的<code>app_name</code>必须一致，否则会报错。如果<code>include()</code>方法未设置命名空间，则以<code>app_name</code>的设置为准。</p>
<p>最后就是建立模板了，在<code>images</code>应用的模板目录中的<code>/images/image/</code>路径下创建<code>detail.html</code>文件并添加如下代码：</p>
<pre>
{#/templates/images/image/detail.html#}
{% extends 'base.html' %}

{% block title %}
    {{ image.title }}
{% endblock %}

{% block content %}
    &lt;h1>{{ image.title }}&lt;/h1>
    &lt;img src="{{ image.image.url }}" class="image-detail">
    {% with total_likes=image.users_like.count %}
        &lt;div class="image-info">
            &lt;div>
        &lt;span class="count">
            {{ total_likes }} like{{ total_likes|pluralize }}
        &lt;/span>
            &lt;/div>
            {{ image.description|linebreaks }}
        &lt;/div>
        &lt;div class="image-likes">
            {% for user in image.users_like.all %}
                &lt;div>
                    &lt;img src="{{ user.profile.photo.url }}">
                    &lt;p>{{ user.first_name }}&lt;/p>
                &lt;/div>
            {% empty %}
                Nobody likes this image yet.
            {% endfor %}
        &lt;/div>
    {% endwith %}
{% endblock %}
</pre>
<p>这是展示具体某个图片的模板，其中使用<code>{% with %}</code>保存查询结果到<code>total_likes</code>变量中避免了查询两次数据库。然后展示图片的<code>discription</code>字段，之后迭代<code>image.users_like.all</code>，显示出所有喜欢该图片的用户。</p>
<p class="hint">在一个模板中反复使用某一个QuerySet时，可以通过<code>{% with %}</code>将其查询结果保存到一个变量中，避免重复查询。</p>
<p class="emp">译者注：<code>image.image.url</code>和<code>user.profile.photo.url</code>：这两个字段不是<code>Image</code>类中的<code>url</code>字段，而是在定义<code>Imagefield</code>字段时<code>upload_to</code>的路径名称。</p>
<p>现在可以通过小书签程序再导入一个新图片，保存成功之后，会被重定向到图片的详情页，如下所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-06.png" alt=""></p>

<h2 id="c5-4"><span class="title">4</span>创建图片缩略图</h2>
<p>现在我们的图片详情页展示的是原始的图片，但是图片的尺寸可能差异很大，而且原始图片的大小可能会很大，载入时间较长。一般网站需要大量展示图片的通用做法是生成图片的缩略图然后展示缩略图。我们使用一个第三方应用<code>sorl-thumbnail</code>来生成缩略图。</p>
<p>在系统命令行中输入以下命令安装<code>sorl-thumbnail</code>：</p>
<pre>
pip install sorl-thumbnail==12.4.1
</pre>
<p>然后在<code>settings.py</code>文件中激活该应用：</p>
<pre>
INSTALLED_APPS = [
    # ...
    <b>'sorl.thumbnail',</b>
]
</pre>
<p>之后按照惯例执行数据迁移程序，可以看到数据库中增添了该应用的一个数据表。</p>
<p>这个模块采用了两种方法显示缩略图：一是提供了新的模板标签<code>{% thumbnail %}</code>直接在模板内显示缩略图，二是基于<code>Imagefield</code>自定义的图片字段，用于在模型内设置缩略图字段。这两种方式都可以显示缩略图。</p>
<p>我们采用模板标签的方式。编辑<code>images/image/detail.html</code>，找到如下这行：</p>
<pre>&lt;img src="{{ image.image.url }}" class="image-detail"></pre>
<p>将其替换成下列代码：</p>
<pre>
{% load thumbnail %}
{% thumbnail image.image "300" as im %}
    &lt;a href="{{ image.image.url }}">
        &lt;img src="{{ im.url }}" class="image-detail">
    &lt;/a>
{% endthumbnail %}
</pre>
<p>这里我们定义了个固定宽度为300像素的缩略图，当用户第一次打开图片详情页时，一个缩略图会被创建在静态文件夹下，页面的原图片链接会被缩略图链接所代替。启动站点然后打开某个图片详情页，可以在项目根目录的<code>media/cache/</code>找到该图片对应的缩略图。</p>
<p><code>sorl-thumbnail</code>可以使用很多算法生成各种缩略图。如果生成不了缩略图，在<code>settings.py</code>里增加一行<code>THUMBNAIL_DEBUG=True</code>，之后在命令行窗口中可以看到debug信息。具体文档可以看<a href="https://sorl-thumbnail.readthedocs.io/" target="_blank">https://sorl-thumbnail.readthedocs.io/</a>。</p>

<h2 id="c5-5"><span class="title">5</span>使用jQuery发送AJAX请求</h2>
<p>现在要给站点增加AJAX相关的功能，AJAX是<b>Asynchronous JavaScript and XML</b>的简称，这个技术使用一系列方式实现异步HTTP请求，可以从服务器异步取得数据并无需重载全部页面。不像名字里边必须采取XML格式，发送和收取数据可以采用JSON，HTML甚至纯文本。</p>
<p class="emp">AJAX的相关内容可以参考<a href="http://www.conyli.cc/archives/1309" target="_blank">在Django中使用jQuery发送AJAX请求</a>和<a href="http://www.conyli.cc/archives/1517" target="_blank">使用原生JS发送AJAX请求的方法</a>。</p>
<p>我们将要给图片详情页面增加一个按钮，让用户可以点击该按钮表示喜欢该图片，之后再点击该按钮可以取消喜欢该图片。首先我们先为这个功能建立视图函数，编写<code>images</code>应用的<code>views.py</code>文件，添加如下代码：</p>
<pre>
from django.http import JsonResponse
from django.views.decorators.http import require_POST

@login_required
@require_POST
def image_like(request):
    image_id = request.POST.get('id')
    action = request.POST.get('action')
    if image_id and action:
        try:
            image = Image.objects.get(id=image_id)
            if action == "like":
                image.users_like.add(request.user)
            else:
                image.users_like.remove(request.user)
            return JsonResponse({'status': 'ok'})
        except:
            pass
    return JsonResponse({'status': 'ko'})
</pre>
<p>这个视图使用了两个装饰器，<code>@login_required</code>的作用是仅供已登录用户使用，<code>@require_POST</code>的作用是让该视图仅接受<code>POST</code>请求，否则返回一个<code>HttpResponseNotAllowed</code>对象，即HTTP 405错误。Django还提供了一个<code>@require_GET</code>装饰器用于只接受<code>GET</code>请求，还提供了一个<code>@require_http_methods</code>装饰器，可以指定允许哪些类型的HTTP请求。</p>
<p>在这个视图中，我们还是用了两个<code>Post.get</code>取得数据：</p>
<ul>
    <li><code>image_id</code>：用户正在喜欢/不喜欢的图片的ID</li>
    <li><code>action</code>：用户执行的动作，用字符串<code>like</code>表示喜欢，<code>unlike</code>表示不喜欢</li>
</ul>
<p>这里还使用了多对多字段的管理器<code>users_like</code>查询图片与喜欢用户之间的关系，然后使用<code>add()</code>和<code>remove()</code>方法用于添加和去除多对多关系。<code>add()</code>方法即使传入已经存在的数据对象，也不会重复建立关系，<code>remove()</code>即使传入不存在的对象，也不会报错。还有一个<code>clear()</code>方法可以快速的从关联表中全部清除多对多关系。</p>
<p>最后，使用了<code>JsonResponse</code>类，这个类的作用是将一个HTTP请求附加上<code>application/json</code>请求头，并将其中的内容序列化为JSON格式的字符串</p>
<p>编辑<code>images</code>应用的<code>urls.py</code>，为该视图配置URL：</p>
<pre>
    path('like/', views.image_like, name='like'),
</pre>

<h3 id="c5-5-1"><span class="title">5.1</span>加载jQuery</h3>
<p>我们将使用jQuery来发送AJAX请求，为此需要在页面内加载jQuery，为了可以让jQuery在所有的模板内都生效，将其加载代码放入base.html文件中，编辑account应用的base.html文件，在&lt;/body&gt;之前增加下列代码：</p>
<pre>
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
&lt;script>
    $(document).ready(function () {
        {% block domready %}
        {% endblock %}
    });
&lt;/script>
</pre>
<p>我们从Google CDN中加载了jQuery，可以直接在<a href="https://jquery.com/" target="_blank">https://jquery.com/</a>下载jQuery并将其放入本应用的<code>static</code>文件夹内。</p>
<p>在引入jQuery之后，增加了一个<code>&lt;script&gt;</code>标签，定义了一个<code>$(document).ready()</code>，这是一个jQuery方法，在DOM加载完毕后会执行该方法。<b>DOM</b>是<b>Document Object Model</b>的简称，由浏览器在加载页面时生成，以树形结构保存当前页面的所有节点数据。这样保证了JS代码执行时，其要操作的对象已经全部生成。</p>
<p><code>domready</code>块，用于存放在DOM加载完毕后执行的JS代码，我们将在需要执行JS代码的具体模板中编写该块内容。</p>
<p>注意不要混淆JavaScript代码和Djanog模板标签。Django的模板语言在服务端进行处理，转换最终的HTML字节流，浏览器取得HTML字节流创建页面和DOM对象，并执行JavaScript代码。有时候动态的生成JavaScript代码非常方便。</p>
<p>在这一章里，我们直接将JS代码通过模板内块的形式编写进来，这是为了教学方便。最好的方式是从静态文件中导入<code>.js</code>文件，以做到有效解耦HTML与JS。</p>

<h3 id="c5-5-2"><span class="title">5.2</span>AJAX中使用CSRF</h3>
<p>在第二章中已经了解到<code>POST</code>请求中需要包含<code>{% csrf_token %}</code>生成的token数据，以防止跨站伪造请求攻击。不过在AJAX中发送CRSF token有点不方便，所以Django允许在AJAX请求中设置一个<code>X-CSRFToken</code>请求头，其中包含CSRF token的数据。jQuery在发送AJAX请求的时候设置上该请求头，就可以完成CRSF的发送了。</p>
<p>为了在AJAX请求中设置CSRF token，需要做如下事情：</p>
<ol>
    <li>从<code>csrftoken</code> cookie中取得CSRF token，如果开启了CSRF中间件，cookie中一直会有CSRF token数据</li>
    <li>将CSRF token数据设置在AJAX请求的<code>X-CSRFToken</code>请求头中</li>
</ol>
<p>可以在<a href="https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax" target="_blank">https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax</a>阅读更多关于Django中CSRF与AJAX的信息。</p>
<p>修改刚刚在<code>base.html</code>中增加的JS代码部分，修改成下边这样：</p>
<pre>
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
<b>&lt;script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js">&lt;/script></b>
&lt;script>
    <b>let csrftoken = Cookies.get('csrftoken');</b>

    <b>function csrfSafeMethon(method) {</b>
        <b>// 如下的HTTP请求不需要设置CRSF信息</b>
        <b>return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));</b>
    <b>}</b>

    <b>$.ajaxSetup({</b>
        <b>beforeSend: function (xhr, settings) {</b>
            <b>if (!csrfSafeMethon(settings.type) && !this.crossDomain) {</b>
                <b>xhr.setRequestHeader("X-CSRFToken", csrftoken);</b>
            <b>}</b>
        <b>}</b>
    <b>});</b>
        $(document).ready(function () {
        {% block domready %}
        {% endblock %}
    });
&lt;/script>
</pre>
<p>以上代码解释如下：：</p>
<ol>
    <li>通过外部CDN导入了一个JS库<code>js-cookie</code>--一个轻量级的操作cookie的第三方库，可以在<a href="https://github.com/js-cookie/js-cookie" target="_blank">https://github.com/js-cookie/js-cookie</a>找到该库的详细信息。</li>
    <li>通过<code>Cookies.get()</code>方法拿到<code>csrftoken</code>的值</li>
    <li>创建<code>csrfSafeMethod()</code>函数，使用正则验证HTTP请求种类，GET，HEAD，OPTIONS和TRACE类型的请求无需添加CSRF信息</li>
    <li>调用<a href="http://jquery.cuishifeng.cn/jQuery.ajaxSetup.html" target="_blank">$.ajaxSetup()</a>方法，在AJAX请求发送之前，为请求设置<code>X-CSRFToken</code>请求头信息，这个设置会影响到所有jQuery发送的AJAX请求。</li>
</ol>
<p>这样所有的不安全的HTTP请求，比如<code>GET</code>或<code>PUT</code>，都会被添加上CRSF信息。</p>

<h3 id="c5-5-3"><span class="title">5.3</span>jQuery发送AJAX请求</h3>
<p>编辑<code>images</code>应用的<code>images/image/detail.html</code>文件，找到下边这行：</p>
<pre>
{% with total_likes=image.users_like.count %}
</pre>
<p>将其修改成：</p>
<pre>
{% with total_likes=image.users_like.count users_like=image.users_like.all %}
</pre>
<p>然后修改<code>&lt;div class="image-info"></code>其中的内容，如下：</p>
<pre>
&lt;div class="image-info">
    &lt;div>
        &lt;span class="count">
             <b>&lt;span class="total">{{ total_likes }}&lt;/span></b>
             like{{ total_likes|pluralize }}
        &lt;/span>
        <b>&lt;a href="#" data-id="{{ image.id }}" data-action="{% if request.user in users_like %}un{% endif %}like" class="like button"></b>
            <b>{% if request.user not in users_like %}</b>
                <b>Like</b>
            <b>{% else %}</b>
                <b>Unlike</b>
            <b>{% endif %}</b>
        <b>&lt;/a></b>
    &lt;/div>
    {{ image.description|linebreaks }}
&lt;/div>
</pre>
<p>模板内首先通过<code>{% with %}</code>指定了新的变量<code>users_like</code>，用于存放所有喜欢该图片的用户，可以避免反复查询。然后显示总的喜欢该图片的人数，还包含一个按钮样式的<code>&lt;a></code>标签。这个按钮根据当前用户是否在<code>users_like</code>中，显示<em>like</em>或<em>unlike</em>，还为<code>&lt;a></code>标签设置了两个HTML5自定义属性：</p>
<ol>
    <li><code>data-id</code>：当前页面显示图片的ID</li>
    <li><code>data-action</code>：用户的动作，喜欢或者不喜欢，值是<code>like</code>或<code>unlike</code></li>
</ol>
<p>我们将把这两个HTML5自定义属性的值通过AJAX发送给<code>image_like</code>视图，当用户点击喜欢/不喜欢按钮的时候，我们需要在客户端做如下操作：</p>
<ol>
    <li>调用AJAX视图，传入两个参数：<code>id</code>和<code>action</code></li>
    <li>如果AJAX请求成功返回，更新按钮的<code>data-action</code>属性为相反的操作（原来是<code>like</code>则更新为<code>unlike</code>，反之亦反）</li>
    <li>更新喜欢当前图片的用户总数</li>
</ol>
<p>为此来编写页面所需的JS代码，在<code>images/image/detail.html</code>中添加<code>domready</code>块的内容：</p>
<pre>
{% block domready %}
$('a.like').click(function (e) {
    e.preventDefault();
    $.post('{% url 'images:like' %}',
        {
            id: $(this).data('id'),
            action: $(this).data('action'),
        },
        function (data) {
            if (data['status'] === 'ok') {
                let previous_action = $('a.like').data('action');
                //切换 data-action 属性
                $('a.like').data('action', previous_action === 'like' ? 'unlike' : 'like');
                //切换按钮文本
                $('a.like').text(previous_action === 'like' ? 'Unlike' : 'Like');
                //更新总的喜欢人数
                let previous_likes = parseInt($('span.count.total').text());
                $('span.count.total').text(previous_action === 'like' ? previous_likes + 1 : previous_likes - 1);
            }
        }
    );
});
{% endblock %}
</pre>
<p>这段代码的逻辑解释如下：</p>
<ol>
    <li>使用<code>$('a.like')</code>选择所有属于<code>like</code>类的<code>&lt;a&gt;</code>标签</li>
    <li>给<code>&lt;a&gt;</code>标签绑定<code>click</code>事件，每次点击就发送AJAX请求。</li>
    <li>在事件处理函数内，使用<code>e.preventDefault()</code>阻止<code>&lt;a&gt;</code>的默认功能，即阻止打开新的超链接</li>
    <li>使用<code>$.post()</code>发送异步的<code>POST</code>请求。jQuery还提供了<code>$.get()</code>用于发送异步的<code>GET</code>请求，和一个更底层的<code>$.ajax()</code>方法。</li>
    <li>使用<code>{% url %}</code>反向解析出AJAX的请求目标地址</li>
    <li>创建要发送的数据字典，通过<code>&lt;a&gt;</code>标签的<code>data-id</code>和<code>data-action</code>设置<code>id</code>和<code>action</code>键值对。</li>
    <li>设置回调函数，当成功收到AJAX响应时执行，响应数据被包含在对象<code>data</code>中。</li>
    <li>根据<code>data</code>中的<code>status</code>判断值是否为<code>ok</code>，如果是则切换<code>data-action</code>和按钮文本。</li>
    <li>根据刚才执行的结果，对总喜欢人数增加1或者减少1</li>
</ol>
<p class="emp">译者注：原书这里的逻辑是为了让读者可以迅速看出操作结果。在多用户的环境中，不能如此简单的增减1，因为每次执行动作后，该人数的变化未必是1。</p>
<p>打开任意图片详情页，可以看到新增的总人数和按钮，如下所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-i05.jpg" alt=""></p>
<p>点击一下LIKE按钮，可以看到如下所示：</p>
<p><img src="http://img.conyli.cc/django2/C05-i06.jpg" alt=""></p>
<p>如果再点击UNLIKE按钮，可以看到按钮变回LIKE，人数也减少1</p>
<p class="emp">如果提示<code>The 'photo' attribute has no file associated with it</code>错误，原书作者在这里没有讲清楚，错误原因是<code>detail.html</code>页面用了<code>user.profile.photo.url</code>，但没有上传用户头像。在管理后台给每个用户上传头像，再访问任意详情图片页，就不会报错了。直接修改多对多的关系再查看这张表，就能发现显示出同样喜欢了这张图的用户头像和名称。这里如果要完善的话，应该判断用户是否上传头像，如果没有就用默认头像代替。</p>
<p>当编写JavaScript代码发送AJAX请求时，为了方便调试，推荐使用开发工具而不是在Django中编写代码。现代浏览器都带有开发工具用于调试页面和JavaScript代码，通常可以按F12或者在页面上右击选“检查”来启动开发工具。</p>

<h2 id="c5-6"><span class="title">6</span>创建自定义装饰器</h2>
<p>在AJAX视图中使用了<code>@require_POST</code>装饰器以限制视图仅接受<code>POST</code>请求，这显然还不够，需要让这个视图仅接受AJAX请求才行。Django对于HTTP请求对象提供了一个<code>is_ajax()</code>方法，通过HTTP请求头部字段<code>HTTP_X_REQUESTED_WITH HTTP</code>判断该请求是否是一个<code>XMLHttpRequest</code>对象，即一个AJAX请求。</p>
<p>我们准备自行编写一个装饰器，用于检查HTTP请求的<code>HTTP_X_REQUESTED_WITH</code>头部信息，从而限制我们的视图仅接受AJAX请求。Python中的装饰器是接受一个函数为参数的函数，为参数函数附加执行额外功能而不改变原函数的功能。 如果对装饰器不太了解，可以参考Python官方文档：<a href="https://www.python.org/dev/peps/pep-0318/" target="_blank">https://www.python.org/dev/peps/pep-0318/</a>。</p>
<p>我们准备编写的装饰器是通用的，所以在<code>bookmarks</code>项目根目录下建立一个<code>common</code>包，其中的文件如下：</p>
<pre>
common/
    __init__.py
    decorators.py
</pre>
<p>编辑<code>decorators.py</code>文件，添加下列代码：</p>
<pre>
from django.http import HttpResponseBadRequest


def ajax_required(func):
    def wrap(request, *args, **kwargs):
        if not request.is_ajax():
            return HttpResponseBadRequest()
        else:
            return func(request, *args, **kwargs)
    wrap.__doc__ = func.__doc__
    wrap.__name__ = func.__name__
    return wrap
</pre>
<p>这段代码就是自定义的<code>ajax_required</code>装饰器函数。其中定义了一个<code>wrap</code>函数，如果请求不是AJAX请求，就返回<code>HttpResponseBadRequest</code>即HTTP 400错误。如果是AJAX请求，则原来视图的功能正常执行。</p>
<p>然后编辑<code>images</code>应用的<code>views.py</code>文件，导入新的包然后为视图添加自定义装饰器：</p>
<pre>
<b>from common.decorators import ajax_required</b>

<b>@ajax_required</b>
@login_required
@require_POST
def image_like(request):
    # ......
</pre>
<p>如果用浏览器直接访问<a href="http://127.0.0.1:8000/images/like/" target="_blank">http://127.0.0.1:8000/images/like/</a>，会得到400错误。（未添加该装饰器之前，得到的是由<code>@require_POST</code>返回的405错误）。</p>
<p class="hint">如果你发现项目中的很多视图对同一个条件做判断，可以考虑将该判断逻辑编写为一个自定义装饰器。</p>


<h2 id="c5-7"><span class="title">7</span>AJAX分页</h2>
<p>我们将制作一个图片列表页，用于列出我们网站所有的图片。这里将使用AJAX动态的发送图片数据，即当页面滚动到底部的时候，就会继续显示新的图片，直到全部图片都显示完毕。</p>
<p>为此我们将编写一个图片列表视图，同时处理普通的HTTP请求和AJAX请求。当用户一开始以<code>GET</code>请求方式访问图片列表页时，会显示第一页图片。当用户滚动到页面底部时，通过AJAX发送请求给该视图，返回下一页图片显示在页面底部；如此反复直到所有图片都显示完毕。</p>
<p>编辑<code>images</code>应用的v<code>iews.py</code>文件，创建一个新的视图：</p>
<pre>
from django.http import HttpResponse
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

@login_required
def image_list(request):
    images = Image.objects.all()
    paginator = Paginator(images, 8)
    page = request.GET.get('page')
    try:
        images = paginator.page(page)
    except PageNotAnInteger:
        # 如果页数不是整数，就返回第一页
        images = paginator.page(1)
    except EmptyPage:
        # 如果是不存在的页数，而且请求是AJAX请求，返回空字符串
        if request.is_ajax():
            return HttpResponse('')
        # 如果页数超范围，显示最后一页
        images = paginator.page(paginator.num_pages)
    if request.is_ajax():
        return render(request, 'images/image/list_ajax.html', {'section': 'images', 'images': images})
    return render(request, 'images/image/list.html', {'section': 'images', 'images': images})
</pre>
<p>在这个视图中，先查询所有图片，然后使用内置的分页功能创建<code>Paginator</code>对象，按照8个图片一页进行分组。当HTTP请求的页面不存在的时候捕捉<code>EmptyPage</code>异常，判断此时请求的种类，如果是AJAX请求，说明页面到了底部，返回空字符串即可。我们将结果渲染到两个不同的模板中：</p>
<ol>
    <li>对于AJAX请求，渲染<code>list_ajax.html</code>模板，这个模板仅包含图片内容。</li>
    <li>对于普通请求，渲染<code>list.html</code>，这个模板会继承<code>base.html</code>，并且<code>include</code><code>list_ajax.html</code>模板</li>
</ol>
<p>编辑<code>images</code>应用的<code>urls.py</code>文件，为新视图添加一行URL：</p>
<pre>
    path('', views.image_list, name='list'),
</pre>
<p>最后来创建前述的两个模板，在<code>images/image/</code>模板目录下创建<code>list_ajax.html</code>，添加如下代码：</p>
<pre>
{% load thumbnail %}

{% for image in images %}
  &lt;div class="image">
    &lt;a href="{{ image.get_absolute_url }}">
      {% thumbnail image.image "300x300" crop="100%" as im %}
        &lt;a href="{{ image.get_absolute_url }}">
          &lt;img src="{{ im.url }}">
        &lt;/a>
      {% endthumbnail %}
    &lt;/a>
    &lt;div class="info">
      &lt;a href="{{ image.get_absolute_url }}" class="title">
        {{ image.title }}
      &lt;/a>
    &lt;/div>
  &lt;/div>
{% endfor %}
</pre>
<p>上述模板显示图片列表，将使用这个模板渲染AJAX请求返回的结果。在相同目录下创建<code>list.html</code>文件并添加如下代码：</p>
<pre>
{% extends 'base.html' %}

{% block title %}
Images bookmarked
{% endblock %}

{% block content %}
&lt;h1>Images bookmarked&lt;/h1>
&lt;div id="image-list">
{% include 'images/image/list_ajax.html' %}
&lt;/div>
{% endblock %}
</pre>
<p>这个页面继承<code>base.html</code>，同时包含了<code>list_ajax.html</code>，这个模板中还必须包含发送AJAX的JS代码，所以继续在其中编写<code>domready</code>块的内容：</p>
<pre>
{% block domready %}
let page = 1;
let empty_page = false;
let block_request = false;
$(window).scroll(
    function () {
        let margin = $(document).height() - $(window).height() - 200;
        if ($(window).scrollTop() > margin && empty_page === false && block_request === false) {
            block_request = true;
            page += 1;
            $.get("?page=" + page, function (data) {
                if (data === "") {
                    empty_page = true;
                }
                else {
                    block_request = false;
                    $('#image-list').append(data)
                }
            });
        }
    }
);
{% endblock %}
</pre>
<p>这段代码实现了滚动加载功能，其中的逻辑解释如下：</p>
<ol>
    <li>首先创建如下变量：
        <ol>
            <li><code>page</code>：存储当前页数</li>
            <li><code>empty_page</code>：判断是否已经到达页面底部。如果已经到达底部，阻止发送AJAX请求</li>
            <li><code>block_request</code>：在已经发送AJAX请求但还未收到响应时阻止再发送AJAX请求</li>
        </ol>
    </li>
    <li>使用<code>$(window).scroll()</code>方法监听滚动事件</li>
    <li>计算页面高度和窗口高度的差，记录在<code>margin</code>变量中，表示未显示的页面的高度。再减去200表示当滚动到离窗口底部还有200像素的时候发送AJAX请求。</li>
    <li>判断<code>block_request</code>和<code>empty_page</code>同时为<code>False</code>的情况下发送AJAX请求。</li>
    <li>发送AJAX请求之后将<code>block_request</code>设置为<code>True</code>，避免再次发送，同时将<code>page</code>增加1，下一次发送的时候就获取下一个分页结果。</li>
    <li>使用<code>$.get()</code>方法发送类型为<code>GET</code>的AJAX请求，将响应数据保存到<code>data</code>中，然后处理以下两种情况：
    <ol>
        <li>响应数据中无内容：说明视图返回了空字符串，已经没有更多的分页结果可以加载，此时将<code>empty_page</code>设置为<code>True</code>，阻止后续所有AJAX请求发送</li>
        <li>响应数据中有数据：说明得到了新的分页结果，将其中的内容追加到id属性为<code>image-list</code>的元素内部，页面下方增加出新的图片。</li>
    </ol></li>
</ol>
<p>在浏览器中打开<a href="http://127.0.0.1:8000/images/" target="_blank">http://127.0.0.1:8000/images/</a>，可以看到如下页面（需要自行添加一些图片）：</p>
<p><img src="http://img.conyli.cc/django2/C05-08.png" alt=""></p>
<p>滚动该页面到底部，确保在数据库中添加了超过8张图片，会看到额外的图片被加载并显示出来</p>
<p>最后修改<code>base.html</code>文件中顶部导航栏的连接，添加下列代码：</p>
<pre>
&lt;li {% if section == "images" %}class="selected"{% endif %}>
    &lt;a href="{% url "images:list" %}">Images&lt;/a>
&lt;/li>
</pre>
<p>现在就可以通过用户首页访问图片清单页面了。</p>

<h1><b>总结</b></h1>
<p>这一章建立了一个小书签程序，用于分享图片到本站，还实现了jQuery发送AJAX请求和使用AJAX动态加载页面。</p>
<p>下一章将学习建立关注系统，涉及到模型的通用关系，信号功能和数据库的非规范化等知识，还将学习到在Django中使用Redis数据库。</p>
</body>
</html>