Flask 是一个轻量级的 Python Web 框架,非常适合快速开发简单而又功能完善的 Web 应用程序。在本教程中,我们将使用 Flask 来开发一个学生信息管理系统,具有基本的增加、删除、修改和查询功能。
使用 pycharm
专业版新建一个Flask项目,会自动生成目录结构和 app.py
文件, static
目录是存放一些静态资源,比如css和javascript等, templates
目录是存放html文件的模板文件。
app.py
Flask 应用初始化
python# 导入 Flask 对象
from flask import Flask, render_template, request, redirect
# 使用 Flask 对象创建一个app对象
app = Flask(__name__)
students = [
{'name': '张三', 'chinese': '65', 'math': '65', 'english': '65'},
{'name': '李四', 'chinese': '65', 'math': '65', 'english': '65'},
{'name': '王五', 'chinese': '65', 'math': '65', 'english': '65'},
{'name': '赵六', 'chinese': '65', 'math': '65', 'english': '65'},
]
# 路由
@app.route('/') # / 是访问的路径
def init():
return redirect('/login')
# return render_template('login.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
# 登录的功能
# 全栈项目,前后端不分离
# return '需要实现登录的逻辑'
# request 对象可以拿到浏览器传递给服务器的所有数据
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
# 登录成功之后,连接数据库,校验账号密码
if username == 'admin' and password == '123456':
# 登录成功之后,应该跳转到管理页面
return redirect('/admin')
else:
return "账号或者密码错误"
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')
print('获取的学员信息', username, chinese, math, english)
students.append({'name': username, 'chinese': chinese, 'math': math, 'english': math})
return redirect('/admin')
return render_template('add.html')
@app.route('/change', methods=['GET', 'POST'])
def change_student():
# 先显示学员的数据,然后在浏览修改,提交到服务器保存
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)
@app.route('/delete')
def delete_student():
# 在后台需要拿到学员的名字
print(request.method)
username = request.args.get('name')
# 找到学员并删除
for stu in students:
if stu['name'] == username:
students.remove(stu)
return redirect('/admin')
if __name__ == '__main__':
app.run()
templates/login.html
登录页面
python<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
{# 导入框架的css #}
<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"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="username"
>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
name="password"
>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
templates/admin.html
登录成功后的管理页面
python<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<table class="table" style="width: 600px; 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>
{#
需要将python数据显示到浏览器上,模板语法
jinja2(flask) numjucks(javascript) moka(django) vue
jinja2 可以直接在 html 中写 python 的逻辑
#}
{% for stu in students %}
<tr>
<th>{{ stu.name }}</th>
<td>{{ stu.chinese }}</td>
<td>{{ stu.math }}</td>
<td>{{ stu.english }}</td>
<td><a href="/change?name={{ stu.name }}">修改</a> <a href="/delete?name={{ stu.name }}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="container" style="width: 600px; margin: 10px auto">
<!-- Content here -->
<div class="row">
<div class="col">
<a href="/add">新增学员信息</a>
</div>
</div>
</div>
<div>
</div>
</body>
</html>
templates/add.html
添加学员信息的页面
python<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增数据</title>
{# 导入框架的css #}
<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"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="username"
>
</div>
<div class="mb-3">
<label for="chinese" class="form-label">语文</label>
<input type="text"
class="form-control"
id="chinese"
name="chinese"
>
</div>
<div class="mb-3">
<label for="math" class="form-label">数学</label>
<input type="text"
class="form-control"
id="math"
name="math"
>
</div>
<div class="mb-3">
<label for="english" class="form-label">英语</label>
<input type="text"
class="form-control"
id="english"
name="english"
>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
templates/change.html
修改学生信息的界面
python<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改数据</title>
{# 导入框架的css #}
<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"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="username"
value="{{ students.name }}"
>
</div>
<div class="mb-3">
<label for="chinese" class="form-label">语文</label>
<input type="text"
class="form-control"
id="chinese"
name="chinese"
value="{{ students.chinese }}"
>
</div>
<div class="mb-3">
<label for="math" class="form-label">数学</label>
<input type="text"
class="form-control"
id="math"
name="math"
value="{{ students.math }}"
>
</div>
<div class="mb-3">
<label for="english" class="form-label">英语</label>
<input type="text"
class="form-control"
id="english"
name="english"
value="{{ students.english }}"
>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
static/css/bootstrap.css
css样式,可以让页面显示更好看,这个样式文件可以点击 这里 下载
本文作者:柯南
本文链接:
版权声明:©2024 柯南 All rights reserved.