自定义通用视图
web后端开发的工作就是对数据的增删改查！回顾前面的各种功能的代码，会发现有很多的代码冗余。我们在做重复的事情。django框架的一个强大的功能就是提供了一个即插即用的管理后台，django-admin。接下来，我去做一些代码的优化，抽取代码，自定义通用视图。
一、MyListView
后台管理功能中，总是需要以数据表的形式展示数据。复杂一点会有过滤，查询，分页等操作。但它们的业务逻辑一致，都是接收请求，然后去数据库中获取数据，再进行过滤，分页，然后展示。抽象出一个MyListView来完成这些通用功能，我们只需要做少量配置就可以实现对不同的模型的数据展示。
1. 通用的类属性
找出通用属性，定义在类属性中，子视图类通过覆盖这些属性来完成自定义。
class MyListView(View):
model = None # 模型
template_name = None # 模板名称
is_paginate = False # 是否分页
per_page = None # 每页条数
page_header = None # 页头大标题
page_option = None # 页头小标题
table_title = None # 内容标题
fields = None # 需要展示的字段
2.方法
2.1 get
get方法是用来响应get请求的，根据请求，调用相应模型，查询数据然后渲染模板。
def get(self, request):
context = self.get_context_data()
return render(request, self.get_template_name(), context=context)
2.2 get_queryset
获取查询集，根据是否提供fields属性，来确定返回的数据。如果有搜索，过滤，可以复写该方法。
def get_queryset(self):
"""获取查询集，如需过滤，请复写此方法"""
if self.model is not None:
queryset = self.model._default_manager.all()
else:
raise ImproperlyConfigured(
"%(cls)s 是不是傻，你没有指定model，我怎么知道呢？" % {
'cls': self.__class__.__name__
}
)
if self.fields:
queryset = queryset.only(*self.fields)
return queryset
2.3 get_context_data
获取视图的上下文变量，如果需要额外添加，可以复写次方法。
def get_context_data(self, **kwargs):
"""获取视图的上下文变量，如要添加额外变量，请复写此方法"""
queryset = self.get_queryset()
if self.is_paginate:
page_size = self.per_page
if page_size:
page = self.paginate_queryset(queryset, page_size)
else:
page = self.paginate_queryset(queryset, 10)
else:
page = queryset
context = {
'page_obj': page,
'page_header': self.page_header,
'page_option': self.page_option,
'table_title': self.table_title
}
context.update(kwargs)
return context
2.4 get_template_name
获取模板名称，如果不提供类属性template_name，会根据模型名称拼接出默认的模板myadmin/model_name/model_name_list.html
def get_template_name(self):
"""获取模板名"""
if self.template_name is None:
self.template_name = 'myadmin/{0}/{0}_list.html'.format(self.model._meta.model_name)
return self.template_name
2.5 paginate_queryset
分页
def paginate_queryset(self, queryset, page_size):
"""如果需要进行分页"""
paginator = Paginator(queryset, page_size)
try:
page_number = int(self.request.GET.get('page', 1))
except Exception as e:
page_number = 1
page = paginator.get_page(page_number)
return page
3. 模板
在模板中将自定义的地方挖坑。obj_list.html
{% load static %}
{% load news_customer_filters %}
<section class="content-header">
<h1>
{{ page_header }}
<small>{{ page_option }}</small>
</h1>
</section>
<!-- Main content -->
<section class="content container-fluid">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">{{ table_title }}</h3>
<div class="box-tools">
{% block add_button %}
{% endblock %}
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
{% block search_form %}
{% endblock %}
<table class="table table-bordered">
<tbody>
{% block table_content %}
{% endblock %}
</tbody>
</table>
</div>
<!-- 分页 -->
{% if page_obj.paginator %}
<div class="box-footer clearfix">
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="example2_info" role="status" aria-live="polite">
总共：{{ page_obj.paginator.count }}条 第{{ page_obj.start_index }}到{{ page_obj.end_index }}条
</div>
</div>
<div class="col-sm-6">
<ul class="pagination pagination-sm no-margin pull-right">
<li {% if not page_obj.has_previous %}class="disabled"{% endif %}
data-page="{{ page_obj.number|add:-1 }}"><a href="#">«</a></li>
{% for n in page_obj|page_bar %}
<li {% if n == page_obj.number %}class="active" {% endif %} data-page="{{ n }}"><a
href="#">{{ n }}</a></li>
{% endfor %}
<li {% if not page_obj.has_next %}class="disabled"{% endif %}
data-page="{{ page_obj.number|add:1 }}"><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</section>
{% block script %}
<script>
$(() => {
{% block query_script %}
let $queryForm = $('form.user-query'); // 查询表单
let $queryBtn = $('form.user-query button.query'); // 查询按钮
let $resetBtn = $('form.user-query button.reset'); // 重置按钮
// 查询
$queryBtn.click(() => {
let url = $('.sidebar-menu li.active a').data('url');
if (!url) {
return
}
$
.ajax({
url: url,
data: $queryForm.serialize(),
type: 'GET'
})
.done((res) => {
$('#content').html(res)
})
.fail(() => {
message.showError('服务器超时，请重试！')
})
});
// 重置
$resetBtn.click(() => {
$queryForm[0].reset();
let url = $('.sidebar-menu li.active a').data('url');
if (!url) {
return
}
$
.ajax({
url: url,
type: 'GET'
})
.done((res) => {
$('#content').html(res)
})
.fail(() => {
message.showError('服务器超时，请重试！')
})
});
{% endblock query_script %}
// 分页
let $pageLi = $('ul.pagination li').not('.active').not('.disabled');
$pageLi.click(function () {
let $this = $(this);
$
.ajax({
url: $('.sidebar-menu li.active a').data('url'),
data: $queryForm.serialize() + '&page=' + $this.data('page'),
type: 'GET'
})
.done((res) => {
$('#content').html(res)
})
.fail(() => {
message.showError('服务器超时，请重试！')
})
});
// 实例详情
$('tr').each(function () {
$(this).children('td:first').click(function () {
let url = $(this).data('url');
if (!url) {
return
}
$
.ajax({
url: url,
type: 'GET'
})
.done((res) => {
if (res.errno === '4105') {
message.showError(res.errmsg)
} else if (res.errno === '4101') {
message.showError(res.errmsg);
setTimeout(() => {
window.location.href = res.data.url
}, 1000)
} else {
$('#content').html(res)
}
})
.fail(() => {
message.showError('服务器超时，请重试！')
})
})
});
// 添加实例
$('.box-tools button').click(function () {
let url = $(this).data('url');
if (!url) {
return
}
$
.ajax({
url: url,
type: 'GET'
})
.done((res) => {
if (res.errno === '4105') {
message.showError(res.errmsg)
} else if (res.errno === '4101') {
message.showError(res.errmsg);
setTimeout(() => {
window.location.href = res.data.url
}, 1000)
} else {
$('#content').html(res)
}
})
.fail(() => {
message.showError('服务器超时，请重试！')
})
});
});
</script>
{% endblock %}
<!-- /.content -->
4. 自定义过滤器
4.1 page_bar
根据分页页面对象生成分页页码
from django import template
register = template.Library()
@register.filter
def page_bar(page):
page_list = []
if page.number != 1:
page_list.append(1)
if page.number - 3 > 1:
page_list.append('...')
if page.number - 2 > 1:
page_list.append(page.number - 2)
if page.number - 1 > 1:
page_list.append(page.number - 1)
page_list.append(page.number)
if page.paginator.num_pages > page.number + 1:
page_list.append(page.number + 1)
if page.paginator.num_pages > page.number + 2:
page_list.append(page.number + 2)
if page.paginator.num_pages > page.number + 3:
page_list.append('...')
if page.paginator.num_pages != page.number:
page_list.append(page.paginator.num_pages)
return page_list
二、UpdateView
1. 通用的类属性
找出通用属性，定义在类属性中，子视图类通过覆盖这些属性来完成自定义。
class UpdateView(View):
model = None
form_class = None
template_name = None
fields = None # 需要修改的字段
page_header = None # 页头大标题
page_option = None # 页头小标题
table_title = None # 内容标题
pk = None # url路径参数名，默认pk 对象的pk字段
2.方法
2.1 get
get方法是用来响应get请求的，根据请求，获取模型对象，生成表单，渲染页面。
def get(self, request, **kwargs):
self.obj = self.get_obj(**kwargs)
context = self.get_context_data()
return render(request, self.get_template_name(), context=context)
2.2 put
put方法是用来响应put请求的，根据请求，获取模型对象，获取参数，填充表单，校验，修改对象。
def put(self, request, **kwargs):
self.obj = self.get_obj(**kwargs)
self.form_class = self.get_form_class()
form = self.form_class(QueryDict(request.body), instance=self.obj)
if form.is_valid():
self.save(form)
return json_response(errmsg='修改数据成功！')
else:
context = self.get_context_data(form=form)
return render(request, self.get_template_name(), context=context)
2.3 get_obj_id
获取传入的对象主键
def get_obj_id(self, **kwargs):
if self.pk is None:
self.obj_id = kwargs.get('pk')
else:
self.obj_id = kwargs.get(self.pk)
2.4 get_obj
根据传入的对象主键获取需要修改的对象
def get_obj(self, **kwargs):
self.get_obj_id(**kwargs)
if self.model is None:
raise ImproperlyConfigured('没有设置模型')
obj = self.model.objects.filter(pk=self.obj_id).first()
if not obj:
raise ObjectDoesNotExist('找不到pk=%s的对象' % self.obj_id)
return obj
2.5 get_template_name
获取模板名称，如果不提供类属性template_name，会根据模型名称拼接出默认的模板myadmin/model_name/model_name_detail.html
def get_template_name(self):
"""获取模板名"""
if self.template_name is None:
self.template_name = 'myadmin/{0}/{0}_detail.html'.format(self.model._meta.model_name)
return self.template_name
2.6 get_context_data
获取视图的上下文变量，如果需要额外添加，可以复写次方法。
def get_context_data(self, **kwargs):
self.form_class = self.get_form_class()
form = self.form_class(instance=self.obj)
context = {
'form': form,
'page_header': self.page_header,
'page_option': self.page_option,
'table_title': self.table_title
}
context.update(kwargs)
return context
2.7get_form_class
获取表单类，如果没有提供，通过给定字段属性自动生成
def get_form_class(self):
if self.form_class is None:
if self.fields is None:
raise ImproperlyConfigured('你有不设置form，又不设置fields字段，那怎么生成表单呢？')
return modelform_factory(self.model, fields=self.fields)
else:
return self.form_class
2.8 save
保存对象，如果有额外操作，复写此方法。
def save(self, form):
if form.has_changed():
instance = form.save(commit=False)
instance.save(update_fields=form.changed_data)
3.模板
{% load static %}
{% load news_customer_filters %}
{% load admin_customer_tags %}
{% load admin_customer_filters %}
<section class="content-header">
<h1>
{{ page_header }}
<small>{{ page_option }}</small>
</h1>
</section>
<!-- Main content -->
<section class="content container-fluid">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">{{ table_title }}</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<form class="form-horizontal">
{% csrf_token %}
{% block form_content %}
{% for field in form %}
{% if field|is_checkbox %}
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<div class="checkbox">
<label for="{{ field.id_for_label }}">{{ field }}{{ field.label }}</label>
</div>
</div>
</div>
{% elif field|is_url_field %}
<div class="form-group {% if field.errors %}has-error{% endif %}">
<label for="{{ field.id_for_label }}"
class="col-sm-1 control-label">{{ field.label }}</label>
<div class="col-sm-11">
{% for error in field.errors %}
<label class="control-label"
for="{{ field.id_for_label }}">{{ error }}</label>
{% endfor %}
<div class="input-group">
{% add_class field 'form-control' %}
<span class="input-group-btn"><input class="hidden" type="file">
<button type="button" class="btn btn-info btn-flat">上传文件</button>
</span>
</div>
</div>
</div>
{% else %}
<div class="form-group {% if field.errors %}has-error{% endif %}">
<label for="{{ field.id_for_label }}"
class="col-sm-1 control-label">{{ field.label }}</label>
<div class="col-sm-11">
{% for error in field.errors %}
<label class="control-label"
for="{{ field.id_for_label }}">{{ error }}</label>
{% endfor %}
{% add_class field 'form-control' %}
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}
</form>
</div>
<div class="box-footer">
<button type="button" class="btn btn-default back">返回</button>
<button type="button" {% if form.instance.id %}
data-url="{% block update_url %}{% endblock %}"
data-type="PUT"
{% else %}
data-url="{% block add_url %}{% endblock %}"
data-type="POST"
{% endif %}
class="btn btn-primary pull-right save">保存
</button>
</div>
</div>
</section>
{% block script %}
<script>
$(() => {
{% block back_button %}
// 返回按钮
$('.box-footer button.back').click(() => {
let url = $('.sidebar-menu li.active a').data('url');
if (!url) {
return
}
$('#content').load(
url,
(response, status, xhr) => {
if (status !== 'success') {
message.showError('服务器超时，请重试！')
}
}
);
});
{% endblock %}
{% block save_button %}
$('.box-footer button.save').click(function () {
let url = $(this).data('url');
if (!url) {
return
}
$
.ajax({
url: url,
data: $('form').serialize(),
type: $(this).data('type')
})
.done((res) => {
if (res.errno === '0') {
message.showSuccess(res.errmsg);
$('#content').load(
$('.sidebar-menu li.active a').data('url'),
(response, status, xhr) => {
if (status !== 'success') {
message.showError('服务器超时，请重试！')
}
}
);
} else {
$('#content').html(res)
}
})
.fail((res) => {
message.showError('服务器超时，请重试！')
})
});
{% endblock %}
{% block upload %}
// 上传文件input
let $fileInput = $('.input-group-btn input');
let $uploadBtn = $('.input-group-btn button');
$uploadBtn.click(function () {
$(this).prev('input[type="file"]').click()
}
);
// 自动上传文件
$fileInput.change(function () {
$this = $(this);
if ($this.val() !== '') {
let formData = new FormData();
formData.append('upload', $this[0].files[0]);
formData.append('csrfmiddlewaretoken', $('input[name="csrfmiddlewaretoken"]').val());
$
.ajax({
url: '/admin/upload/',
// 使用ckeditor_uploader 就使用下面的url
// url: '/ckeditor/upload/&responseType=json',
type: 'POST',
data: formData,
processData: false,
contentType: false
})
.done((res) => {
if (res.uploaded === '1') {
message.showSuccess('封面图片上传成功！');
$this.parent().prev('input').val(res.url);
// 清空一下
$this.val('')
} else {
message.showError('封面图片上传失败！')
}
})
.fail(() => {
message.showError('服务器超时, 请重新尝试！')
})
}
});
{% endblock %}
});
</script>
{% endblock %}
<!-- /.content -->
模板中用到了自定义过滤器和自定义标签
4. 自定义过滤器和自定义标签
4.1 is_checkbox
判断字段是否checkbox 类型，决定渲染方式
from django.template import Library
from django.forms.widgets import CheckboxInput
register = Library()
@register.filter()
def is_checkbox(field):
return isinstance(field.field.widget, CheckboxInput)
4.2 is_url_field
判断字段是否url类型，决定渲染方式
@register.filter()
def is_url_field(field):
return True if 'url' in field.label else False
4.3add_class
给form字段添加class样式
from django.template import Library
from django.shortcuts import reverse
register = Library()
@register.simple_tag()
def add_class(field, class_str):
return field.as_widget(attrs={'class': class_str})
三、AddView
1.通用类属性
class AddView(View):
model = None
form_class = None
template_name = None
fields = None # 新建对象需要的字段
page_header = None # 页头大标题
page_option = None # 页头小标题
table_title = None
2.方法
2.1 get
渲染一个对于模型的表单页面返回。
def get(self, request):
context = self.get_context_data()
return render(request, self.get_template_name(), context=context)
2.2 post
根据post参数生成表单，校验，创建新对象。
def post(self, request):
self.form_class = self.get_form_class()
form = self.form_class(request.POST)
if form.is_valid():
self.save(form)
return json_response(errmsg='添加数据成功！')
else:
context = self.get_context_data(form=form)
return render(request, self.get_template_name(), context=context)
2.3 get_context_data
获取视图的上下文变量，如果需要额外添加，可以复写次方法。
def get_context_data(self, **kwargs):
self.form_class = self.get_form_class()
form = self.form_class()
context = {
'form': form,
'page_header': self.page_header,
'page_option': self.page_option,
'table_title': self.table_title
}
context.update(kwargs)
return context
2.4 get_template_name
获取模板名称，如果不提供类属性template_name，会根据模型名称拼接出默认的模板`myadmin/model_name/model_name_detail.html
def get_template_name(self):
"""获取模板名"""
if self.template_name is None:
self.template_name = 'myadmin/{0}/{0}_detail.html'.format(self.model._meta.model_name)
return self.template_name
2.5 get_form_class
获取表单类，如果没有提供，通过给定字段属性自动生成
def get_form_class(self):
if self.form_class is None:
if self.fields is None:
raise ImproperlyConfigured('你有不设置form，又不设置fields字段，那怎么生成表单呢？')
return modelform_factory(self.model, fields=self.fields)
else:
return self.form_class
2.6 save
保存对象，如果有额外操作，复写此方法。
def save(self, form):
form.save()
3. 模板
与UpdateView视图一致
四、继续抽象
仔细观察上面的三个视图，发现有很多共同的方法，还需要将这些代码进一步的抽离，然后通过继承来达到减少冗余和解耦的作用。
1.TemplateView
class TemplateView(View):
model = None # 模型
template_name = None
page_header = None # 页头大标题
page_option = None # 页头小标题
table_title = None # 内容标题
fields = None # 需要展示的字段
def get(self, request):
context = self.get_context_data()
return render(request, self.get_template_name(), context=context)
def get_context_data(self, **kwargs):
context = {
'page_header': self.page_header,
'page_option': self.page_option,
'table_title': self.table_title
}
context.update(kwargs)
return context
def get_template_name(self):
"""获取模板名"""
if self.template_name is None:
if isinstance(self, MyListView):
self.template_name = 'myadmin/{0}/{0}_list.html'.format(self.model._meta.model_name)
else:
self.template_name = 'myadmin/{0}/{0}_detail.html'.format(self.model._meta.model_name)
return self.template_name
2. DetailView
class DetailView(View):
form_class = None
def get_form_class(self):
if self.form_class is None:
if self.fields is None:
raise ImproperlyConfigured('你有不设置form，又不设置fields字段，那怎么生成表单呢？')
return modelform_factory(self.model, fields=self.fields)
else:
return self.form_class
def save(self, form):
form.save()
3.MyListView
class MyListView(TemplateView):
is_paginate = False # 是否分页
per_page = None # 每页条数
def get_queryset(self):
"""获取查询集，如需过滤，请复写此方法"""
if self.model is not None:
queryset = self.model._default_manager.all()
else:
raise ImproperlyConfigured(
"%(cls)s 是不是傻，你没有指定model，我怎么知道呢？" % {
'cls': self.__class__.__name__
}
)
if self.fields:
queryset = queryset.only(*self.fields)
return queryset
def get_context_data(self, **kwargs):
"""获取视图的上下文变量，如要添加额外变量，请继承此方法"""
queryset = self.get_queryset()
if self.is_paginate:
page_size = self.per_page
if page_size:
page = self.paginate_queryset(queryset, page_size)
else:
page = self.paginate_queryset(queryset, 10)
else:
page = queryset
return super().get_context_data(page_obj=page)
def paginate_queryset(self, queryset, page_size):
"""如果需要进行分页"""
paginator = Paginator(queryset, page_size)
try:
page_number = int(self.request.GET.get('page', 1))
except Exception as e:
page_number = 1
page = paginator.get_page(page_number)
return page
4.UpdateView
class UpdateView(TemplateView, DetailView):
pk = None # url路径参数名，默认pk 对象的pk字段
def get(self, request, **kwargs):
self.obj = self.get_obj(**kwargs)
return super().get(request)
def put(self, request, **kwargs):
self.obj = self.get_obj(**kwargs)
self.form_class = self.get_form_class()
form = self.form_class(QueryDict(request.body), instance=self.obj)
if form.is_valid():
self.save(form)
return json_response(errmsg='修改数据成功！')
else:
context = self.get_context_data(form=form)
return render(request, self.get_template_name(), context=context)
def get_obj_pk(self, **kwargs):
if self.pk is None:
self.obj_id = kwargs.get('pk')
else:
self.obj_id = kwargs.get(self.pk)
def get_obj(self, **kwargs):
self.get_obj_pk(**kwargs)
if self.model is None:
raise ImproperlyConfigured('没有设置模型')
obj = self.model.objects.filter(pk=self.obj_id).first()
if not obj:
raise ObjectDoesNotExist('找不到pk=%s的对象' % self.obj_id)
return self.model.objects.filter(pk=self.obj_id).first()
def get_context_data(self, **kwargs):
self.form_class = self.get_form_class()
form = self.form_class(instance=self.obj)
context = super().get_context_data(form=form)
context.update(**kwargs)
return context
def save(self, form):
if form.has_changed():
instance = form.save(commit=False)
instance.save(update_fields=form.changed_data)
5. AddView
class AddView(TemplateView, DetailView):
def post(self, request):
self.form_class = self.get_form_class()
form = self.form_class(request.POST)
if form.is_valid():
self.save(form)
return json_response(errmsg='添加数据成功！')
else:
context = self.get_context_data(form=form)
return render(request, self.get_template_name(), context=context)
def get_context_data(self, **kwargs):
self.form_class = self.get_form_class()
form = self.form_class()
context = super().get_context_data(form=form)
context.update(**kwargs)
return context
