Реклама

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

РуководствоDjangoDjango, jQuery, AJAX, bookmark, favorite1447

На сайте добавлена возможность помечать статьи, комментарии, темы и ответы на форуме как избранное. При этом пометка в качестве избранного не предусматривает перезагрузку страницы, поскольку для этих действий используется механизм 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);
});
Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
  • BoostEX
  • 17 августа 2017 г. 16:45

C++ - Тест 001. Первая программа и типы данных

  • Результат - 73 баллов
  • Nordman
  • 15 августа 2017 г. 20:40

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

  • Результат - 66 баллов

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

  • Результат - 33 баллов
Последние комментарии
  • EVILEG
  • 17 августа 2017 г. 18:33

Qt/C++ - Урок 069. Шифрование методом XOR

Не обратил внимания на это, Проверял с большим текстом.. По идее не должно.

Qt/C++ - Урок 069. Шифрование методом XOR

Шифрует/дешифрует текст от 8 символов, так и должно быть?

  • EVILEG
  • 15 августа 2017 г. 20:32

Qt/C++ - Урок 048. QThread - работа с потоками с помощью moveToThread

Нууу... тут уже вопрос к самому Qt4.8. Если честно, идей нет, да и копаться в deprecated коде желания тоже нет.

  • t000r
  • 15 августа 2017 г. 19:49

Qt/C++ - Урок 048. QThread - работа с потоками с помощью moveToThread

В qt5.6 всё нормально заработало. С 4.8 - нет

  • EVILEG
  • 15 августа 2017 г. 17:44

Qt/C++ - Урок 050. Логирование событий Qt приложения в текстовый файл

Я полистал информацию в интернетах, вроде как кто-то пытается подружить его с Qt5, но успешных результатов не нашёл. Да и на сайте как-то не заметно информации о том, что конкретно ему нужно, ...

Сейчас обсуждают на форуме
  • EVILEG
  • 19 августа 2017 г. 17:47

Проблемы с памятью

Добрый день! При работе со StackView, когда вы делаете push страниц, они постоянно добавляются и добавляются. Они не должны в данном случае удаляться, если вы просто пушите страницы в Sta...

  • MinusNol
  • 18 августа 2017 г. 16:22

WINAPI и Qt.

Да, покопаюсь. С WINAPI плохо знаком :) Но я уже существенно улучшил свой код благодаря вашему совету, благодарю вас :)

  • alex_lip
  • 18 августа 2017 г. 13:50

Я только учусь..(как правильно присвоить значение объекту другого класса)

хм. Похоже файл где-то в кэше остался. Я его второй раз  не прикреплял.

Сборка Qt / C++ проекта под windows и linux

нет, я тут кое что попробую- о результатах скажу)))

  • EVILEG
  • 16 августа 2017 г. 13:38

Перевод кодировки строки из windows 1251 в Utf-8

Здесь необходимо использовать QTextCodec. Вещь это очень хитрая в том плане, что объект этого класса необходимо создавать с определённой кодировкой. Поскольку он будет гонять данные от заданной код...