2024-06-23
Python
00

目录

Flask 简介
功能需求分析
创建 Flask 应用程序

Flask 简介

Flask 是一个轻量级的 Python Web 框架,非常适合快速开发简单而又功能完善的 Web 应用程序。在本教程中,我们将使用 Flask 来开发一个学生信息管理系统,具有基本的增加、删除、修改和查询功能。

功能需求分析

  1. 添加学生信息:包括学生的姓名和各科目的成绩。
  2. 删除学生信息:允许用户删除已有的学生记录。
  3. 编辑学生信息:用户可以修改学生的姓名和课程的成绩。
  4. 显示学生列表:以列表形式展示所有学生的姓名和年龄。
  5. 用户界面美化:设计直观友好的用户界面,提升用户体验。

创建 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.