在前端网页上添加一个form表单,用于和客户交互,传统方式

效果如下:

python3 django import 自定义class django forms.py_django

传统方式添加表单

第一步 添加路由

在建立的app1的路由文件app1.urls下先加一个路由

python3 django import 自定义class django forms.py_html_02


划红线是新添加的路由文件,在访问这个路由的前提下我们要调用app.views.get_name 的函数,在这里我们已经提前将app1的所有路由已经提前加入到全局路由设置下了,如图所示是全局路由urls的文件

python3 django import 自定义class django forms.py_html_03


同时也罢应用app1加入的全局设置中

python3 django import 自定义class django forms.py_django_04


如果没有添加的记得一定要添加到全局配置,全局路由中

第二步 定义函数

在上一步中我们调用的是app1下views中的get_name函数,我们开始定义,主要是让网页显示一个form表单

python3 django import 自定义class django forms.py_html_05


在这里定义的函数名字叫get_name,返回的是一个叫name.html的文件

,我们要写的便是这个html文件,首先在**工程文件夹(一定要在工程文件夹,否则会找不到))**下(我这里是demo)创建一个templates(模板)文件夹

python3 django import 自定义class django forms.py_django_06


然后在这个文件夹下建立一个html文件,因为我们刚才返回的那个文件叫name.html,因此这里那个html文件名字就叫name,之后就是写html语言代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="\app1\get_name" method="post"> <!这里是注释:L-action表示路径,method表示山上传方法->
    <label for="你的名字">你的名字:</label>
    <input type="text" id = "first_name" name="first_name" maxlength="20" required>
    <label for="你的姓氏">你的姓氏:</label>
    <input type="text" id = "last_name" name ="last_name" maxlength="20" required>
</form>
</body>
</html>

之后便是把templates模板和调用这个模板关联起来,让系统在调用时知道是在调用他。

在全局配置下,找到templates,在DIR后面添加路径

python3 django import 自定义class django forms.py_上传_07


然后就可以,启动Django服务,查看网页了

利用Django的便捷方式创建表单

1.首先在在项目文件下创建templates文件夹下,然后在该文件夹下创建name.html文件,并且将该templates文件在全局设置中声明,这和前面一样。

2.在应用app1下建立一个表单文件,forms.py,以后所有的表单都可在这个文件下处理,这里我只创建了一个。

首先,导入表单,创建表单类如下:

from django import forms  # 导入forms


class PersonForm (forms.Form):  # 创建类对象
    first_name = forms.CharField(label='你的名字', max_length=20)
    last_name = forms.CharField(label="你的姓名", max_length=20)

3.应用表单PersonForm类

首先在views中我们的get_name()函数,return要加一个参数
{request,‘name.html’,‘form’:表单类名()},具体如下:

def get_name(request):   # get_name函数
    if request.method == 'POST':  # 判断表单的提交方式post提交
        form = PersonForm(request.POST)  # 创建一个form对象
        if form.is_valid():  # 判断表单是否有效
            first_name = form.cleaned_data['first_name']  # 获得传递信息
            last_name = form.cleaned_data['last_name']
            return HttpResponse(first_name+' '+last_name)
        else:   # 表单无效
            return HttpResponseRedirect('erro')

    else:    # 提交方式为get
        return render(request,'name.html',{'form1':PersonForm()})

当然在name.html红也要改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="\app1\get_name" method="post"> <!-这里是注释:L-action表示路径,method表示山上传方法->
    {%csrf_token%}<!-防止被跨越攻击->
    {{form1}}   
    <button type ="submit" >提交</button>  <!-添加提交按钮->
</form>
</body>
</html>

这样一来就不在html文件中写了,只要定义表单类之后,将类映射到html文件中即可,注意映射时用双括号