目标
在学生列表页面,新增编辑与删除链接
点击编辑,可以看见用户的信息,并且可以修改和提交用户信息
步骤- 模板页新增链接
- 思考编辑操作所需的数据与流程
效果
- 点击链接跳转编辑页面
- 编辑页面应该有当前数据行的原始数据,保存在表单控件里
- 用户修改心后提交,交给另一个路径或者分路来解决
- 修改完成后要跳转到列表页
问题的关键
第2步,编辑页面是需要有当前数据行的原始数据的。 如何获取?
先写一个编辑的页面吧<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>编辑学生</title>
</head>
<body>
<h1>编辑学生</h1>
{{ res }}
<form action="" method="post">
<label for="">学生姓名:</label><input type="text" name="name" value=""> <br>
<label for="">性别:</label>
<select name="gender" id="">
<option value="男">男</option>
<option value="女">女</option>
<option value="中性">中性</option>
<option selected value="保密">保密</option>
</select>
<br>
<input type="submit">
</form>
</body>
</html>
后端
""" 编辑学生的函数 """
if request.method == "GET":
print(request.method)
id = request.GET["id"]
sql = "select * from student where id = {};"
print(sql)
res = db.select_from_table(sql, (id,))
return render(request, "edit_student.html", {"res": res[0]})
if request.method == "POST":
print(request.method)
id = request.GET["id"]
name = request.POST["name"]
gender = request.POST["gender"]
sql = """update student set {} = "{}", {}="{}" where id = {};"""
db.act_table(sql, ("name", name, "gender", gender, id))
return redirect("/students/")
注意点
弄清楚什么时候走get分支,什么时候走post分支
明白,在post分支里面,仍然可以取get的传参
明确,拼sql语句时,三引号,双引号,单引号的效果
前端再改改<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>编辑学生</title>
</head>
<body>
<h1>编辑学生</h1>
{{ res }}
<form action="" method="post">
<input type="hidden" name= "id" value="{{ res.id }}">
<label for="">学生姓名:</label><input type="text" name="name" value="{{ res.name }}"> <br>
<label for="">性别:</label>
<select name="gender" id="">
<option value="男" {% if res.gender == "男" %} selected {% endif %}>男</option>
<option value="女" {% if res.gender == "女" %} selected {% endif %}>女</option>
<option value="中性" {% if res.gender == "中性" %} selected {% endif %}>中性</option>
<option value="保密" {% if res.gender == "保密" %} selected {% endif %}>保密</option>
</select>
<br>
<input type="submit">
</form>
</body>
</html>
为了让列表更详尽,改student前端
新增性别列