"Видеоурок"

Код на Гитхабе

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

Добавить панель поиска в навигацию

Это будет довольно просто. Все, что нам нужно сделать, это добавить форму внутри панели навигации, добавить атрибут имени в поле ввода и установить действие на URL-адрес django, который мы создадим позже. мы также будем использовать ionicons, которые мы использовали ранее, чтобы добавить кнопку увеличительного стекла в строку поиска.

Вот файл navigation.html после изменений:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{% url 'index' %}">Video Sharer</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'video-search' %}">
        <input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" aria-label="Search" value="{{ request.GET.q }}">
        <button class="search-button" type="submit"><ion-icon name="search-outline"></ion-icon></button>
      </form>
      <ul class="navbar-nav mr-auto">
      </ul>
      <ul class="navbar-nav">
        {% if user.is_authenticated %}
        <li class="nav-item">
            <a class="nav-link" href="{% url 'video-create' %}">Upload Video</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_logout' %}">Sign Out</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'profile' user.profile.pk %}"><img src="{{ user.profile.image.url }}" width="35" height="35" class="d-inline-block rounded-circle" alt="Profile"></a>
        </li>
        {% else %}
        <li class="nav-item">
            <a class="nav-link" href="{% url 'account_signup' %}">Register</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">Sign In</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </nav>

Атрибут name очень важен, потому что именно так будет называться параметр, к которому мы обратимся позже. С запросом GET данные формы будут переданы в URL-адрес, что нам и нужно для этого.

Далее нам нужно построить представление для результатов поиска. Нам нужно получить поисковый запрос, получив параметр q из запроса GET. Мы будем использовать объект Q для более сложного запроса для сортировки по нескольким различным частям модели Video. Мы будем искать по названию, описанию и имени пользователя загрузчика. Оттуда все, что нам нужно сделать, это передать полученный список запросов в шаблон.

from django.db.models import Q
class SearchVideo(View):
	def get(self, request, *args, **kwargs):
		query = self.request.GET.get("q")
		query_list = Video.objects.filter(
			Q(title__icontains=query) |
			Q(description__icontains=query) |
			Q(uploader__username__icontains=query)
		)
		context = {
			'query_list': query_list,
		}
		return render(request, 'videos/search.html', context)

Теперь нам нужно создать шаблон для этого результата поиска. Об этом особо нечего сказать, нам просто нужно создать что-то похожее на представление индекса, за исключением того, что наши результаты теперь будут только теми, которые соответствуют нашему запросу.

{% extends 'videos/base.html' %}
{% block content %}
	<div class="container">
		<div class="row justify-content-center">
			{% for object in query_list %}
			<div class="card col-md-3 col-sm-12 mr-md-2 mt-5 p-3 border-0">
				<a href="{% url 'video-detail' object.pk %}"><img src="/media/{{ object.thumbnail }}" width="256" height="144"></a>
				<div class="card-body">
					<a class="link-text" href="{% url 'video-detail' object.pk %}"><h5 class="text-center">{{ object.title }}</h5></a>
					<p class="text-muted text-center m-0">{{ object.uploader }}</p>
					<p class="text-muted text-center">{{ object.date_posted | date:"M d, Y" }}</p>
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
{% endblock content %}

Наконец, нам нужно создать URL-адрес для этого представления. Ничего особенного для этого не нужно, параметр будет автоматически добавлен к url ​​после того, как мы выполним поиск. Все, что нам нужно сделать, это настроить URL-адрес для нашего представления.

from django.contrib import admin
from django.urls import path
from .views import CreateVideo, DetailVideo, UpdateVideo, DeleteVideo, VideoCategoryList, SearchVideo
urlpatterns = [
    path('search/', SearchVideo.as_view(), name='video-search'),
    path('create/', CreateVideo.as_view(), name='video-create'),
    path('<int:pk>/', DetailVideo.as_view(), name='video-detail'),
    path('<int:pk>/update', UpdateVideo.as_view(), name='video-update'),
    path('<int:pk>/delete', DeleteVideo.as_view(), name='video-delete'),
    path('category/<int:pk>/', VideoCategoryList.as_view(), name='category-list'),
]

Это все, что нам нужно сделать, чтобы все заработало. Теперь вы сможете искать видео, которые мы разместили на сайте. На этом мы остановимся в этом уроке, мы вернемся позже и добавим больше в это приложение.