后端开发简介

在我的上一篇文章中，我写了关于使用 mixins/middleware 处理 htmx 页面重新加载的文章。 在本文中，我们将使用上一个教程中的最后一个选项，或者您可以使用我放在一起的包 django-htmx-refresh。

客观的

我本系列的目标是教您如何使用 Django 和 htmx 创建动态 CRUD 应用程序来跟踪客户及其联系信息。

先决条件

我将使用以下软件：

• Python 3.10.4
• Django 4.0.6
• HTMX 1.8.0
• Boostrap 5.1.3

以及一些额外的 Django 包：

• django-htmx 1.12.0
• django-htmx-刷新 1.0.5

不要忘记创建一个虚拟环境并在那里安装这些要求。 我不会在本文中介绍如何创建虚拟环境。

注意：我将从 CDN 加载 htmx 和 Bootstrap 文档，但是这两个文档都建议您在生产期间在本地安装它们。

项目设置

让我们从创建 Django 项目开始。

python3 -m django startproject simple_crm

在项目目录中，还有另一个同名目录，其中包含项目的设置； 重命名此目录核心以避免任何混淆。 之后，我们需要更改一些设置以使我们的项目正常工作。

在 asgi.py、wsgi.py 和 manage.py 中更改以下行：

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'simple_crm.settings')

---------->

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')

现在我们可以在 settings.py 中添加我们需要的所有设置：

INSTALLED_APPS = [
    'django_htmx',
    'django_htmx_refresh',
    'client_relationship_manger',
]

# This setting is used by HtmxResponseMiddleware
HTMX_APPS = [
    'crm',
]

MIDDLEWARE = [
    'django_htmx.middleware.HtmxMiddleware',
    'django_htmx_refresh.middleware.HtmxResponseMiddleware',
]

ROOT_URLCONF = 'core.urls'

TEMPLATES = [
    {
        'DIRS': [ BASE_DIR / 'templates' ],
    },
]

WSGI_APPLICATION = 'core.wsgi.application'

您会注意到一个新配置是 HTMX_APPS； 由 django_htmx_refresh 应用程序使用。 它确保 HtmxResponseMiddleware 只影响我们明确定义的应用程序，防止默认 Django 管理员或其他第三方应用程序出错。 它还需要一个应用程序命名空间，我们稍后将在 core/urls.py 中定义它。

接下来，我们将在项目目录中创建模板目录。

cd simple_crm
mkdir templates

然后我们可以启动 client_relationship_manager 应用程序。

python3 manage.py startapp client_relationship_manager

此时，您的项目目录将如下所示：

创建后端

当开始一个新的应用程序时，我喜欢先写模型； 这给了我们一些东西，可以将我们的观点与我们接触到它们的时间联系起来。 在这里，我们将创建一个名为 Client 的模型，它将存储客户的联系信息。

楷模

from django.db import models
from django.urls import reverse

# Create your models here.

class Client(models.Model):
    name = models.CharField(max_length=240)
    phone = models.CharField(max_length=14)
    address = models.CharField(max_length=300)
    email = models.EmailField(max_length=240)
    date_created = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('crm:detail-client', kwargs={'pk': self.pk})

网址

接下来，我们将建立我们的应用程序需要的 URL。 在 core/urls.py 中，我们将快速包含我们的新应用程序的 urls.py 文件，我们将在接下来创建该文件。 不要忘记为 django_htmx_refresh 应用程序添加一个应用程序命名空间以供使用。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(('client_relationship_manager.urls', 'crm'))),
]

现在我们创建 client_relationship_manager/urls.py 文件并将路径添加到我们的基本 CRUD 视图。 我们还将在 URL 模式中添加名称以执行 URL 反转。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.HomeView.as_view(), name='index'),
    path('search/', views.SearchResultsView.as_view(), name='search'),
    path('client/create/', views.CreateClientView.as_view(), name='create-client'),
    path('client//', views.DetailClientView.as_view(), name='detail-client'),
    path('client//update/', views.UpdateClientView.as_view(), name='update-client'),
    path('client//delete/', views.DeleteClientView.as_view(), name='delete-client'),
]

