flask搭建简易版学生信息管理系统

艾派森

已于 2023-01-13 21:57:22 修改

阅读量7.3k

点赞数 14

分类专栏： Flask 文章标签： flask python 后端

于 2022-09-16 21:55:45 首次发布

本文链接：https://blog.csdn.net/m0_64336780/article/details/126897763

版权

Flask 专栏收录该内容

5 篇文章 28 订阅

订阅专栏

本项目是基于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'))