1. 小案例–资源管理系统
1. 小项目架构
myproject10
├── static
│ └── css
│ └── bootstrap.css
├── templates
│ └── add.html
│ └── admin.html
│ └── change.html
│ └── login.html
├── app.py
├── config.py
2. 练习代码
ps: 前端库使用bootstrap库, 后端框架为python-flask, 前后端不分离的全栈小项目
- static/css/bootstrap.css
# 使用的是bootstrap库, 略
- templates/add.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>新增数据</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<form style="width: 400px; margin: 100px auto" method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">用户名</label>
<input type="text" class="form-control" name="username" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="chinese" class="form-label">语文</label>
<input type="text" class="form-control" name="chinese" id="chinese">
</div>
<div class="mb-3">
<label for="math" class="form-label">数学</label>
<input type="text" class="form-control" name="math" id="math">
</div>
<div class="mb-3">
<label for="English" class="form-label">英语</label>
<input type="text" class="form-control" name="English" id="English">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
- templates/admin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理系统主页</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<table class="table" style="width: 800px; margin: 100px auto">
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">语文</th>
<th scope="col">数学</th>
<th scope="col">英语</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr>
<th >{{ stu.name }}</th>
<td>{{ stu.chinese }}</td>
<td>{{ stu.math }}</td>
<td>{{ stu.English }}</td>
<td><a href="/delete?name={{stu.name}}">删除</a> <a href="/change?name={{stu.name}}">修改</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="container" style="width: 800px; margin: 10px auto">
<div class="row">
<div class="col-4">
<a href="/add">新增学员信息</a>
</div>
</div>
</div>
</body>
</html>
- templates/change.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改信息</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<form style="width: 400px; margin: 100px auto" method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">用户名</label>
<input type="text" class="form-control" name="username" id="exampleInputEmail1" aria-describedby="emailHelp" value="{{ students.name }}">
</div>
<div class="mb-3">
<label for="chinese" class="form-label">语文</label>
<input type="text" class="form-control" name="chinese" id="chinese" value="{{ students.chinese }}">
</div>
<div class="mb-3">
<label for="math" class="form-label">数学</label>
<input type="text" class="form-control" name="math" id="math" value="{{ students.math }}">
</div>
<div class="mb-3">
<label for="English" class="form-label">英语</label>
<input type="text" class="form-control" name="English" id="English" value="{{ students.English }}">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
- templates/login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="/static/css/bootstrap.css" >
</head>
<body>
<form style="width: 400px; margin: 100px auto" method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">用户名</label>
<input type="text" class="form-control" name="username" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们永远不会与其他人分享您的电子邮件</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" name="password" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label for="exampleCheck1" class="form-check-label">记住我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
- app.py
from flask import Flask
students=[
{'name':'张三', 'chinese':65, 'math':65, 'English':65},
{'name':'李四', 'chinese':65, 'math':65, 'English':90},
{'name':'王五', 'chinese':65, 'math':90, 'English':65},
{'name':'赵六', 'chinese':90, 'math':65, 'English':65}
]
app = Flask(__name__)
app.config.from_object('config')
# 登录页面
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
return redirect('admin')
return render_template('login.html')
# 管理页面
@app.route('/admin')
def admin():
return render_template('admin.html', students=students)
# 新增页面
@app.route('/add', methods=['GET', 'POST'])
def add():
if request.method == 'POST':
username = request.form.get('username')
chinese = request.form.get('chinese')
math = request.form.get('math')
English = request.form.get('English')
students.append({'name': name, 'chinese': chinese, 'math': math, 'English': English})
return redirect('/admin')
return render_template('add.html')
# 删除数据
@app.route('/delete')
def delete_student():
username = request.args.get('name')
for stu in students:
if stu['name'] == username
students.remove(stu)
return redirect('/admin')
# 修改数据
@app.route('/change', methods=['GET', 'POST'])
def change():
username = request.args.get('name')
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['English'] = English
return redirect('/admin')
for stu in students:
if stu['name'] == username:
return render_template('change.html', students=stu)
return redirect('/admin')
if __name__ == '__main__':
app.run(host=0.0.0.0, port=5001, debug=app.config['DEBUG'])
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
