需求

  1. 定义合适的数据结构，将下⾯表格中的内容包含其中
  2. name gender chinese math
    tom ‘male’ 90 78
    bob ‘male’ 87 65
    lucy ‘female’ 74 73
    lily ‘female’ 86 90
    alex ‘male’ 91 77
    john ‘male’ 79 72
    jack ‘male’ 60 99
    tomas ‘male’ 88 98
    eva ‘female’ 100 85
    ella ‘female’ 70 81
  3. 定义⼀个⻚⾯模板，将数据内容以表格形式展示出来
  4. 将⽤户姓名设置成⼀个链接，点击后可以跳转到修改信息⻚⾯，并可完
    成对原数据的修改
  5. ⻚⾯整体样式保持⼀致

解决

1.整理成字典

2.改成对象

3.写app代码

4.html页面

以表格的形式展示出来
表格头

for循环包住整个tr

item即返回key又返回values

此时基本页面已经形成了

5.增加学生名链接（这个链接点进去可以修改用户信息）

6.APP文件

第一行多一个from flask import request

7.再创建一个modify.html（表单设计修改页）

表单的设计，需要提交
name不修改，只需要修改性别，chinese，math三个信息

性别：单选radio


默认

就是已经选中的状态

【重要】我们要让

本来是female的话checked放在女那里
本来是male的话checked放在男那里
？？？怎么实现
if判断

### 语文和数学

提交


怎么让真正的提交成功

表单的提交

用action到路径
表单处理用post

用元组修改一下app


post里面需要接收一下，接受
app里：


最终的页面要显示的话得重定向

跳转到首页，最终

modify.html里最终：

效果


点击了ella，默认的是女。ok

代码

app.py

from flask import Flask
from flask import request
from flask import render_template
from flask import redirect


USERS = {
   
    'tom': {
   'gender': 'male', 'chinese': 90, 'math': 78},
    'bob': {
   'gender': 'male', 'chinese': 87, 'math': 65},
    'lucy': {
   'gender': 'female', 'chinese': 74, 'math': 73},
    'lily': {
   'gender': 'female', 'chinese': 86, 'math': 90},
    'alex': {
   'gender': 'male', 'chinese': 91, 'math': 77},
    'john': {
   'gender': 'male', 'chinese': 79, 'math': 72},
    'jack': {
   'gender': 'male', 'chinese': 60, 'math': 99},
    'tomas': {
   'gender': 'male', 'chinese': 88, 'math': 98},
    'eva': {
   'gender': 'female', 'chinese': 100, 'math': 85},
    'ella': {
   'gender': 'female', 'chinese': 70, 'math': 81},
}

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html', users=USERS)


@app.route('/modify', methods=('GET', 'POST'))
def modify():
    if request.method == 'POST':
        global USERS
        name = request.form['name']
        USERS[name]['gender'] = request.form['gender']
        USERS[name]['chinese'] = int(request.form['chinese'])
        USERS[name]['math'] = int(request.form['math'])
        return redirect('/')
    else:
        name = request.args['name']
        info = USERS[name]
        return render_template('modify.html', name=name, info=info)



if __name__ == '__main__':
    app.debug = True
    app.run()

modify.html

<html>
    <head>
        <title>信息修改</title>
    </head>

    <body>
        <h2>正在修改 {
   {
   name}}</h2>
        <hr>
        <form action="/modify" method="POST">
            性别：
            男<input type="radio" name="gender" value="male" {
   % if info.gender == "male" %}checked{
   % endif %}>
            女<input type="radio" name="gender" value="female" {
   % if info.gender == "female" %}checked{
   % endif %}>
            <br>

            语文：<input type="text" name="chinese" value="{
   { info.chinese }}">
            <br>

            数学：<input type="text" name="math" value="{
   { info.math }}">
            <br>
            <input type="hidden" name="name" value="{
   { name }}">
            <input type="submit">
        </form>
    </body>
</html>

home.html

<html>
    <head>
        <title>学生信息</title>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>语文</th>
                    <th>数学</th>
                </tr>
            </thead>

            <tbody>
                {
   % for name, info in users.items() %}
                <tr>
                    <td>
                        <a href="/modify?name={
   { name }}">{
   {
    name }}</a>
                    </td>
                    <td>{
   {
    info.gender }}</td>
                    <td>{
   {
    info.chinese }}</td>
                    <td>{
   {
    info.math }}</td>
                </tr>
                {
   % endfor %}
            </tbody>
        </table>
    </body>
</html>

下一期

设计一个简单的用户信息，使用模板继承，且出一个排名前三的学生成绩