使用指南：Django Bootstrap Modal Forms

束鲲淳Grayson

于 2024-09-15 08:19:10 发布

阅读量829

点赞数 22

本文链接：https://blog.csdn.net/gitblog_01120/article/details/142275646

版权

使用指南：Django Bootstrap Modal Forms

django-bootstrap-modal-forms A Django plugin for creating AJAX driven forms in Bootstrap modal. 项目地址: https://gitcode.com/gh_mirrors/dj/django-bootstrap-modal-forms

项目介绍

Django Bootstrap Modal Forms 是一个旨在简化 Django 中模态框内 AJAX 驱动表单创建过程的插件。它允许开发者以优雅的方式在 Bootstrap 的模态对话框中展示并处理表单，通过 AJAX 提交数据，无需页面刷新，提供更好的用户体验。

该插件支持 Bootstrap 4 和 Bootstrap 5，并且兼容性良好，能够与 Django 的 CBV（类视图）和 FBV（函数视图）无缝集成。

项目快速启动

环境准备

确保你的开发环境中已安装 Django 及 Node.js（用于编译静态文件，虽然这个步骤对本插件直接使用不是必需的），并且熟悉 Docker 有助于快速实验。

安装与配置

安装插件: 在你的 Django 项目中，通过 pip 安装此插件。
```
pip install django-bootstrap-modal-forms
```
添加到INSTALLED_APPS: 修改你的 settings.py 文件，加入 bootstrap_modal_forms 到 INSTALLED_APPS 列表中。
```
INSTALLED_APPS = [
    ...
    'bootstrap_modal_forms',
]
```

引入前端资源: 确保你的模板中包含了 Bootstrap、jQuery 及 jquery.bootstrap.modal.forms.js。对于 Bootstrap 4，示例如下：

<!-- 在<head>部分 -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.css' %}">
<!-- 在<body>底部 -->
<script src="{% static 'assets/js/jquery-3.2.1.min.js' %}></script>
<script src="{% static 'assets/js/popper.min.js' %}></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}></script>
<script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}></script>

基础使用: 创建一个简单的表单模型、HTML模板以及对应的视图和URL配置。

示例代码快速启动

假设我们要创建一个书籍创建的模态表单：

创建模型表单

# models.py 或 forms.py
from django import forms
from bootstrap_modal_forms.forms import BSModalModelForm
from .models import Book  # 假定已有Book模型

class BookModelForm(BSModalModelForm):
    class Meta:
        model = Book
        fields = ['title', 'author', 'price']

定义视图

# views.py
from bootstrap_modal_forms.generic import BSModalCreateView
from .models import Book
from .forms import BookModelForm

class BookCreateView(BSModalCreateView):
    template_name = 'create_book.html'
    form_class = BookModelForm
    success_message = '成功: 书籍已创建'
    success_url = reverse_lazy('index')

URL配置

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # ...其他URL...
    path('create/', views.BookCreateView.as_view(), name='create_book'),
]

模板HTML

<!-- templates/create_book.html -->
{% extends "base.html" %}
{% block content %}
<button id="create-book-btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  创建新书
</button>
{% csrf_token %}
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- 此处应插入由modalForm JS生成的内容 -->
</div>
<script>
$(document).ready(function(){
    $('#create-book-btn').modalForm({formURL:'{% url 'create_book' %}'});
});
</script>
{% endblock %}