flask-办公设备管理系统

 app.py

 app.py的代码，要修改连接数据库的名称和密码，改成自己的

from flask import Flask, render_template, request, redirect,flash
import pymysql

app = Flask(__name__)
app.secret_key = 'ndbafhjbnvfldjwe'
# 建立与mysql连接
connect = pymysql.connect(host="localhost", user="root", password="123456", db="tmp", charset="utf8")
# c创建游标A
cursor = connect.cursor()


@app.route('/')
def index():
    return render_template('login.html')


@app.route('/login', methods=['post'])
def login():
    username = request.form.get('username')  # 从表单中获取用户名
    password = request.form.get('password')  # 从表单中获取密码
    # 构建一个 SQL 查询语句，用于查询用户名和密码匹配的用户
    sql = "select id from sys_user where username= '" + username + "' and password= '" + password + "'"
    # 执行 SQL 查询
    cursor.execute(sql)
    # 获取查询结果
    response = cursor.fetchall()
    # 提交事务，确保 SQL 查询被保存到数据库
    connect.commit()
    if response:
        return redirect('/guanli')
    else:
        return render_template('login.html', msg='登录失败')

@app.route('/forget_password', methods=['GET', 'POST'])
def forget_password():
    return render_template('set_password.html')

@app.route('/set_password', methods=['POST'])
def set_password():
    # 从表单中获取数据
    username = request.form['username']
    tel = request.form['tel']
    password = request.form['password']
    # 编写 SQL 更新语句
    sql = "UPDATE sys_user SET password=%s WHERE username=%s AND tel=%s"
    cursor.execute(sql, (password, username, tel))
    connect.commit()
    return redirect('/')








@app.route('/guanli', methods=['GET', "POST"], endpoint='n1')
def guanli():
    # 编写 SQL 查询语句，获取所有数据
    # sql = "SELECT * FROM information"
    sql="select information.id,information.name,information.brand,information.number,\
    information.Status,information.dept,sys_user.username,sys_user.tel,sys_user.identify\
    from information,sys_user where information.userId=sys_user.id"
    cursor.execute(sql)
    # 获取所有数据
    datas = cursor.fetchall()
    # 将数据传递给模板
    return render_template('guanli.html', datas=datas)


@app.route('/register')
def register():
    return render_template('register.html')


@app.route('/get_register', methods=['post'])
def get_register():
    id=request.form.get('id')
    username = request.form.get('username')
    password = request.form.get('password')
    identify=request.form.get('identify')
    tel=request.form.get('tel')
    # 使用参数化查询
    sql = "INSERT INTO sys_user(id,username, password,identify,tel) VALUES (%s,%s, %s,%s,%s)"
    try:
        cursor.execute(sql, (id, username, password,identify,tel))
        connect.commit()
        return render_template('login.html', msg='注册成功')
    except pymysql.Error as e:
        connect.rollback()
        return render_template('register.html', msg='注册失败：' + str(e))



@app.route('/create')
def create():
    cursor.execute("SELECT id, username FROM sys_user")
    users = cursor.fetchall()
    return render_template('create.html', users=users)



@app.route('/get_create',methods=['post'])
def get_create():
    id=request.form.get('id')
    name=request.form.get('name')
    brand=request.form.get('brand')
    number=request.form.get('number')
    Status=request.form.get('Status')
    dept = request.form.get('dept')
    userId=request.form.get('userId')
    sql="INSERT INTO information (id,name,brand,number,Status,dept,userId) VALUES(%s,%s,%s,%s,%s,%s,%s)"
    cursor.execute(sql, (id, name,brand,number,Status,dept,userId))
    connect.commit()
    return render_template('create.html',msg='提交成功')



@app.route('/edit/<int:id>', methods=['GET'])
def edit(id):
    # 编写 SQL 查询语句，获取要编辑的数据
    sql = "SELECT * FROM information WHERE id = %s"
    cursor.execute(sql, (id,))
    data = cursor.fetchone()    # 获取要编辑的数据
    # 查询sys_user表中的所有用户
    cursor.execute("SELECT id, username FROM sys_user")
    users = cursor.fetchall()
    # 将数据传递给模板
    return render_template('edit.html', data=data,users=users)
@app.route('/update', methods=['POST'])
def update():
    # 从表单中获取数据
    id = request.form.get('id')
    name = request.form.get('name')
    brand = request.form.get('brand')
    number = request.form.get('number')
    Status = request.form.get('Status')
    dept = request.form.get('dept')
    userId = request.form.get('userId')
    # 编写 SQL 更新语句
    sql = "UPDATE information SET name=%s, brand=%s, number=%s ,Status=%s,dept=%s,userId=%s WHERE id=%s"
    cursor.execute(sql, (name, brand, number, Status,dept,userId,id))
    connect.commit()
    #return redirect(url_for('guanli'))
    return redirect('/guanli')


@app.route('/get_delete/<int:id>', methods=['POST'])
def get_delete(id):
    sql = "DELETE FROM information WHERE id = %s"
    try:
        cursor.execute(sql, (id,))
        connect.commit()
        flash('删除成功！')
    except pymysql.Error as e:
        flash('删除失败：' + str(e))
    return redirect('/guanli')


@app.route('/search', methods=['GET'])
def search():
    search_query = request.args.get('search', '')  # 从查询参数中获取搜索关键词
    if search_query:
        # 使用参数化查询来防止SQL注入
        sql = """
        SELECT information.id, information.name, information.brand, information.number, \
        information.Status,information.dept, sys_user.username, sys_user.tel, sys_user.identify 
        FROM information 
        INNER JOIN sys_user ON information.userId = sys_user.id 
        WHERE information.name LIKE %s OR information.brand LIKE %s OR information.number \
        LIKE %s OR information.Status LIKE %s OR information.dept LIKE %s 
        OR sys_user.username LIKE %s OR sys_user.tel LIKE %s OR sys_user.identify LIKE %s
        """
        cursor.execute(sql, (
            '%' + search_query + '%', '%' + search_query + '%', '%' + search_query + '%', '%' + search_query + '%',
            '%' + search_query + '%', '%' + search_query + '%', '%' + search_query + '%','%' + search_query + '%'
        ))
        datas = cursor.fetchall()
        return render_template('guanli.html', datas=datas, search_query=search_query)
    else:
        return redirect('/guanli')

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

数据库创表

这是数据库创表的，并且设定电话号码唯一且必须为11位，其它的详见代码

create database tmp;
use tmp;
drop table sys_user;
CREATE TABLE sys_user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(20) UNIQUE NOT NULL,
    password VARCHAR(20) NOT NULL,
    identify ENUM('normal', 'admin') NOT NULL DEFAULT 'normal',
    tel VARCHAR(11) UNIQUE NOT NULL
);
insert into sys_user(id, username, password,identify,tel) VALUES (1,'Wu','123','admin','15338888757');
insert into sys_user(username, password,tel) VALUES ('yan','123','11111111111');
insert into sys_user(username, password,tel) VALUES ('ooo','123','12345678901');

DELIMITER $$
CREATE TRIGGER check_phone_length BEFORE INSERT ON sys_user
FOR EACH ROW
BEGIN
    IF LENGTH(NEW.tel) != 11 THEN
        SIGNAL SQLSTATE '45000'
        SET MESSAGE_TEXT = '电话号码必须是11位';
    END IF;
END$$

DELIMITER ;

DELIMITER $$

CREATE TRIGGER check_phone_length_update BEFORE UPDATE ON sys_user
FOR EACH ROW
BEGIN
    IF LENGTH(NEW.tel) != 11 THEN
        SIGNAL SQLSTATE '45000'
        SET MESSAGE_TEXT = '电话号码必须是11位';
    END IF;
END$$

DELIMITER ;





drop table information;
# 设备信息
create table information
(
    id     int primary key auto_increment,
    # equId int  comment '设备编号',
    name   varchar(20) not null comment '设备名称',#打印机、电脑、投影仪
    brand  varchar(20) comment '品牌',#sonny
    number int NOT NULL CHECK (number >= 0) COMMENT '数量',
    # warrantyDate datetime comment '保修期截止日期',#2024-1-1
   Status ENUM('使用中', '维修中', '空闲','报废')#默认空闲
       NOT NULL DEFAULT '空闲' comment '当前状态',
    dept ENUM('IT部', '人事部', '财务部','销售部','总裁办公室','牛马部')#默认空闲
       NOT NULL DEFAULT '牛马部' comment '当前状态',
     # 负责人的名字和负责人的电话
#     username varchar(20),
    userId int comment '负责该设备的用户的ID',
        FOREIGN KEY (userId) REFERENCES sys_user(id) -- 添加外键约束
    #FOREIGN KEY (userId) REFERENCES purchase_info(userId)

);