意见

现在我们可以创建我们的视图了。 我们将为主页和搜索结果页面继承 ListView。 其余的将是通用的 CRUD 视图。

from django.shortcuts import render
from django.urls import reverse, reverse_lazy
from django.views.generic.list import ListView
from django.views.generic.detail import DetailView
from django.views.generic.edit import CreateView, UpdateView, DeleteView
from django.db.models import Q
from .models import Client
from .forms import CreateClientForm, UpdateClientForm

# Create your views here.


class HomeView(ListView):
    model = Client
    template_name = "index.html"


class SearchResultsView(ListView):
    template_name = "search_results.html"
    context_object_name = "results"

    def get_queryset(self):
        query = self.request.GET.get("q")
        if query:
            results = Client.objects.filter(
                Q(name__icontains=query)
                | Q(pk__icontains=query)
                | Q(phone__icontains=query)
                | Q(address__icontains=query)
                | Q(email__icontains=query)
            )
            return results


class CreateClientView(CreateView):
    model = Client
    form_class = CreateClientForm
    template_name = "create_client.html"
    
    def get_success_url(self):
        messages.success(self.request, "Client created.")
        return reverse("crm:detail-client", args=[self.object.id])


class DetailClientView(DetailView):
    model = Client
    template_name = "detail_client.html"


class UpdateClientView(UpdateView):
    model = Client
    form_class = UpdateClientForm
    template_name = "update_client.html"
    
    def get_success_url(self):
        messages.success(self.request, "Client updated.")
        return reverse("crm:detail-client", args=[self.object.id])


class DeleteClientView(DeleteView):
    model = Client
    template_name = "delete_client.html"
    
    def get_success_url(self):
        messages.success(self.request, "Client deleted.")
        return reverse("crm:index")

注意每个视图如何定义一个模板名称。 HtmxResponseMiddleware 拦截 template_name 属性，然后确定响应是否附加了 htmx 实例并返回适当的模板。 我们还将 form_class 传递给 CreateClientView 和 UpdateClientView

接下来，在 SearchResultsView 中，我们将覆盖 get_queryset 方法。 在该方法中，我们将从请求中获取查询，通过给定的搜索查询过滤所有客户端对象，并返回结果。

最后，在创建、更新和删除视图中覆盖 get_success_url。 他们需要返回成功消息并呈现正确的 URL。

形式

我们创建自定义表单类以将类选择器添加到每个表单元素，而无需手动写出表单。 它还允许我们在未来扩展表单功能。

from django import forms
from .models import Client

class CreateClientForm(forms.ModelForm):
    class Meta:
        model = Client
        fields = '__all__'
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'phone': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            'address': forms.TextInput(attrs={'class': 'form-control'}),
        }


class UpdateClientForm(forms.ModelForm):
    class Meta:
        model = Client
        fields = '__all__'
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'phone': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            "address": forms.TextInput(attrs={'class': 'form-control'}),
        }

启动服务器

现在让我们启动服务器，从进行必要的迁移开始。

python3 manage.py makemigrations
python3 manage.py migrate

然后通过运行以下命令并按照终端中的提示创建超级用户。

python3 manage.py createsuperuser

现在通过运行启动服务器：

python3 manage.py runserver

最后，在您的网络浏览器中访问 http://127.0.0.1:8000/。 您将看到与此图像类似的 TemplateDoesNotExist 错误：

确保 Django 正在检查 templates/crm 中的 index.html 文件，如上所示。 如果不是，则表示 HtmxResponseMiddleware 不知道 client_relationship_manager 应用程序，您需要检查 HTMX_APPS 设置。

结论

后端已准备就绪。 在本系列的第二部分中，我们将构建我们的模板并开始使用 htmx。 如果您想了解更多关于我们今天在这里使用的 HtmxResponseMiddleware 的信息，我建议您阅读我的第一篇文章。

关注七爪网，获取更多APP/小程序/网站源码资源！