Day5-Web前端开发
Web 开发实战-学生管理系统前端开发
简介
知识模块
知识点
受众
- 初级测试开发工程师
- 初级 Python 开发工程师
实战要求
- 首页面
index.html
- 通过模板技术、将所有信息以表格形式显示到 index.html
文件中,每条学生信息后对应有 修改
和 删除
操作,并在首页中包含 添加新学生
按钮
- 添加页面 -- 当点击首页中的
添加学生
按钮时,页面跳转到 add.html
页面,显示学生信息除 ID 之外的所有信息输入框,并以 POST
方式提交
- 修改页面 -- 在点击学生修改功能时,跳转到
change.html
页面,显示学生信息除 ID 之外的所有信息输入框,并在输入框内显示被修改学生原始信息,以 POST
方式提交
- 适当通过 CSS 样式美化页面
实现代码
首页面 - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.docker{
width:800px;
margin:100px auto;
}
table{
width:800px;
}
td{
text-align:center;
}
</style>
</head>
<body>
<div class="docker">
<div class="add">
<a href="/stu/add">新增</a>
</div>
<table border="1">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>操作</th>
</tr>
{% for s in students %}
<tr>
<td>{{s.sid}}</td>
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.gender}}</td>
<td>{{s.address}}</td>
<td>
<a href="/stu/change/{{s.sid}}">修改</a>
<a href="/stu/del/{{s.sid}}">删除</a>
</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
添加页面 - add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Student</title>
<style>
.container{
width:300px;
height:200px;
margin:200px auto;
}
.item{
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="container">
<form action="/stu/add" method="post">
<div class="item">
<label>姓名:</label>
<input type="text" placeholder="请输入姓名" name="name">
</div>
<div class="item">
<label>年龄:</label>
<input type="text" placeholder="请输入年龄" name="age">
</div>
<div class="item">
<label>性别:</label>
<input type="text" placeholder="请输入性别" name="gender">
</div>
<div class="item">
<label>地址:</label>
<input type="text" placeholder="请输入地址" name="address">
</div>
<div class="item">
<button type="submit">添加</button>
</div>
</form>
</div>
</body>
</html>
修改页面 - change.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Student</title>
<style>
.container{
width:300px;
height:200px;
margin:200px auto;
}
.item{
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="container">
<form action="/stu/change/{{stu.sid}}" method="post">
<div class="item">
<label>姓名:</label>
<input type="text" placeholder="请输入姓名" name="name" value="{{stu.name}}">
</div>
<div class="item">
<label>年龄:</label>
<input type="text" placeholder="请输入年龄" name="age" value="{{stu.age}}">
</div>
<div class="item">
<label>性别:</label>
<input type="text" placeholder="请输入性别" name="gender" value="{{stu.gender}}">
</div>
<div class="item">
<label>地址:</label>
<input type="text" placeholder="请输入地址" name="address" value="{{stu.address}}">
</div>
<div class="item">
<button type="submit">修改</button>
</div>
</form>
</div>
</body>
</html>
总结
- 此部分内容主要基于前端 Flask 开发的后端接口实现前端页面的展示
- 实现过程通过 HTML、CSS 结合 Flask 模板技术完成页面展示
- 代码只实现了基础展示功能,可根据所学内容对页面进行美化