python web开发（完）

本篇就把代码都放出来

上面就是文件夹格式
app.py

# pip install Flask
import atexit
import json
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

ls = []  # 使用列表模拟数据库，所有学生信息存储在ls里面

# 假设的用户信息 定义了一个字典users，包含了一些假设的用户名和密码。这个字典用于验证用户
# 的登录信息。
users = {"admin": "123456", "guest": "123456"}

# 定义一个路由/，当用户访问根路径时，会调用default函数。default函数返回login.html模板，
# 即显示登录页面。
@app.route("/")
def default():
    return render_template("login.html")

# 定义了一个路由/login，并且指定了只接受POST请求。login函数从表单中获取用户名和密码，然
# 后检查这些凭据是否有效。如果有效，则重定向到/index路径；否则，重新显示登录页面并显示错误信息。
@app.route("/login", methods=["POST"])
def login():
    username = request.form["username"]
    password = request.form["password"]
    if username in users and users[username] == password:
        return redirect(url_for("index"))
    else:
        return render_template("login.html", error="Invalid username or password")

# 定义一个路由/index，当用户访问该路径时，会调用index函数。index函数返回index.html模
# 板，即显示主页。
@app.route("/index")
def index():
    return render_template("index.html")

# 定义一个路由/add，当用户访问该路径时，会调用add函数。add函数返回add.html模板，即显
# 示添加学生信息的页面。
@app.route("/add")
def add():
    return render_template("add.html")

# 定义一个路由/addinfo，并且指定了只接受POST请求。addinfo函数从表单中获取学生的名字、
# 年龄和性别，然后将这些信息存储在一个字典d中，并将该字典添加到列表ls中。最后，返回
# addinfo.html模板，并传递一个成功信息。
@app.route("/addinfo", methods=['POST'])
def addinfo():
    d = {}
    name = request.form["stu_name"]
    age = request.form["stu_age"]
    gender = request.form["stu_gender"]
    d["name"] = name
    d["age"] = age
    d["gender"] = gender
    ls.append(d)
    write()  # 保存数据
    return render_template("addinfo.html", info="成功")

# 定义一个路由/find，当用户访问该路径，会调用find函数，返回到find。html页面。
@app.route("/find")
def find():
    return render_template("find.html")

# 定义一个路由/findinfo，指定接受POST请求
@app.route("/findinfo", methods=['POST'])
def findinfo():
    name = request.form["stu_name"]
    found_students = [student for student in ls if student["name"] == name]
    if found_students:
        return render_template("findinfo.html", students=found_students)
    else:
        return render_template("findinfo.html", error="未找到该学生")

# 定义一个路由/edit,当用户访问该路径会调用edit函数，进入edit.html
@app.route("/edit")
def edit():
    return render_template("edit.html")

# 定义一个路由/edit2，指定接受POST请求
@app.route("/edit2", methods=['POST'])
def edit2():
    name = request.form["stu_name"]
    found_students = [student for student in ls if student["name"] == name]
    if found_students:
        return render_template("edit2.html", students=found_students)
    else:
        return render_template("edit2.html", error="未找到该学生")
    
# 定义一个路由/editinfo，指定接受POST请求
@app.route("/editinfo", methods=['POST'])
def editinfo():
    name = request.form["stu_name"]
    new_age = request.form["stu_age"]
    new_gender = request.form["stu_gender"]

    for student in ls:
      if    student["name"] == name:
            student["age"] = new_age
            student["gender"] = new_gender
            break
    write()  # 保存数据
    return render_template("editinfo.html", info="成功更新学生信息")

# 定义一个路由/del，
@app.route("/dele")
def dele():
    return render_template("dele.html")

# 定义一个路由/dele2，指定接受POST请求
@app.route("/dele2", methods=['POST'])
def dele2():
    name = request.form["stu_name"]
    found_students = [student for student in ls if student["name"] == name]
    if found_students:
        return render_template("dele2.html", students=found_students)
    else:
        return render_template("dele2.html", error="未找到该学生")
    
# 
@app.route("/deleinfo", methods=['POST'])
def deleinfo():
    name = request.form["stu_name"]

    for student in ls:
      if    student["name"] == name:
            ls.remove(student)
    write()  # 保存数据
    return render_template("deleinfo.html", info="成功删除学生信息")

