蒙古文网站建设的通知网站app用什么语言开发
目录
项目演示效果
第一步 安装项目依赖
第二步 创建项目和应用
第三步 编写URLs和视图
第四步 编写模板
第五步 查看效果
如果要看Django系列基础教程，可移步至这里
Django自带管理后台(admin)功能强大，允许我们对模型数据进行过滤筛选和增删改查，但是不够美观, 一般仅限内部人员使用。本例将演示如何使用django-filter和django-tables2打造功能性强且美观的管理后台，前端使用Boostrap 4。
项目演示效果
下图为Django自带admin对用户管理的界面。
下图是本例使用django-filter和django-tables2打造的用户管理界面，是不是美观多了? 这个后台支持过滤、重置、按各种字段排序、分页等常见功能。
如果你还不过瘾，可以看下动画效果。
废话不多说，我们开始干吧。关注微信公众号【Python Web与Django开发】，发送消息【Django后台实战】，可以获取GitHub源码地址。
第一步 安装项目依赖
本项目所需的第三方安装包如下所示，均使用了最新版本，保证未来2-3年都不会过时，使用pip安装即可。
Django==3.2.2
django-filter==2.4.0 # 自定义过滤字段
django-tables2==2.3.4 # 自定义表格显示字段
django-widget-tweaks==1.4.8 # 用户美化表单
建议先创建虚拟环境再pip安装，如果你不会创建和激活虚拟环境，请先阅读https://pythondjango.cn/django/basics/2-installation-use/。
第二步 创建项目和应用
先使用django-admin startproject myproject创建一个名为myproject的应用，接着使用python manage.py startapp users 创建一个名为users的app，并把它和其它三个项目依赖加入到settings.py的INSTALLED_APPS中去。
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','widget_tweaks', # 项目依赖'django_tables2',# 项目依赖'django_filters',# 项目依赖'users', # 自建应用
]
然后把app下的urls路径加入到项目文件夹的urls.py里去。
from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('myadmin/', include('users.urls'))
]
整个项目的布局如下所示：
本例使用Django自带的User模型，无需创建模型，但考虑到后续存在切换自定义用户模型的可能性，我们使用get_user_model方法获取用户模型。
修改models.py, 添加如下代码：
# users/models.py
from django.contrib.auth import get_user_modelUser = get_user_model()
第三步 编写URLs和视图
在users 目录下新建urls.py, 添加如下代码：
# users/urls.py
from django.urls import path, re_path
from . import viewsapp_name = "users"urlpatterns = [path('', views.UserAdminTableView.as_view(), name='user_admin'),path('users/create/', views.UserCreateView.as_view(), name='user_create'),path('users/<int:pk>/update/', views.UserUpdateView.as_view(), name='user_update'),path('users/<int:pk>/delete/', views.UserDeleteView.as_view(), name='user_delete'),
]接下来编写与各个url路由对应的视图，它们位于user目录下views.py, 代码如下所示：
# users/urls.py
# 核心Django模块，比如Mixins和通用视图
from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import CreateView, UpdateView, DeleteView
from django.urls import reverse_lazy
from .models import User# django fitler和django_tables2提供的Mixins
from django_tables2 import SingleTableView, RequestConfig
from django_filters.views import FilterView# filters.py定义了用哪些字段对模型进行过滤
from .filters import UserFilter# tables.py定义了用哪些字段将在表格中展示
from .tables import UserTable# forms.py定义了用哪些字段创建或更新用户
from .forms import UserForm# 管理用户主界面
class UserAdminTableView(LoginRequiredMixin, SingleTableView, FilterView):filter = None# 使用UserFilter过滤filter_class = UserFilter# 使用UserTable展示数据table_class = UserTabletemplate_name = 'users/user_admin.html'# 获取过滤后的查询集def get_queryset(self, **kwargs):qs = User.objects.all().order_by('-id')self.filter = self.filter_class(self.request.GET, queryset=qs)return self.filter.qs# 将查询集与table实例集合，提供filter和table两个变量前端渲染# 每页5条记录def get_context_data(self, **kwargs):context = super().get_context_data(**kwargs)t = self.table_class(data=self.get_queryset())RequestConfig(self.request, paginate={"per_page": 5}).configure(t)context['filter'] = self.filtercontext['table'] = treturn context# create
class UserCreateView(LoginRequiredMixin, CreateView):model = Usertemplate_name = 'users/user_form.html'form_class = UserFormsuccess_url = reverse_lazy('users:user_admin')# update
class UserUpdateView(LoginRequiredMixin, UpdateView):model = Usertemplate_name = 'users/user_form.html'form_class = UserFormsuccess_url = reverse_lazy('users:user_admin')# Delete
class UserDeleteView(LoginRequiredMixin, DeleteView):model = Usertemplate_name = 'users/user_confirm_delete.html'success_url = reverse_lazy('users:user_admin')在视图中我们分别使用了UserFilter, UserTable和 UserForm， 它们分别位于users目录下的filters.py, tables.py和 forms.py，代码如下所示：
# users/filters.py
import django_filters
from django.db.models import Q
from .models import Userclass UserFilter(django_filters.FilterSet):'''Filter user by username, email, is_staff, ect'''# 自定义过滤字段query = django_filters.CharFilter(method='my_custom_filter', label='关键词')def my_custom_filter(self, queryset, q, value):return queryset.filter(Q(username__icontains=value) | Q(email__icontains=value))class Meta:# 使用哪个模型和哪些字段过滤model = Userfields = {'is_staff','is_superuser','is_active'}# users/tables.py
import django_tables2 as tables
from django.utils.html import format_html
from django.urls import reverse
from .models import Userclass UserTable(tables.Table):id_select = tables.CheckBoxColumn(accessor="id", orderable=False, exclude_from_export=True)actions = tables.Column(empty_values=(), verbose_name="操作", orderable=False, exclude_from_export=True)class Meta:# 使用哪个模型model = User# 表格中显示哪些字段fields = ['username', 'email', 'first_name', 'last_name', 'is_staff']# 表格中字段显示顺序sequence = ['id_select'] + fields + ['actions']# 表格模板template_name = "users/bs4_tables2.html"# 表格样式attrs = {"class": "table table-striped table-sm text-nowrap"}# 排序字段order_by_field = 'sort_by' # default: sort# page_field = 'page'# 自定义操作链接def render_actions(self, value, record):return format_html('<a class="btn btn-sm badge badge-pill badge-warning ml-2" href= "' +reverse("users:user_update", args=[str(record.pk)]) + '">' + '编辑' + '</a>'+ '<a class=" btn btn-sm badge badge-pill badge-danger ml-2" href= "' +reverse("users:user_delete", args=[str(record.pk)]) + '">' + '删除' + '</a>')# users/forms.py
from django import forms
from .models import Userclass UserForm(forms.ModelForm):class Meta:# 自定义使用哪个模型和哪些字段来创建和更新用户model = Userfields = ('username', 'email', 'password', 'first_name', 'last_name')widgets = {'password':forms.PasswordInput(),}
第四步 编写模板
本项目一共使用到6个模板文件，它们位于users\templates\users目录下：
这里着重看下user_admin.html的代码，它继承了BS4风格的base.html, 使用了bs_form.html来显示表单和render_table命令渲染BS4风格的表格。
{% extends 'users/base.html' %}
{% load django_tables2 %}{% block content %}<div class="align-items-center row"><div class="col-6 pt-2"><h5>管理用户</h5></div><div class="col-6"><span class="dropdown float-right"><a href="{% url 'users:user_create' %}"><button type="button" id="modal-create-btn" class="btn btn-sm btn-success"data-toggle="tooltip" data-placement="top" title="添加用户"><i class="bi bi-plus"></i>添加用户</button></a></span></div></div><div class="align-items-center py-1 row bg-white"><div class="col-sm-6 col-md-3"><form class="" action="" method="get"><div class="input-group"><input type="text" name="query" class="form-control search-menu"autocomplete="off" placeholder="关键词" value="{{ request.GET.query }}"><div class="input-group-append"><button class="btn btn-primary" type="submit"><i class="bi bi-search" aria-hidden="true"></i></button></div></div></form></div><div class="col-sm-6 col-md-9 mt-1"><span class="dropdown float-md-right"><button type="button" class="btn btn-sm btn-light dropdown-toggle my-0" data-toggle="dropdown" aria-expanded="false"><i class="bi bi-funnel"></i> 过滤</button><div class="dropdown-menu dropdown-menu-right px-3 mt-2" role="menu" style="width:280px"><form class="form-horizontal" role="form" autocomplete="off">{% include 'users/bs_form.html' with form=filter.form %}<button type="submit" class="btn btn-sm btn-info form-control">确定</button></form></div><a href="{{ request.path }}" class="btn btn-light btn-sm"><i class="bi bi-backspace-reverse"></i> 重置</a></span></div></div>{% render_table table %}
{% endblock %}
本例中的base.html，bs_form.html和bs4_tables2.html都是高度可重用的Bootstrap 4模板，可以无需修改适用于任何项目和app。关注微信公众号【Python Web与Django开发】，发送消息【Django后台实战】，可以获取GitHub源码地址，下载完整项目和精美的模板。
整个项目一共只有25个文件，非常值得一看和学习练手哦。
create mode 100644 myproject/db.sqlite3
create mode 100644 myproject/manage.py
create mode 100644 myproject/myproject/__init__.py
create mode 100644 myproject/myproject/asgi.py
create mode 100644 myproject/myproject/settings.py
create mode 100644 myproject/myproject/urls.py
create mode 100644 myproject/myproject/wsgi.py
create mode 100644 myproject/requirements.txt
create mode 100644 myproject/users/__init__.py
create mode 100644 myproject/users/admin.py
create mode 100644 myproject/users/apps.py
create mode 100644 myproject/users/filters.py
create mode 100644 myproject/users/forms.py
create mode 100644 myproject/users/migrations/__init__.py
create mode 100644 myproject/users/models.py
create mode 100644 myproject/users/tables.py
create mode 100644 myproject/users/templates/users/base.html
create mode 100644 myproject/users/templates/users/bs4_tables2.html
create mode 100644 myproject/users/templates/users/bs_form.html
create mode 100644 myproject/users/templates/users/user_admin.html
create mode 100644 myproject/users/templates/users/user_confirm_delete.html
create mode 100644 myproject/users/templates/users/user_form.html
create mode 100644 myproject/users/tests.py
create mode 100644 myproject/users/urls.py
create mode 100644 myproject/users/views.py
第五步 查看效果
连续运行如下命令，先登录/admin/添加一些用户，在访问127.0.0.0.1:8000/myadmin就可以查看文初的效果啦。
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver