Flask学习笔记（三）

前言

上一篇文章中我们研究了jinja2模板使用和Flask的路由，这一次来看一点激动人心的东西，即“表单”。学习过前端的同学都知道，对于即将要开发的系统而言，输入功能是必须的，利用HTML表单来获取用户的输入就成了天经地义的事情。

创建表单

所谓的HTML表单，指的是在一个HTML页面上有一个Form，它里面包含一些需要用户输入的东西，下面我们就先来创建一个基于HTML的学生信息添加界面：info.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
</head>
<body>
    <h1>学生信息添加界面</h1>
    <form action="/studentinfo/" method = "post">
        <p><label>姓名</label><input type="text" name="name"></p>
        <p><label>学号</label><input type="text" name="id"></p>
        <p><label>性别</label><input type="radio" name="sex">男<input type="radio" name="sex">女</p>
        <p><label>语文</label><input type="number" name="chinese"></p>
        <p><label>数学</label><input type="number" name="math"></p>
        <p><label>英语</label><input type="number" name="english"></p>
        <input type="submit" name="" value="添加">
    </form>
</body>
</html>

学生信息添加界面的作用是收集输入的学生信息，当用户填写完成后，需要将该信息提交给程序来判断其信息是否正确。学生信息添加界面如下：

上述HTML模板中，表单Form需要提交给路由studentinfo，这就需要在主程序中添加相关的路由。

在程序中添加路由

@app.route('/info/')
def info():
    return render_template('info.html')


@app.route("/studentinfo/", methods=['POST', 'GET'])
def studentinfo():
    name = request.form["name"]
    id = request.form["id"]
    sex = request.form["sex"]
    chinese = request.form['chinese']
    math = request.form['math']
    english = request.form['english']
    return f"姓名：{name} <br/> 学号：{id} <br/> 性别：{sex} <br/> 语文：{chinese} <br/> 数学：{math} <br/> 英语：{english}"

获取表单的信息，通过request对象，其中的表单信息是一个字典，通过索引表单中相关输入框的name，即可得到相应的信息，在这个函数中，我们只是简单将所获取的信息显示出来，结果如下：

重定向路由

在学生信息输入正确后，一般情况下我们在判断完成后要重定向到相关的页面，这就用到Flask中的两个函数，一个是redirect，一个是url_for。redirect是重定向的函数，而url_for则是构建一个有效的Flask路由，该函数的第一个参数是一个被路由修饰的函数，其余参数是一个或多个关键字，这些参数对应于要重定向的URL的变量部分。

以上面学生信息添加界面为例，当我们得到学生输入的信息后，在studentinfo函数中，要将学生的信息重定向到一个后台管理页面，当然，为了简单起见，在后台管理页面也只是显示一下信息，先来设置一个后台学生显示页面：allinfo.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <title>学生信息列表</title>
</head>
<body>
    <h1>学生信息列表</h1>
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>性别</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>

      </tr>
      <tr>
        <td>{{ name }}</td>
        <td>{{ id }} </td>
        <td> {{ sex }} </td>
        <td>{{ chinese }} </td>
        <td> {{ math }} </td>
        <td>{{ english }} </td>

      </tr>
    </table>
</body>
</html>

这时在相应的studentlist函数中，需要用request.args.get()来获取相应的参数数据。

接着还需要修改一下刚才的studentinfo函数，如下所示：

@app.route("/studentinfo/", methods=['POST', 'GET'])
def studentinfo():
    name = request.form["name"]
    id = request.form["id"]
    sex = request.form["sex"]
    chinese = request.form['chinese']
    math = request.form['math']
    english = request.form['english']
    # return f"姓名：{name} <br/> 学号：{id} <br/> 性别：{sex} <br/> 语文：{chinese} <br/> 数学：{math} <br/> 英语：{english}"
    return redirect(url_for('studentlist', name=name, id=id, sex=sex, chinese=chinese, math=math, english=english))

@app.route("/studentlist/", methods=['GET'])
def studentlist():
    name = request.args.get('name')
    id = request.args.get('id')
    sex = request.args.get('sex')
    chinese = request.args.get('chinese')
    math = request.args.get('math')
    english = request.args.get('english')
    return render_template('allinfo.html', name=name, id=id, sex=sex, chinese=chinese, math=math, english=english)

显示结果如下所示：