@app.route("/view")
def view():
    return render_template("view.html", students=ls)

#自定义函数解码
def read():
    global ls
    # try:
    with open('students.json', 'r', encoding='utf-8') as f:
            ls = json.load(f)
    # except FileNotFoundError:
    #     ls = []
   
#自定义函数编码
def write():
    with open('students.json', 'w', encoding='utf-8') as f:
        json.dump(ls, f, ensure_ascii=False)

# 检查当前模块是否是主程序入口。如果是，则启动Flask应用，并开启调试模式。调试模式下，
# 应用会在代码发生变化时自动重新加载，并且会显示有用的调试信息。
if __name__ == "__main__":
    read()
    app.run(debug=True)
    

add.html

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/add.jpg') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #add {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="add">
    <h2>添加学生信息h2>
        <form action="/addinfo" method="post">
            <label>名字：label>
            <input type="text" name="stu_name" required><br>
            <label>年龄：label>
            <input type="number" name="stu_age" required><br>
            <label>性别：label>
            <select id="stu_gender" name="stu_gender" required>
            <option value="男">男option>
            <option value="女">女option>
            <br><input type="submit" value="提交"><br>
            <a href="/index">取消a>
        form>
    div>
body>

addinfo

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/add.jpg') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #addinfo {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="addinfo">
        <h2>添加学生信息{{ info }}h2><br>
        <p><a href="/index">返回主页面a>p>
    div>
body>

dele

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>删除学生信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/dele.jpg') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #dele {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="dele">
    <h2>删除学生信息h2>
        <form action="/dele2" method="post">
            <label>名字：label>
            <input type="text" name="stu_name" required><br>
            <input type="submit" value="确认">
            <a href="/index">取消a>
        form>
    div>
body>

dele2

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>删除学生信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/login.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

         /* 主页面的样式 */
         #dele2 {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="dele2">
    <h2>学生信息h2>
    {% if error %}
        <p style="color: red;">{{ error }}p>
    {% endif %}
    {% if students %}
        
        <table border="1">    
            <tr>
                <th>名字th>
                <th>年龄th>
                <th>性别th>
            tr>
        {% for student in students %}
            <tr>
                <td>{{ student.name }}td>
                <td>{{ student.age }}td>
                <td>{{ student.gender }}td>
            tr>
        {% endfor %}
        table>
        {% endif %}
        <h2>删除信息h2>
        
        <form action="/deleinfo" method="post">
            <label for="stu_name">请再次输入姓名进行确认:label>
            <input type="text" name="stu_name" required><br><br>

            <input type="submit" value="确认">

        <p><a href="/index">取消a>p>
    div>
body>

deleinfo

DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>删除信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/login.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #deleinfo {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>
<body>
    <div id="deleinfo">
    <h1>{{ info }}h1>
    <a href="/index">返回主页a>
    div>
body>

html>

edit

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>修改信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/edit.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #edit {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="edit">
    <h2>修改学生信息h2>
        <form action="/edit2" method="post">
            <label>名字：label>
            <input type="text" name="stu_name" required><br>

            <br><input type="submit" value="确认">
            <br><a href="/index">取消a>
        form>
    div>
body>

edit2

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>修改信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/edit.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #edit {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="edit">
        <h2>原信息h2>
        {% if error %}
        <p style="color: red;">{{ error }}p>
        {% endif %}
        {% if students %}
        <table border="1">
            <tr>
                <th>名字th>
                <th>年龄th>
                <th>性别th>
            tr>
        {% for student in students %}
            <tr>
                <td>{{ student.name }}td>
                <td>{{ student.age }}td>
                <td>{{ student.gender }}td>
            tr>
        {% endfor %}
        table>
        {% endif %}
    <h2>修改信息h2>
        <form action="/editinfo" method="post">
            <label for="stu_name">请输入原姓名进行确认:label>
            <input type="text" name="stu_name" required><br><br>

            <label for="stu_age">年龄:label>
            <input type="number" name="stu_age" required><br><br>

            <label for="stu_gender">性别:label>
            <select name="stu_gender" required>
                <option value="男">男option>
                <option value="女">女option>
            select><br><br>

            <input type="submit" value="更新信息">

        <br><p><a href="/index">取消a>p>
    div>
body>

editinfo

DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>编辑信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/edit.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #editinfo {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 100%; */
        text-align: center;
        }
    style>
head>
<body>
    <div id="editinfo">
    <h1>{{ info }}h1>
    <a href="/index">返回主页a>
    div>
body>

html>

find

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>查找信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/find.jpg') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #find {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 300px; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="find">
    <h2>查找学生信息h2>
    <form action="/findinfo" method="post">
        <label>名字：label>
        <input type="text" name="stu_name" required><br>
        
        <input type="submit" value="查找"><br>
        <br><a href="/index">取消a>
    form>
    div>
body>

findinfo

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>查找结果title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/find.jpg') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #findinfo {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 300px; */
        text-align: center;
        }
    style>
head>

<body>
    <div id="findinfo">
    <h2>查找结果h2>
    {% if error %}
    <p style="color: red;">{{ error }}p>
    {% endif %}
    {% if students %}
    <table border="1">
        <tr>
            <th>名字th>
            <th>年龄th>
            <th>性别th>
        tr>
        {% for student in students %}
        <tr>
            <td>{{ student.name }}td>
            <td>{{ student.age }}td>
            <td>{{ student.gender }}td>
        tr>
        {% endfor %}
    table>
    {% endif %}
    <br><p><a href="/index">返回主页面a>p>
body>

html>

index

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Maintitle>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/login.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #index {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        /* width: 300px; */
        text-align: center;
        }

        /* 水印的样式 */
        footer {
        position: absolute;
        bottom: 0;
        left: 200;
        right: 0;
        /* background-color: rgba(255, 255, 255, 0.8);  */
        padding: 10px 0;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        }
    style>
head>


<body>
    <div id="index">
    <h2>欢迎使用学生信息管理系统web版 v1.1h2>
    <p><a href="/add">增加个人信息a>p>
    <p><a href="/find">查找个人信息a>p>
    <p><a href="/edit">修改个人信息a>p>
    <p><a href="/dele">删除个人信息a>p>
    <p><a href="/view">显示所有信息a>p>
    div>
    <footer>
        七月初七
    footer>
body>

html>

login

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生管理信息系统title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/login.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        /* 登录表单的样式 */
        #login {
            background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            width: 300px;
            text-align: center;
        }

        /* 输入框和按钮的样式 */
        input[type="text"],
        input[type="password"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        /* 水印的样式 */
        footer {
            position: absolute;
            bottom: 0;
            left: 200;
            right: 0;
            /* background-color: rgba(255, 255, 255, 0.8); */
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            color: #ffffff;
        }
    style>
head>

<body>
    <div>
    {% if error %}
    <p style="color: red;">{{ error }}p >
    {% endif %}
    <form action="/login" method="post">
        <div id="login">
        <h2>请登录h2>
        <label for="username">用户名label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">密码label>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="登录">
        div>
    form>
    div>
    <footer>
        七月初七
    footer>
body>


html>

view

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>查看所有学生信息title>
    <style>
        /* 设置整个页面的背景 */
        body {
            background: url('/static/login.png') no-repeat center center fixed; 
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            text-align: center; /* 水平居中文本 */
        }

        /* 主页面的样式 */
        #view {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        width: 100%;
        text-align: center;
        }

        /* 表格样式 */
        .student-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .student-item {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            width: calc(8.33% - 10px); /* 布局 */
            box-sizing: border-box;
        }

        .student-item h3 {
            margin: 0;
            font-size: 16px;
        }

        .student-item p {
            margin: 5px 0 0 0;
            font-size: 14px;
        }
    style>
head>

<body>
    <div id="view">
        <h2>所有学生信息h2>
        <div class="student-list">
            {% for student in students %}
            <div class="student-item">
                <h3>{{ student.name }}h3>
                <p>年龄: {{ student.age }}p>
                <p>性别: {{ student.gender }}p>
            div>
            {% endfor %}
        div>
        <p><a href="/index">返回主页面a>p>
    div>
body>

html>