开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> flask搭建简易版学生信息管理系统 -> 正文阅读

[Python知识库]flask搭建简易版学生信息管理系统

项目最终效果

项目准备

本项目是基于Flask+Bootstarp框架搭建的一个简易版学生管理信息系统,不涉及到数据库，关于flask框架的知识点请详见Flask全套知识点从入门到精通，学完可直接做项目

开发环境：

Python3.9.6

Vscode编辑器

项目最终效果

最终的文件结构目录：

?运行app.py文件后，访问http://127.0.0.1:5000/

当你访问网站时，首先会进入登录界面，输入正确的用户名和密码后便可直接跳转到管理页面?

管理页面默认有三个学生的成绩，在操作那你可以删除、修改、新增学生的成绩信息?

这里比如我删除张三的信息，点击后：

当我想修改李四的信息时，点击修改：

你会看到李四的信息回显，此时修改想修改的数据即可，比如：

点击提交后，页面自动跳转到学生信息列表页面：

此时，李四的信息已经被修改

当我想新增学生的信息时，点击新增后：

?点击新增后跳转到新增学生信息的页面，比如此时我们添加一个小花同学的成绩：

点击提交会跳转到学生信息列表页面：

?此时我们成功的添加了小花的信息

以上就是本次项目最终实现后的效果，非常适合初学者的学习

项目准备

由于本项目需要使用flask和bootstarp框架，其中flask安装通过命令行pip install flask

pip install flask

bootstarp框架需要前往官网下载，本次使用的是bootstarp4,也就是到https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css

去复制原css代码，最后保存在static文件下的bootstap文件中

?项目实施

首先，先把flask框架搭建起来，编写app.py文件

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello'

if __name__ == '__main__':
    app.run(debug=True)

运行后效果：

登录功能?

?接着，我们需要编写一个登录的路由以及页面（在这一步之前，你可以编写一个注册的功能）

路由编写:

@app.route('/login',methods=['POST','GET'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        if username == 'admin' and password == '123456':
            return redirect(url_for('admin'))
        return  redirect('/login')

登录页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap.min.css') }}">
</head>
<body>
    <form method="post" style="width: 400px; margin: 100px auto">
        <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>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
</body>
</html>

管理页面

当我们登录成功后，会跳转到管理页面

管理页面路由：

students = [
    {'name':'张三','id':'1001','chinese':'65','math':'22','english':'87'},
    {'name':'李四','id':'1002','chinese':'65','math':'22','english':'87'},
    {'name':'王麻子','id':'1003','chinese':'65','math':'22','english':'87'}
]
@app.route('/admin')
def admin():
    return render_template('admin.html',students=students)

这里我们顺便添加三个默认学生，便于后面的功能开发

管理页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap.min.css') }}">
</head>
<body>
    <table class="table" style="width: 600px; margin: 50px auto ">
        <thead>
          <tr>
            <th scope="col">姓名</th>
            <th scope="col">学号</th>
            <th scope="col">语文</th>
            <th scope="col">数学</th>
            <th scope="col">英语</th>
            <th scope="col" >操作</th>
          </tr>
        </thead>
        <tbody>
            {% for student in students %}
          <tr>
            <td>{{ student.name }}</td>
            <td>{{ student.id }}</td>
            <td>{{ student.chinese }}</td>
            <td>{{ student.math }}</td>
            <td>{{ student.english }}</td>
            <td><a href="/delete?id={{ student.id }}">删除</a>
                <span>|</span>
                <a href="/change?id={{ student.id }}">修改</a>
                <span>|</span>
                <a href="/add">新增</a>
            </td>
          </tr>
            {% endfor %}
        </tbody>
      </table>
</body>
</html>

新增功能

从这里开始，我们就要开始实现学生信息的操作功能

新增学生路由：

@app.route('/add',methods=['POST','GET'])
def add():
    if request.method == 'GET':
        return render_template('add.html')
    else:
        name = request.form.get('name')
        id = request.form.get('id')
        chinese = request.form.get('chinese')
        math = request.form.get('math')
        english = request.form.get('english')
        students.append({'name':name,'id':id,'chinese':chinese,'math':math,'english':english})
        return redirect(url_for('admin'))

新增学生页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增学员信息</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap.min.css') }}">
</head>
<body>
    <form method="post" style="width: 400px; margin: 100px auto">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">姓名</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="name">
        </div>
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">学号</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="id">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">语文</label>
          <input type="text" class="form-control" id="exampleInputPassword1" name="chinese">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">数学</label>
          <input type="text" class="form-control" id="exampleInputPassword1" name="math">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">英语</label>
          <input type="text" class="form-control" id="exampleInputPassword1" name="english">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
</body>
</html>

修改功能

修改功能的页面跟新增差不多

修改学生路由：

@app.route('/change',methods=['GET','POST'])
def change_student():
    stu_id = request.args.get('id')
    
    if request.method == 'POST':
        name = request.form.get('name')
        id = request.form.get('id')
        chinese = request.form.get('chinese')
        math = request.form.get('math')
        english = request.form.get('english')
        for student in students:
            if student['id'] == id:
                student['name'] = name
                student['chinese'] = chinese
                student['math'] = math
                student['english'] = english
        return redirect(url_for('admin'))
    for student in students:
        if student['id'] == stu_id:
            return render_template('change.html',student=student)

修改学生页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改学员信息</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap.min.css') }}">
</head>
<body>
    <form method="post" style="width: 400px; margin: 100px auto">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">姓名</label>
          <input type="text" class="form-control" id="exampleInputEmail1" value="{{ student.name }}" name="name">
        </div>
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">学号</label>
          <input type="text" class="form-control" id="exampleInputEmail1" value="{{ student.id }}" name="id">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">语文</label>
          <input type="text" class="form-control" value="{{ student.chinese }}" name="chinese">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">数学</label>
          <input type="text" class="form-control" value="{{ student.math }}" name="math">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">英语</label>
          <input type="text" class="form-control" value="{{ student.english }}" name="english">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
</body>
</html>

删除功能

在这里，就不需要删除的页面了，只需要把接口写好就行

删除学生路由：

@app.route('/delete',methods=['GET'])
def delete_student():
    stu_id = request.args.get('id')
    for student in students:
        if student['id'] == stu_id:
            students.remove(student)
    return redirect(url_for('admin'))