Какова наилучшая практика работы с кнопками в Djnago?
Я не уверен в лучшей практике генерации большого количества кнопок, которые будут соединяться с бэкендом Django после нажатия.
В настоящее время я делаю образец интернет-магазина на Django в качестве моего первого проекта, чтобы я мог изучить фреймворк.
У каждого товара на странице будет кнопка для добавления товара в корзину зарегистрированного пользователя.
Нужно ли мне сделать каждую кнопку в виде формы, или обрабатывать кнопки с помощью JS и получать API. Я не преминул заметить, что Django сильно полагается на формы как стандартный способ получения пользовательского ввода, но делать так много сгенерированных форм на одной странице (товары будут в виде списка) просто не кажется правильным
Я думал о решении следующим образом:
document.querySelectorAll('.add_product').forEach(e => {
e.addEventListener('click', e =>
// POST request (with crsf cookie and all)
// redirecting the user, depending on the output
)
})
Просто получить все кнопки, получить data-pk из <button>, и отправить его с помощью JS Fetch API как POST запрос в конечную точку Django. Мне не нравится то, что я вижу потенциальные проблемы CORS, и я не знаю, правильно ли это, просто обходить CORS, когда вам кажется, что это удобно (безопасность не является одной из моих сильных сторон. Одна из причин использовать Django).
Вторая проблема, которую я вижу в моем подходе, заключается в том, что перенаправление с помощью JS кажется мне грязным, в то время как 90% этого обрабатывается HttpResponses в Django.
Если кому-то это будет полезно, вот как я отправляю данные о товаре в JS (переменная items - это сериализованный QuerySet из стандартной SQLite3 базы данных Django). Я делаю это таким образом, вместо обычного шаблона SSR, потому что я планирую добавить фильтры товаров, и я не хочу обновлять страницу, когда кто-то меняет фильтр или категорию
let data = {{items | safe}}; // THIS ONE LINE IS IN THE <script> TAG IN THE TEMPLATE
data.forEach(e => {
output +=
`<div class="product">${e.fields.item_name}>
<button data-pk="${e.pk}" class="add_product">
add to cart
</button>
</div>`
});
Зависит от того, как настроены ваши модели, но вам не нужна форма для отображения каждого товара и последующего добавления в корзину, вы можете добавить функцию к вашей модели товаров, как это:
def add_to_cart_url(self):
return reverse("add-to-cart", kwargs={"slug": self.slug})
которая вызывает функцию, добавляющую товар в вашу модель "order items", если у вас такая архитектура.
Я предлагаю вам посмотреть это видео, часть, где он добавляет и удаляет товары в корзину: https://www.youtube.com/watch?v=z4USlooVXG0