Привет, ребята, сегодня я покажу вам, как изменить стандартную систему на систему компонентов с помощью Django. Я имею в виду, конечно, если у вас есть, например, Home.html или Dashboard.html и у вас есть такие же компоненты, как верхний и нижний колонтитулы и т. д., вам не нужно вводить так много строк кода.

В VUE.js, например, вы делите свои компоненты на «представления» и «компоненты». Компоненты «Header.vue», «Footer.vue» и так далее. Представления: «Contact.vue», «Home.vue» и так далее. И то же самое мы хотим сделать в нашем приложении, используя DJANGO.

Хорошо, давайте перейдем к примерам:

Как вы можете видеть выше, в «Dashboard.html» и «Home.html» один и тот же компонент сохранен дважды. Да это не хорошо! мы должны избегать повторения одного и того же кода, соблюдая принцип: "Не повторяйся" (DRY).

ДА! Мы должны избегать повторного написания одного и того же кода, поэтому для этого нам нужно создать один компонент и вызвать его там, где мы хотим его разместить.

Хотите, чтобы вы создали home.html и хотите реализовать там верхний колонтитул и нижний колонтитул, а после него вы хотите реализовать тот же самый header и нижний колонтитулвфайле dashboard.html? НЕ ПОВТОРЯЙТЕСЬ! СОЗДАВАЙТЕ КОМПОНЕНТЫ!

давайте перепишем наш код на компоненты

Хорошо, теперь мы хотим взять из этих двух компонентов ‹Заголовок› и создать из него компонент, который мы назовем в «Home.html» и «Dashboard.html» и оказывать. Возьмите код ‹HEADER› из любого из них и создайте новый файл .html, используя этот код.

Мы создали новый компонент с именем «Header.html» и вставили блок кода ‹HEADER› из home.html. Теперь вы можете удалить блок кода ‹HEADER› из «Header.html» и добавить в «Home.html»:

  {% include 'header.html' %}

Что означает этот код выше?

«Здравствуйте, DJANGO, реализуйте здесь мой компонент HEADER.HTML в моем home.html.

Полный блок кода «home.html»:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>Web Shop</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    .container {
      max-width: 85% !important;
    }
    .center-text {
      text-align: center;
    }
    .padded-div {
      padding: 20px 0;
    }
  </style>
  
</head>
<body>
  {% include 'header.html' %} # <--- here we add header component

  <!-- Carousel -->
<div class="container">
  <div id="bannerCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          <div class="carousel-item active">
              <a href="#"><img class="d-block mx-auto w-100" src="{% static 'assets/banners/banner_eng.jpg' %}" alt="First slide"></a>
          </div>
          <div class="carousel-item">
              <a href="#"><img class="d-block mx-auto w-100" src="{% static 'assets/banners/banner_german.jpg' %}" alt="Second slide"></a>
          </div>
          <div class="carousel-item">
              <a href="#"><img class="d-block mx-auto w-100" src="{% static 'assets/banners/banner_italy.jpg' %}" alt="Third slide"></a>
          </div>
      </div>
      <a class="carousel-control-prev" href="#bannerCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#bannerCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
  </div>
</div>

  <!-- Middle content -->
  <main class="container">
    <div class="row">
      <div class="col-md-12 center-text padded-div">
        <h1>Welcome to our Web Shop!</h1>
        <p>Explore our wide range of products.</p>
      </div>
    </div>
    <div class="row padded-div">
    {% for product in products %}
      <div class="col-md-3">
        <div class="card" style="width: 100%;">
          <img class="card-img-top" src="{{ product.img }}" alt="Product image">
          <div class="card-body">
            <h5 class="card-title">{{ product.title }}</h5>
            <p class="card-text">{{ product.description }}</p>
            <form method="POST" action="{% url 'add_to_cart' product_id=product.id %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-primary">Add to Cart ${{ product.price }}</button>
            </form>
          </div>
        </div>
      </div>
      {% if forloop.counter|divisibleby:4 and not forloop.last %}
        </div><div class="row padded-div">
      {% endif %}
    {% endfor %}
    </div>
  </main>
  
  <!-- Footer -->
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Web Shop &copy; 2023. All rights reserved.</span>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <script>
    function addToCart(productId, productTitle, productPrice) {
      console.log('Adding to cart:', productId, productTitle, productPrice);
      
      // Perform the necessary AJAX request to add the product to the cart
      // ...

      // Optionally, redirect the user to the cart page
      // ...
    }
  </script>

</body>
</html>

Как видите, мы создали из нашего ‹HEADER›отдельный компонент, который мы сможем загрузить в других представлениях или даже компонентах.

При таких действиях мы следуем золотому правилу Не повторяйтесь (СУХОЙ).

Мы можем сделать то же самое с FOOTER и многими другими потенциальными компонентами. Помните, что вы можете улучшить порядок в своем проекте, если разделите файлы на компоненты и виды, создав для этого отдельные папки.