© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

Django - Урок 022. Добавление системы закладок (избранное) на сайте

jQuery, Django, AJAX, bookmark, favorite

На сайте добавлена возможность помечать статьи, комментарии, темы и ответы на форуме как избранное. При этом пометка в качестве избранного не предусматривает перезагрузку страницы, поскольку для этих действий используется механизм AJAX-запросов.

Для того, чтобы реализовать систему закладок, необходимо:

  • Добавить таблицу, которая реализует отношение Many-to-Many между пользователем и статьёй или комментарием.
  • Добавить view, который будет обрабатывать данный запрос.
  • Добавить url для обработки запроса на добавление или исключение объекта из избранного.
  • Написать html-код, который будет отвечать за отображение счётчика добавленного в закладки.
  • Добавить javascript обработчик, который будет вызывать AJAX-запрос.

На данном сайте в качестве иконки счётчика используется иконка звезды из Bootstrap.

Many-to-Many таблица для закладок

Сделаем возможность добавления закладок для статей и комментариев. Для этого сделаем общую абстрактную модель , от которой будем наследоваться для конкретного типа контента на сайте. В абстрактной модели создадим поле пользователя, которое будет единым для всех моделей закладок.

class BookmarkBase(models.Model):
    class Meta:
        abstract = True

    user = models.ForeignKey(User, verbose_name="Пользователь")

    def __str__(self):
        return self.user.username

Далее наследуемся от этой модели, чтобы создать две отдельных модели данных для комментариев и статей.

Здесь добавим поле obj , которое будет отвечать за внешний ключ на таблицу контента: Article или Comment. Важно, чтобы поле называлось одинаково в обеих моделях. Тогда можно будет написать один view для всех таблиц закладок.

class BookmarkArticle(BookmarkBase):
    class Meta:
        db_table = "bookmark_article"

    obj = models.ForeignKey(Article, verbose_name="Статья")


class BookmarkComment(BookmarkBase):
    class Meta:
        db_table = "bookmark_comment"

    obj = models.ForeignKey(Comment, verbose_name="Комментарий")

views.py

Для обработки запроса на добавление в закладки или удаление из закладок создадим view, которое сможет работать с любой таблицей закладок, которая будет удовлетворять общему виду, представленному выше.

# -*- coding: utf-8 -*-

import json

from django.contrib import auth
from django.http import HttpResponse
from django.views import View


class BookmarkView(View):
    # в данную переменную будет устанавливаться модель закладок, которую необходимо обработать
    model = None

    def post(self, request, pk):
        # нам потребуется пользователь
        user = auth.get_user(request)
        # пытаемся получить закладку из таблицы, или создать новую
        bookmark, created = self.model.objects.get_or_create(user=user, obj_id=pk)
        # если не была создана новая закладка, 
        # то считаем, что запрос был на удаление закладки
        if not created:
            bookmark.delete()

        return HttpResponse(
            json.dumps({
                "result": created,
                "count": self.model.objects.filter(obj_id=pk).count()
            }),
            content_type="application/json"
        )

Заметьте, что в данном коде использовалось сравнение obj_id=pk , что означает, что мы пытаемся найти запись в таблице закладок по id объекта. Поскольку во всех моделях - это поле одинаковое, то проблем возникнуть не должно с подобным синтаксисом.

urls.py

А теперь посмотрим, как будут выглядеть url для обработки запросов на добавление контента в закладки.

# -*- coding: utf-8 -*-

from django.conf.urls import url
from django.contrib.auth.decorators import login_required

from . import views
from users.models import BookmarkArticle, BookmarkComment

app_name = 'ajax'
urlpatterns = [
    url(r'^article/(?P<pk>\d+)/bookmark/$',
        login_required(views.BookmarkView.as_view(model=BookmarkArticle)),
        name='article_bookmark'),
    url(r'^comment/(?P<pk>\d+)/bookmark/$',
        login_required(views.BookmarkView.as_view(model=BookmarkComment)),
        name='comment_bookmark'),
]

Чтобы выполнить этот запрос пользователь должен быть авторизован, за что отвечает декоратор login_required .

URL в данном случае определяет, какой тип контента добавляется в закладки, также определяет pk, этого контента, а также действие, которое необходимо совершить. Ведь помимо добавления в закладки, можно добавить систему лайков, репостов и т.д. по тому же самому принципу.

html

В моём случае html-код выглядит так:

<div data-id="{{ like_obj.id }}" data-type="article" data-action="bookmark" title="Избранное">
    <span class="glyphicon glyphicon-star"></span>
    <span data-count="bookmark">{{ like_obj.get_bookmark_count }}</span>
</div>

Здесь имеется несколько кастомных атрибутов:

  • data-id - отвечает за pk контента, который можно добавлять в закладки.
  • data-type - тип контента, это же название фигурирует и в url.
  • data-action - действие, которое нужно совершить, в данном случае добавление в закладки
  • data-count - счётчик, показывающий сколько пользователей добавили контент в закладки

Что касается следующего кода like_obj.get_bookmark_count, то это тоже единообразный метод, которая добавляется в модели контента, например для статей будет выглядеть следующим образом:

def get_bookmark_count(self):
    return self.bookmarkarticle_set().all().count()

javascript

AJAX-запросы для данного функционала создаются с помощью библиотеки jQuery .

