Привет, ребята, сегодня я покажу вам, как изменить стандартную систему на систему компонентов с помощью 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 © 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 и многими другими потенциальными компонентами. Помните, что вы можете улучшить порядок в своем проекте, если разделите файлы на компоненты и виды, создав для этого отдельные папки.