个人网站搭建（Day 5）— 表单设计

尽管说我们的博客功能仅允许管理员进行编辑，但是呢，我们也需要支持用户输入，比如说comment，以及users 中用户登录等等，这时候我们就需要用到表单（form）啦。

由于 blog app 中的评论不需要用到表单，因此我们使用 users app 中 userinfo 的表单 InfoForm 作为例子：

from django import forms
from users.models import UserInfo, Message

class InfoForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        fields = [
            'nickname',
            'gender',
            'email',
            'intro',
        
        ]
        labels = {
            'nickname': 'Nickname',
            'gender': 'Gender',
            'email': 'Email',
            'intro': 'User introduce',
        }

这个表单我们主要用于用户注册以及用户中心修改个人信息的页面，表单中有三个属性：model（关联我们的数据模型），fields（定义我们需要提供给用户填写的数据），labels（提示用的标签），更多的设置可以参考 Python的Django框架中forms表单类的使用方法详解

我们以注册（register）功能为例，以下是 register的视图函数

from django.contrib.auth.forms import AuthenticationForm, UserCreationForm, PasswordChangeForm
from users.forms import InfoForm, MessageForm

def register(request):
    if request.method != 'POST':
        user_form = UserCreationForm()
        info_form = InfoForm()
    else:
        # 对提交的信息进行处理并且创建新的用户
        pass
    
    context = {
        'user_form': user_form,
        'info_form': info_form,    
    }
    return render(request, 'users/register.html' , context)

对应的 register.html

<!DOCTYPE html> {% extends "home/base.html" %} {% load widget_tweaks %} {% block content %} {% load static %}

<link rel="stylesheet" href="{% static 'css/register.css' %}">

<body>
    <div class="section-top-border">
        <form class="form-users" method="post" enctype="multipart/form-data" action="{% url 'users:register' %}">
            {% csrf_token %}
            <center>
                <h2>Register</h2>
            </center>
            <hr>
            <div class="form-group form-register">
                <!-- 分别列出表单中的字段，要求用户填写 -->
                {% for field in user_form %}
                <div class="form-group">
                    <span> {{ field.label }} </span> {{ field | add_class:"form-control"}}
                </div>
                {% endfor %} {{ user_form.media }} 

                {% for field in info_form %}
                <div class="form-group">
                    <span>{{ field.label }}</span> {{ field | add_class:"form-control"}}
                </div>
                {% endfor %} {{ info_form.media }}

                <div class="form-group">
                    <span>Profile Photo(Only support english filename)</span>
                    <input type="file" name="profile" class="form-control" />
                </div>

            </div>
            <div style="text-align: center">
                <button name="submit" class="btn btn-primary">Register</button>
                <a class="btn btn-outline-primary" href="/">Go Back</a>
            </div>
            <input type="hidden" name="next" value="{% url 'home:home' %}" />
        </form>
        <div style="text-align: center">
            <p>Have an account? <a href="{% url 'users:login' %}">Click</a> to log in.</p>
        </div>
    </div>
</body>
{% endblock content %}

实际的效果如下（以 register.html 页面为例，上面的用户名以及密码部分是使用了 django 自带的用户表单，参见 users/views.py）

from django.contrib.auth.forms import AuthenticationForm, UserCreationForm, PasswordChangeForm

个人网站搭建（Day 5）— 表单设计

这样，我们就实现了通过表单来接收用户输入。