При работе с AJAX необходимо учитывать несколько нюансов:

  1. Если у вас мультиязычный сайт, у которого различаются url по текущему языку, то лучше сделать отдельное api для AJAX, которое будет независимо от языка, иначе нужно будет учитывать язык в url при создании AJAX-запроса. Если не учитывать язык, то будет производится редирект AJAX-запроса на текущий url с учётом языка, и запрос не будет срабатывать. То есть редиректов быть не должно.
  2. Django не примет AJAX-запрос, если он не будет настроен на использование CSRF токена, который служит для борьбы с подделкой межсайтовых запросов. При каждом запросе страницы Django подмешивает CSRF токен в Cookies, оттуда его и можно будет взять.

Настройка AJAX на использование CSRF токена

Следующий код можно включить в скрипт на каждой странице сайта, где нужно использоваться AJAX. Он автоматически будет настраивать AJAX на использование CSRF Токена.

// Получение переменной cookie по имени
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Настройка AJAX
$(function () {
    $.ajaxSetup({
        headers: { "X-CSRFToken": getCookie("csrftoken") }
    });
});

Обработчики добавления в закладки и их подключение

В ниже следующем коде формируется AJAX-запрос на вызов добавления или удаления из закладок контента. В данном случае код будет универсален как для статей, так и для комментариев.

В url запроса можно наблюдать следующую строку "/api/" + type + "/" + pk + "/" + action + "/", которая означает, что модуль для AJAX запросах висит на префиксе /api/ , то есть на этот url он подключён в основном urls.py файле проекта, далее идёт тип контента, его первичный ключ и действие которое нужно совершить. Поскольку все эти данные забираются из атрибутов data, то итоговый url будет выглядеть следующим образом:

  • /api/article/112/bookmark/ - для статей
  • /api/comment/14/bookmark/ - для комментариев

В обработчике успешного результата можно добавить подсвечивание звёздочки закладки для текущего пользователя и т.д.

function to_bookmarks()
{
    var current = $(this);
    var type = current.data('type');
    var pk = current.data('id');
    var action = current.data('action');

    $.ajax({
        url : "/api/" + type + "/" + pk + "/" + action + "/",
        type : 'POST',
        data : { 'obj' : pk },

        success : function (json) {
            current.find("[data-count='" + action + "']").text(json.count);
        }
    });

    return false;
}

// Подключение обработчика
$(function() {
    $('[data-action="bookmark"]').click(to_bookmarks);
});

Для Django рекомендую VDS-сервера хостера Timeweb .

Комментарии

3 февраля 2018 г. 22:40

Доброго времени суток Евгений. Не подскажете как сделать иконки (лайк-дизлайк) кликабельными?

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
22 мая 2018 г. 9:32
nrjjejdjdhhrjf

C++ - Тест 005. Структуры и Классы

  • Результат 75 баллов
  • Очки рейтинга 2
21 мая 2018 г. 8:30
Nasty

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат 10 баллов
  • Очки рейтинга -10
20 мая 2018 г. 12:26
Venic

C++ - Тест 002. Константы

  • Результат 58 баллов
  • Очки рейтинга -2
Последние комментарии
19 мая 2018 г. 12:44
EVILEG

Django - Snippet 001. get_object_or_none

А вы гарантируете, что метод first вернёт нужный объект, если в таблице две похожих записи? Этого никто не гарантирует. Может возникнуть неопределённое поведение приложения, если запись не так...
19 мая 2018 г. 12:34
Pavel

Django - Snippet 001. get_object_or_none

Согласен с тем что ваше решение более очевидно при чтении кода. first() же здесь применяется не совсем по назначению. А с последствиями "моего" решения не согласен. Метод вернёт только один об...
19 мая 2018 г. 12:27
EVILEG

Как я использовал FilterView заместо ListView для упрощения фильтрации

Может быть, а может и нет, все имеют различную речь.. не могу отвечать за всех пользователей ресурса.. поскольку каждый пользователь может дополнить материал ресурса статьями.
19 мая 2018 г. 12:25
EVILEG

Django - Snippet 001. get_object_or_none

В вашем случае происходит подмена сущностей. Вместо того, чтобы взять один конкретный объект, вы забираете queryset а потом берёте из него первый объект. Нехорошо будет, если queryset в каком-...
19 мая 2018 г. 11:11
Pavel

Django - Snippet 001. get_object_or_none

Тоже искал подобную функцию, чтобы не обрабатывать каждый раз исключения. И нашёл на so совет использовать вместо неё метод менеджера first(), который возвращает None при пустом queryset. Т.е ...
Сейчас обсуждают на форуме
22 мая 2018 г. 16:50
vitaliy_antipov

Данные из QChartview в QTableWidget

Здравствуйте! Пишу приложение для парсинга текстового файла и вывода данных на график. Столкнулся с проблемой передачи данных от курсора мыши на графике в ячейку таблицы. mainwindow.h ...
22 мая 2018 г. 16:33
5_voron_5

Визуализация математических формул

Нужна помощь с визуализацией математических формул в qt на версии 5.4 и ниже, за деньги разумеется, кого интересует вот мыло svet_31_m@mail.ru
22 мая 2018 г. 6:57
EVILEG

Выводит мусор

Имено, класс-потомок. Если добавляли кнопки в графическом дизайнере, то нужно вызвать контекстное меню на кнопке в дизайнере, выбрать пункт "преобразовать в" либо "Promote to". Там будет ...
20 мая 2018 г. 2:05
vitaliy_antipov

Удаление серии из графика

Ой, извините, совсем запарился. Туплю: void MainWindow::onDelSeries(int i){ chartview->chart()->findChild<QLineSeries *>("obj" + QString::number(i))->deleteLater();...
18 мая 2018 г. 8:55
mak_trefa

Сборщик мусора и Connections в qml

можешь попробовать в деструкторе модели вызвать throw; и в дебагере посмотреть stacktrace

Рекомендуемые страницы