insert into information( name, brand, number,Status,dept,userId) values ('打印机','sonny',20,'使用中','人事部',1),
                                                        ('电脑','dell',50,'维修中','IT部',2),
                                                        ('电脑','Thinkbook',20,'报废','牛马部',3);


select information.id,information.name,information.brand,information.number,information.Status,sys_user.username,sys_user.tel,sys_user.identify from information,sys_user where information.userId=sys_user.id


UPDATE sys_user SET password='123' WHERE username='123' AND tel='12312312312'

login.html 登录

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>登录界面</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.1/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        body {
            background: url('https://via.placeholder.com/1920x1080') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            width: 100%;
            max-width: 400px;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .login-container h1 {
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        .form-control {
            border: none;
            border-radius: 30px;
            padding: 15px 20px;
            font-size: 16px;
            background-color: #f2f2f2;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .form-control:focus {
            background-color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        .btn-login {
            background-color: #007bff;
            border: none;
            border-radius: 30px;
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn-login:hover {
            background-color: #0056b3;
        }
        .fa {
            color: #007bff;
            margin-right: 10px;
        }
        .alert {
            margin-top: 15px;
        }
        /* 链接样式 */
        .link-text {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .link-text:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        /* 注册和忘记密码链接的容器 */
        .extra-links {
            margin-top: 20px;
            font-size: 16px;
            color: #666;
        }
        /* 链接之间的分隔符 */
        .separator {
            margin: 0 10px;
            color: #ccc;
        }
    </style>
</head>

<body>
    <div class="login-container">
        <h1>欢迎登录</h1>
        <form action="/login" method="post">
            <div class="form-group">
                <i class="fas fa-user fa-lg"></i>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required />
            </div>
            <div class="form-group">
                <i class="fas fa-lock fa-lg"></i>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-login" value="登录" />
            </div>
            {% if msg %}
            <div class="alert alert-danger" role="alert">
                {{ msg }}
            </div>
            {% endif %}
        </form>
        <div class="extra-links">
            还没有账号去<span class="link-text" data-toggle="tooltip" data-placement="top" title="注册新账号"><a href="/register">注册</a></span><span class="separator">|</span><span class="link-text" data-toggle="tooltip" data-placement="top" title="找回密码"><a href="/forget_password">忘记密码</a></span>
        </div>
    </div>

    <!-- 引入Bootstrap JS和jQuery -->
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

</html>

register.html 注册账户

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.1/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        body {
            background: url('https://via.placeholder.com/1920x1080') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .register-container {
            width: 100%;
            max-width: 400px;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .register-container h2 {
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            color: #666;
        }
        .form-group label .fa {
            margin-right: 10px;
        }
        .form-control {
            width: 100%; /* 确保输入框宽度与下拉菜单一致 */
            padding: 9px 16px; /* 调整内边距 */
            background-color: #f2f2f2; /* 设置背景颜色 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 30px; /* 圆角边框 */
            font-size: 16px; /* 调整字体大小 */
            color: #333; /* 调整字体颜色 */
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            {#border: none;#}
            {#border-radius: 30px;#}
            {#padding: 15px 20px;#}
            {#font-size: 16px;#}
            {#background-color: #f2f2f2;#}
            {#box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);#}
        }



        .form-control:focus {
            border-color: #007bff; /* 聚焦时边框颜色 */
            outline: none; /* 移除聚焦时的轮廓 */
            {#background-color: #fff;#}
            {#box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);#}
        }



        .btn-register {
            background-color: #007bff;
            border: none;
            border-radius: 30px;
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn-register:hover {
            background-color: #0056b3;
        }
        .alert {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2><i class="fas fa-user-plus"></i> 注册</h2>
        <form action="/get_register" method="post">
            <div class="form-group">
                <label for="username"><i class="fas fa-user"></i> 用户名:</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="password"><i class="fas fa-lock"></i> 密码:</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
                <label for="identify"><i class="fas fa-id-badge"></i> 身份:</label>
                <select class="form-control" id="identify" name="identify" required>
                    <option value="normal">普通</option>
                    <option value="admin">管理者</option>
                </select>
            </div>
            <div class="form-group">
                <label for="tel"><i class="fas fa-phone"></i> 电话号码:</label>
                <input type="text" class="form-control" id="tel" name="tel" placeholder="请输入电话号码" required>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-register" value="注册">
            </div>
            {% if msg %}
            <div class="alert alert-danger" role="alert">
                {{ msg }}
            </div>
            {% endif %}
        </form>
    </div>

    <!-- 引入Bootstrap JS和jQuery -->
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 set_password.html 重置密码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>重置密码</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.1/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        body {
            background: url('https://via.placeholder.com/1920x1080') no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .reset-container {
            width: 100%;
            max-width: 400px;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .reset-container h2 {
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        .form-control {
            border: none;
            border-radius: 30px;
            padding: 15px 20px;
            font-size: 16px;
            background-color: #f2f2f2;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .form-control:focus {
            background-color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        .btn-reset {
            background-color: #797979;
            border: none;
            border-radius: 30px;
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn-reset:hover {
            background-color: #2c2c2c;
        }
        .fa {
            color: #797878;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="reset-container">
        <h2>重置密码</h2>
        <form method="post" action="/set_password">
            <div class="form-group">
                <i class="fas fa-user fa-lg"></i>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required />
            </div>
            <div class="form-group">
                <i class="fas fa-mobile-alt fa-lg"></i>
                <input type="text" class="form-control" id="tel" name="tel" placeholder="请输入手机号" required />
            </div>
            <div class="form-group">
                <i class="fas fa-lock fa-lg"></i>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入新密码" required />
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-reset">提交</button>
            </div>
        </form>
    </div>

    <!-- 引入Bootstrap JS和jQuery -->
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 guanli.html 主页面展示信息

<!DOCTYPE html>
<html lang="zh-CN">
{% include 'menu.html' %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理页面</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin-top: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            margin: 0 auto;
            width: 80%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .table-striped tbody tr:hover {
            background-color: #eaeaea;
        }
        .search-form {
            margin: 0 auto;
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }
        .search-form input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .search-form input[type="submit"] {
            padding: 10px 10px;
            font-size: 16px;
            border-radius: 50px;
            border: none;
            background-color: #7c7d7e;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .search-form input[type="submit"]:hover {
            background-color: #1e1e1e;
        }
        /* 美化操作按钮 */
        .action-buttons {
            text-align: center;
        }
        .action-buttons button {
            margin: 1px;
            padding: 10px 10px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .action-buttons button.edit {
            background-color: #545353;
            color: white;
        }
        .action-buttons button.edit:hover {
            background-color: #797979;
        }
        .action-buttons button.delete {
            background-color: #5b5b5b;
            color: white;
        }
        .action-buttons button.delete:hover {
            background-color: #7e7d7d;
        }
        /* 修改添加按钮的样式 */
        .add-button {
            background-color: #808080; /* 灰色背景 */
            color: white; /* 白色文字 */
            border-radius: 5px; /* 圆角边框 */
            padding: 10px 20px; /* 内边距 */
            font-size: 16px; /* 字体大小 */
            border: none; /* 无边框 */
            cursor: pointer; /* 手型光标 */
            transition: background-color 0.3s; /* 背景色过渡效果 */
        }
        .add-button:hover {
            background-color: #696969; /* 悬停时的灰色背景 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search-form">
            <!-- 搜索框 -->
            <form action="/search" method="get" class="form-inline">
                <div class="form-group mr-2">
                    <input type="text" id="search" name="search" class="form-control" placeholder="请输入搜索内容">
                </div>
                <div class="form-group">
                    <input type="submit" value="搜索" class="btn btn-primary">
                </div>
            </form>
        </div>
        <div class="info-table">
            <h1>信息展示</h1>
            <table class="table table-striped table-bordered">
                <thead class="thead-dark">
                    <tr>
                        <th><i class="fas fa-tag"></i> 名称</th>
                        <th><i class="fas fa-copyright"></i> 品牌</th>
                        <th><i class="fas fa-box"></i> 数量</th>
                        <th><i class="fas fa-circle"></i> 状态</th>
                        <th><i class="fas fa-building"></i> 部门</th>
                        <th><i class="fas fa-user"></i> 用户名</th>
                        <th><i class="fas fa-phone"></i> 电话</th>
                        <th><i class="fas fa-id-badge"></i> 身份</th>
                        <th><i class="fas fa-cogs"></i> 操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for data in datas %}
                    <tr>
                        <td>{{ data[1] }}</td>
                        <td>{{ data[2] }}</td>
                        <td>{{ data[3] }}</td>
                        <td>{{ data[4] }}</td>
                        <td>{{ data[5] }}</td>
                        <td>{{ data[6] }}</td>
                        <td>{{ data[7] }}</td>
                        <td>{{ data[8] }}</td>
                        <td class="action-buttons">
                            <button class="edit" onclick="location.href='/edit/{{ data[0] }}'"><i class="fas fa-edit"></i> 编辑</button>
                            <form action="{{ url_for('get_delete', id=data[0]) }}" method="post" onsubmit="return confirm('确定要删除这条记录吗？')">
                                <input type="hidden" name="id" value="{{ data[0] }}">
                                <button type="submit" class="delete"><i class="fas fa-trash"></i> 删除</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <tr>
                <td colspan="5" style="text-align: right;">
                    <button onclick="location.href='/create'" class="add-button">添加</button>
                </td>
            </tr>
        </div>
    </div>
    <!-- 引入Bootstrap JS和jQuery -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
    </script>
</body>
</html>

 menu.html 导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /* 添加一些基本的样式 */
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>

<!-- 菜单栏 -->
<div class="navbar">

    <a href="/guanli">首页</a>

</div>
<div class="content">
    {% block content %}
    {% endblock %}
</div>
</body>
</html>

 create.html 创新信息设备的网页

<!DOCTYPE html>
<html lang="en">
{% include 'menu.html' %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        body {
            background: url('https://via.placeholder.com/1920x1080') no-repeat center center fixed;
            font-family: 'Arial', sans-serif;
            background-color: #cccccc;
            margin: 0;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }
        .form-control {
            border: none;
            border-radius: 30px;
            padding: 15px 20px;
            font-size: 16px;
            background-color: #f2f2f2;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
           .form-control:focus {
            background-color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        .form-group {
            width: 100%;
            margin-bottom: 20px;
            {#display: flex;#}
            align-items: center;
            {#justify-content: center;#}
        }
        label {
            font-weight: bold;
            margin-bottom: 10px;
            color: #555;
        }
        input[type="text"], input[type="number"], select {
            width: calc(100% - 20px);
            padding: 15px;
            border-radius: 30px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }
        input[type="text"]:focus, input[type="number"]:focus, select:focus {
            border-color: #b4b5b6;
        }
        input[type="submit"] {
            padding: 15px 20px;
            background-color: #6c6c6c;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        input[type="submit"]:hover {
            background-color: #3b3b3b;
        }
        .icon {
            margin-right: 10px;
        }
        .msg {
            color: #343434;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2><i class="fa-solid fa-plus icon"></i>创建信息</h2>
        <form action="/get_create" method="post">
            <div class="form-group">
                <label for="name">名称: <i class="fa-solid fa-user icon"></i></label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="brand">品牌: <i class="fa-solid fa-copyright icon"></i></label>
                <input type="text" class="form-control" id="brand" name="brand" required>
            </div>
            <div class="form-group">
                <label for="number">数量: <i class="fa-solid fa-hashtag icon"></i></label>
                <input type="number" class="form-control" id="number" name="number" required>
            </div>
            <div class="form-group">
                <label for="Status">状态: <i class="fa-solid fa-circle-info icon"></i></label>
                <select class="form-control" id="Status" name="Status" required>
                    <option value="使用中">使用中</option>
                    <option value="维修中">维修中</option>
                    <option value="空闲" selected>空闲</option>
                    <option value="报废">报废</option>
                </select>
            </div>
            <div class="form-group">
                <label for="dept">部门: <i class="fa-solid fa-building icon"></i></label>
                <select class="form-control" class="form-control" id="dept" name="dept" required>
                    <option value="IT部">IT部</option>
                    <option value="人事部">人事部</option>
                    <option value="财务部">财务部</option>
                    <option value="销售部">销售部</option>
                    <option value="总裁办公室">总裁办公室</option>
                    <option value="牛马部" selected>牛马部</option>
                </select>
            </div>
            <div class="form-group">
                <label for="userId">负责人ID: <i class="fa-solid fa-user icon"></i></label>
                <select class="form-control" id="userId" name="userId" required>
                    {% for user in users %}
                    <option value="{{ user[0] }}">{{ user[1] }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <input type="submit" value="确定">
            </div>
            {% if msg %}
            <p class="msg">{{ msg }}</p>
            {% endif %}
        </form>
    </div>
    <script src="https://kit.fontawesome.com/your-fontawesome-kit-code.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 edit.html 修改信息的网页

<!DOCTYPE html>
<html lang="en">
{% include 'menu.html' %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        body {
            background: url('https://via.placeholder.com/1920x1080') no-repeat center center fixed;
            font-family: 'Arial', sans-serif;
            background-color: #cccccc;
            margin: 0;
            {#padding: 20px;#}
        }

        .container {
            max-width: 600px;
            margin: 20px auto; /* Increased margin */
            background-color: #fff;
            padding: 30px; /* Increased padding */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px; /* Increased margin */
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Increased gap */
            align-items: center;
        }
        .form-control {
            border: none;
            border-radius: 30px;
            padding: 15px 20px;
            font-size: 16px;
            background-color: #f2f2f2;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
           .form-control:focus {
            background-color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        label {
            font-weight: bold;
            margin-bottom: 10px; /* Increased margin */
            color: #555; /* Darker color for better readability */
        }
        input[type="text"], select {
            width: calc(100% - 20px); /* Reduced width to account for padding */
            padding: 15px; /* Increased padding */
            border-radius: 30px; /* 设置圆角 */
            border: 1px solid #ddd;
            box-sizing: border-box;
            transition: border-color 0.3s; /* Transition for hover effect */
        }
        input[type="text"]:focus, select:focus {
            border-color: #b5b6b7; /* Highlight color on focus */
        }
        input[type="submit"] {
            padding: 15px 20px;
            background-color: #6d6d6d;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px; /* Increased font size */
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%; /* Full width button */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added box shadow */
        }
        input[type="submit"]:hover {
            background-color: #3d3d3d;
        }
        .icon {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fa-solid fa-pen icon"></i>修改信息</h1>
        <form method="post" action="{{ url_for('update') }}">
            <input type="hidden" class="form-control" name="id" value="{{ data[0] }}">
            <label for="name">名称: <i class="fa-solid fa-user icon"></i></label>
            <input type="text" class="form-control" id="name" name="name" value="{{ data[1] }}">
            <label for="brand">品牌: <i class="fa-solid fa-copyright icon"></i></label>
            <input type="text" class="form-control" id="brand" name="brand" value="{{ data[2] }}">
            <label for="number">数量: <i class="fa-solid fa-hashtag icon"></i></label>
            <input type="text" class="form-control" id="number" name="number" value="{{ data[3] }}">

            <label for="status">状态: <i class="fa-solid fa-circle-info icon"></i></label>
            <select class="form-control" class="form-control"id="status" name="Status">
                <option value="使用中" {% if data.Status == '使用中' %}selected{% endif %}>使用中</option>
                <option value="维修中" {% if data.Status == '维修中' %}selected{% endif %}>维修中</option>
                <option value="空闲" {% if data.Status == '空闲' %}selected{% endif %}>空闲</option>
                <option value="报废" {% if data.Status == '报废' %}selected{% endif %}>报废</option>
            </select>

            <label for="dept">部门: <i class="fa-solid fa-building icon"></i></label>
            <select class="form-control" class="form-control" id="dept" name="dept">
                <option value="IT部" {% if data.dept == 'IT部' %}selected{% endif %}>IT部</option>
                <option value="人事部" {% if data.dept == '人事部' %}selected{% endif %}>人事部</option>
                <option value="财务部" {% if data.dept == '财务部' %}selected{% endif %}>财务部</option>
                <option value="销售部" {% if data.dept == '销售部' %}selected{% endif %}>销售部</option>
                <option value="总裁办公室" {% if data.dept == '总裁办公室' %}selected{% endif %}>总裁办公室</option>
                <option value="牛马部" {% if data.dept == '牛马部' %}selected{% endif %}>牛马部</option>
            </select>

            <label for="userId">负责人ID: <i class="fa-solid fa-user icon"></i></label>
            <select class="form-control" id="userId" name="userId">
                {% for user in users %}
                <option value="{{ user[0] }}" {% if data.userId == user[0] %}selected{% endif %}>{{ user[1] }}</option>
                {% endfor %}
            </select>

            <input  type="submit" value="修改">
        </form>
    </div>
    <script src="https://kit.fontawesome.com/your-fontawesome-kit-code.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 结果展示

改

删

增

查