跳转至

7. 删除修改功能

1. 添加后端删除修改路由逻辑

# 4. 删除功能
@app.route('/delete', methods=['GET', 'POST'])
def delete():
    return render_template('delete.html',students=students)

# 5. 修改功能
@app.route('/change', methods=['GET', 'POST'])
def change():
    return render_template('change.html',students=students)

img_71.png

2. 修改admin.html页面

添加一列操作
      <th scope="col">操作</th>
每一行添加操作的内容：删除/修改
      <td><a href="/delete">删除</a><a href="/change">修改</a> </td>
img_72.png

效果 img_73.png 

稍微修改下，加个空格，好多了
      <td><a href="/delete">删除</a> <a href="/change">修改</a> </td>
img_74.png

3. 添加后端删除逻辑

@app.route('/delete', methods=['GET', 'POST'])
def delete():
    # 查看删除用的请求方法
    print(request.method)
    # 删除后，返回管理页面查看列表
    return redirect('/admin')

4. 从admin.html前端获取到用户名

?name={{ stu.name }}
可以从前端页面获取指定的变量到后端！

<td><a href="/delete?name={{ stu.name }}">删除</a> <a href="/change?name={{ stu.name }}">修改</a> </td>
img_75.png

5. 后端查看从前端获取到的变量内容

request.args
可以获取从前端得到的变量
img_76.png

测试
img_77.png

获取到用户名
img_78.png

编写删除逻辑，根据用户名删除列表中的内容！
    for stu in students:
        if stu['name'] == username:
            students.remove(stu)
img_79.png

重启flask（每次修改都需要重启！！！后面我省略不写了）
删除测试，成功！
img_80.png

6. 后端修改学员信息思路

思路：先显示要修改的学生的数据，然后再在新的页面上修改，最后提交到服务器保存！

7. 后端获取到要修改的学生信息传给前端

@app.route('/change', methods=['GET', 'POST'])
def change():
    # 从前端admin.html页面获取要修改学生的姓名
    username = request.args.get('name')
    # 从列表中找到学生信息
    for stu in students:
        if stu['name'] == username:
            # 将获取到的学生信息，传到前端页面change.html，用于在前端页面渲染学生成绩信息
            return render_template('change.html',student=stu)
img_81.png

8. 创建修改学生信息页面change.html

复制add.html页面
change.html内容基本与add.html一致！
img_82.png

点击修改测试
img_83.png 
页面出来了，下一步需要把后端的数据在页面中显示出来了！

9. 前端页面change.html展示后端传来的数据

只需要在input标签中添加
value="{{student.name}}"
每个下面写对应的！如下图
img_84.png

再次点击修改测试！

img_85.png

每个框中都有数据了！！！

10. 添加后端提交逻辑

思路：前端页面修改后，点击提交，然后后端将新的数据保存到列表中！
img_86.png

再次修改测试 

出现问题，发现每次都在change，跳不出来，发现是后端代码bug问题
应该是接收POST请求后，修改列表，然后跳转，而不是在外面跳转！

@app.route('/change', methods=['GET', 'POST'])
def change():
    # 从前端admin.html页面获取要修改学生的姓名
    username = request.args.get('name')
    # 从列表中找到学生信息
    for stu in students:
        if stu['name'] == username:
            # 将获取到的学生信息，传到前端页面change.html，用于在前端页面渲染学生成绩信息
            return render_template('change.html',student=stu)
    # 点击提交（请求为POST），将前端页面数据传到后端
    if request.method == 'POST':
        username = request.form.get('username')
        chinese = request.form.get('chinese')
        math = request.form.get('math')
        english = request.form.get('english')
    # 修改列表
        for stu in students:
            if stu['name'] == username:
                stu['chinese'] = chinese
                stu['math'] = math
                stu['englis'] = english
        # 完成后，返回到管理页面
        return redirect('/admin')
img_87.png 再次测试 
依旧有问题，将判断post请求的代码放在前面，再次测试，成功！！！！
img_88.png

点击修改，进入修改页面
img_89.png

修改后点击提交
img_90.png

跳转到admin页面，数据也变了！！！
最后更新: 2022-03-04 07:40:25