HTML&Forms-Django REST框架
HTML&Forms
REST框架适用于返回API样式响应和常规HTML页面。此外，序列化器可以用作HTML表单并在模板中呈现。
渲染HTML
为了返回HTML响应，您需要使用TemplateHTMLRenderer，或StaticHTMLRenderer.
这个TemplateHTMLRenderer类期望响应包含上下文数据字典，并根据必须在视图或响应中指定的模板呈现HTML页面。
这个StaticHTMLRender类期望响应包含预先呈现的HTML内容的字符串。
因为静态HTML页面的行为通常与API响应不同，所以您可能需要显式地编写任何HTML视图，而不是依赖内置的泛型视图。
下面是一个视图的示例，该视图返回在HTML模板中呈现的“配置文件”实例列表：
views.py:
from my_project.example.models import Profile
from rest_framework.renderers import TemplateHTMLRenderer
from rest_framework.response import Response
from rest_framework.views import APIView
class ProfileList(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_list.html'
def get(self, request):
queryset = Profile.objects.all()
return Response({'profiles': queryset})
Profile_list.html:
<html><body>
<h1>Profiles</h1>
<ul>
{% for profile in profiles %}
<li>{{ profile.name }}</li>
{% endfor %}
</ul>
</body></html>
渲染形式
序列化程序可以通过使用render_form标记，并将序列化程序实例作为模板的上下文。
以下视图演示了在模板中使用序列化程序查看和更新模型实例的示例：
views.py:
from django.shortcuts import get_object_or_404
from my_project.example.models import Profile
from rest_framework.renderers import TemplateHTMLRenderer
from rest_framework.views import APIView
class ProfileDetail(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_detail.html'
def get(self, request, pk):
profile = get_object_or_404(Profile, pk=pk)
serializer = ProfileSerializer(profile)
return Response({'serializer': serializer, 'profile': profile})
def post(self, request, pk):
profile = get_object_or_404(Profile, pk=pk)
serializer = ProfileSerializer(profile, data=request.data)
if not serializer.is_valid():
return Response({'serializer': serializer, 'profile': profile})
serializer.save()
return redirect('profile-list')
Profile_Detil.html:
{% load rest_framework %}
<html><body>
<h1>Profile - {{ profile.name }}</h1>
<form action="{% url 'profile-detail' pk=profile.pk %}" method="POST">
{% csrf_token %}
{% render_form serializer %}
<input type="submit" value="Save">
</form>
</body></html>
使用模板包
这个render_form标记接受一个可选的template_pack参数，指定应使用哪个模板目录来呈现窗体和窗体字段。
REST框架包括三个内置模板包，所有这些包都基于Bootstrap 3。horizontal, vertical，和inline...默认样式是horizontal...要使用这些模板包中的任何一个，您还需要包含Bootstrap 3 CSS。
以下HTML将链接到引导带3 CSS的CDN宿主版本：
<head>
…
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
第三方包可以包括备用模板包，方法是将包含必要表单和字段模板的模板目录捆绑在一起。
让我们看看如何呈现三个可用的模板包。对于这些示例，我们将使用一个序列化类来表示一个“Login”表单。
class LoginSerializer(serializers.Serializer):
email = serializers.EmailField(
max_length=100,
style={'placeholder': 'Email', 'autofocus': True}
)
password = serializers.CharField(
max_length=100,
style={'input_type': 'password', 'placeholder': 'Password'}
)
remember_me = serializers.BooleanField()
rest_framework/vertical
使用标准的引导带布局，在相应的控件输入上方显示表单标签。
这是默认的模板包。
{% load rest_framework %}
...
<form action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer template_pack='rest_framework/vertical' %}
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Vertical form example
rest_framework/horizontal
使用2/10列分隔显示标签和控件。
这是在可浏览API和管理呈现器中使用的表单样式。
{% load rest_framework %}
...
<form class="form-horizontal" action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Horizontal form example
rest_framework/inline
一种紧凑的窗体样式，它以内联方式显示所有控件。
{% load rest_framework %}
...
<form class="form-inline" action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer template_pack='rest_framework/inline' %}
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Inline form example
字段样式
序列化器字段可以使用style关键字参数此参数是控制使用的模板和布局的选项字典。
自定义字段样式的最常见方法是使用基模板样式关键字参数来选择模板包中应该使用的模板。
例如，若要呈现CharField作为HTML文本区域而不是默认的HTML输入，您可以使用如下内容：
details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html'}
)
如果希望使用自定义模板呈现字段，则不是包含的模板包的一部分，您可以使用template选项，以完全指定模板名称：
details = serializers.CharField(
max_length=1000,
style={'template': 'my-field-templates/custom-input.html'}
)
字段模板还可以使用其他样式属性，这取决于它们的类型。例如，textarea.html模板还接受rows属性，可用于影响控件的调整大小。
details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html', 'rows': 10}
)
的完整列表基模板选项及其关联样式选项列示如下。
| 基模板 | 有效字段类型 | 附加样式选项 |
|---|---|---|
| input.html | 任何字符串、数字或日期/时间字段 | 输入类型，占位符，隐藏标签，自动对焦 |
| textarea.html | CharField |
行，占位符，隐藏标签 |
| select.html |
ChoiceField或关系字段类型 |
隐藏标签 |
| radio.html |
ChoiceField或关系字段类型 |
内联，隐藏标签 |
| 选择乘.html |
MultipleChoiceField或关系字段many=True
|
隐藏标签 |
| 复选框_乘.html |
MultipleChoiceField或关系字段many=True
|
内联，隐藏标签 |
| checkbox.html | BooleanField |
隐藏标签 |
| fieldset.html | 嵌套串行化器 | 隐藏标签 |
| list_field set.html |
ListField或嵌套序列化器many=True
|
隐藏标签 |
网友评论