{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}" rel="external nofollow" >
</head>
<body>
<nav class="navbar navbar-default">...</nav>
<div>
    {% block content %}{% endblock %}
</div>
 
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</body>
</html>

比如我們可以在模板文件中引入，然后寫(xiě)上{% block content %}{% endblock %}這樣有關(guān)語(yǔ)法，便可以在其它相似的html中直接書(shū)寫(xiě) div中的內(nèi)容

{% extends "layout.html" %}
{% block content %}
 
    <div class="container">
    ...
    </div>
{% endblock %}

form和ModelForm

在我們正常的操作中，如果想在有關(guān)列表中添加數(shù)據(jù)并且想要連接數(shù)據(jù)庫(kù)拿到這些數(shù)據(jù)，我們得根據(jù)表單中的 name 屬性來(lái)拿，比如我創(chuàng)建了這么多的數(shù)據(jù)數(shù)據(jù)

class UserInfo(models.Model):
    ''''員工表'''
    name = models.CharField(verbose_name="姓名",max_length=32)
    age = models.IntegerField(verbose_name="年齡")
    password = models.CharField(verbose_name="密碼",max_length=64)
    account = models.DecimalField(verbose_name="賬戶余額",max_digits=10,decimal_places=2,default=0)
    creat_time = models.DateTimeField(verbose_name="入職時(shí)間")

拿到數(shù)據(jù)，添加到數(shù)據(jù)庫(kù)中

user = request.POST.get("user")
pwg = request.POST.get("pwd")
account = request.POST.get("ac")
ctime = request.POST.get("ctime")
# get中的內(nèi)容是用戶輸入表單中的name的屬性值，可以自己定義
 
models.UserInfo.object.creat(name=user,password=pwd ......)

這樣做未免過(guò)于繁瑣并且有這樣的問(wèn)題

-----用戶提交的數(shù)據(jù)沒(méi)有校驗(yàn)

-----頁(yè)面上沒(méi)有錯(cuò)誤提示

-----頁(yè)面上的每個(gè)字段都需要我們重新寫(xiě)一遍

-----關(guān)聯(lián)的數(shù)據(jù)，必須手動(dòng)獲取并展示在頁(yè)面中

但是我們通過(guò)django中自帶的兩個(gè)組件：Form和ModleForm

使用方法

view中

from django import forms
class UserAdd(forms.ModelForm):   #創(chuàng)建一個(gè)類，類中繼承forms
    name = forms.CharField(min_length=3)    
    #這里可以創(chuàng)建各類表單，也寫(xiě)一些約束條件，讓html頁(yè)面顯示約束條件，因?yàn)槲以谖业膁jango中已經(jīng)在models中創(chuàng)建好了數(shù)據(jù)表，所有我在這里不再創(chuàng)建，在下面直接拿到我的數(shù)據(jù)表
 
    title = forms.CharField(max_length=100, label='標(biāo)題')
    content = forms.CharField(widget=forms.Textarea, label='內(nèi)容')
    email = forms.EmailField(label='郵箱')
    reply = forms.BooleanField(required=False, label='回復(fù)')
 
    #拿到數(shù)據(jù)表
    class Meta:
        model = models.UserInfo
        fields = ["name","password","age","creat_time","gender","depart"]
 
def user_add(request):
    '''添加用戶'''
    if request.method == "GET":
        form = UserAdd()
        return render(request,"user_add.html",{'form': form})

html中利用for循環(huán)便可以自動(dòng)生成表單

<form method="post" novalidate>
    {% csrf_token %}
    {% for field in form %}
      <div class="form-group">
        <label>{{ field.label }}</label>
        {{ field }}
      </div>
    {% endfor %}

我們也可以給表單加上各種樣式

widgets = {
    "name" : forms.TextInput(attrs={"class":"form-control"}),
        }
#這樣寫(xiě)可能會(huì)有點(diǎn)繁瑣，得多次定義，我們可以用類和面向?qū)ο髞?lái)寫(xiě)
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        for name,field in self.fields.items():
#也可以加上判斷條件
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        for name,field in self.fields.items():
            if name == "password":
                continue
            field.widget.attrs = {"class": "form-control"}

我們還可以加上各種判斷

def user_add(request):
    '''添加用戶'''
    if request.method == "GET":
        form = UserAdd()
        return render(request,"user_add.html",{'form': form})
 
    form = UserAdd(data=request.POST)
    #如果條件成立則添加到數(shù)據(jù)庫(kù)中
    if form.is_valid():
        form.save()
        return redirect('/user/list/')
    else:
        return render(request,"user_add.html",{'form': form})

在這里，用一句 form.save()便可以將所有你寫(xiě)的數(shù)據(jù)添加到數(shù)據(jù)庫(kù)里

html中也可以顯示各種錯(cuò)誤，并加上各種條件，如這里的span標(biāo)簽

{% for field in form %}
    <div class="form-group">
        <label>{{ field.label }}</label>
        {{ field }}
        <span style="color:red">{{ field.errors.0 }}</span>
    </div>
{% endfor %}

查看我們的輸出結(jié)果,若滿足條件則可以加入數(shù)據(jù)庫(kù)，不滿足則顯示錯(cuò)誤