案例：员工管理

思远学堂

已于 2024-01-20 12:38:45 修改

阅读量30

点赞数

分类专栏： Python的web开发文章标签：前端 javascript 开发语言

于 2024-01-20 12:35:15 首次发布

原文链接：https://www.bilibili.com/video/BV1rT4y1v7uQ?p=31&vd_source=1c26e8e4e8a3fc016f75ff7d1d7c35cf

版权

Python的web开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Python的Flask框架结合HTML构建一个基础的Web应用，包括创建用户输入表单、MySQL数据库操作（建表、添加和显示数据），以及前后端交互的过程。

摘要由CSDN通过智能技术生成

前言：本人通过学习武沛齐老师在b站的“最新Python的web开发全家桶（django+前端+数据库）”

记录自己学习历程并分享给大家。30 案例：Flask+前端+MySQL整合_哔哩哔哩_bilibili

一. 创建用于输入和显示的HTML网页

1. 输入的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>添加用户</h1>
    <form method="post" action="/add/user">  <!-- 表单标签 提交方式：post， 提交到/add/user -->
        <input type="text" name="user" placeholder="用户名">  <!-- 输入框   placeholder=提示语-->
        <input type="text" name="pwd" placeholder="密码">
        <input type="text" name="mobile" placeholder="手机号">
        <input type="submit" value="提 交">
    </form>
</body>
</html>

2. 显示的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">  <!-- 导入css -->
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>
        <table class="table table-bordered">
            <thead>  <!-- 表头标签 -->
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>密码</th>
                <th>手机号</th>
            </tr>
            </thead>

            <tbody>  <!-- 内容标签 -->
            {% for item in data_list %}  <!-- 遍历列表 -->
            <tr>
                <td>{{ item.id }}</td> <!-- 把列表id项渲染到标签 -->
                <td>{{ item.username }}</td>
                <td>{{ item.password }}</td>
                <td>{{ item.mobile }}</td>
            </tr>
            {% endfor %}  <!-- 循环结束 -->
            </tbody>
        </table>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>  <!-- 导入jquery -->
    <script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>  <!-- 导入js -->
</body>
</html>

二. 在python代码中（建表，添加数据，显示数据）

from flask import Flask, render_template, request
import pymysql

# 一. 建表
# 1.打开数据库连接,参数1:主机名或IP；参数2：用户名；参数3：密码；参数4：数据库名
db = pymysql.connect(host="localhost", user="root", password="123456", db="unicom")

# 2.使用 cursor() 方法创建一个游标对象 cursor相当于查询工具吧
cursor = db.cursor()

# 3.使用 execute() 方法执行 SQL，如果表存在则删除
cursor.execute("DROP TABLE IF EXISTS admin")  # 如果有admin的表存在则删除以前的

# 4.使用预处理语句创建表
sql = """
 create table admin(
    id int not null auto_increment primary key,
    username varchar(16) not null,
    password varchar(64) not null,
    mobile char(11) not null
) default charset=utf8;
 	"""

# 5.执行SQL语句
cursor.execute(sql)  # 游标执行（我设计的表）

# 6.关闭数据库连接
db.close()


# 二. 添加数据
app = Flask(__name__)

@app.route("/add/user", methods=["GET", "POST"])
def add_user():
    if request.method == "GET":  # 如果提交方式==GET
        return render_template("add_user.html")  # 打开网站
    # 反之
    username = request.form.get("user")  # 获取输入框内容
    password = request.form.get("pwd")
    mobile = request.form.get("mobile")

    # 1.连接MySQL
    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', db='unicom')  # 定义数据库

    # 2.创建游标
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  

    # 3.获取数据
    sql = "insert into admin(username,password,mobile) values(%s,%s,%s)"   # 添加在admin表格（数据）

    # 4.游标执行
    cursor.execute(sql, [username, password, mobile])   
    conn.commit()  # 回滚

    # 5.关闭
    cursor.close()  # 关闭游标
    conn.close()  # 关闭数据库

    return "添加成功"


# 三. 显示数据
@app.route("/show/user")
def show_user():
    # 1.连接MySQL 
    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', db='unicom')

    # 2.创建游标
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

    # 3.获取数据
    sql = "select * from admin"  # 游标执行（查找 admin 表格中的数据）

    # 5.游标执行
    cursor.execute(sql)  
    data_list = cursor.fetchall()  # 游标执行 返回多个元组，即返回多个记录(rows)，如果没有结果则返回 ()

    # 6.关闭
    cursor.close()  # 关闭游标
    conn.close()  # 关闭数据库

    print(data_list)  # 打印


    # 1.找到show_user.html的文件，读取所有的内容。
    # 2.找到内容中 `特殊的占位符` ，将数据替换。
    # 3.将替换完成的字符串返回给用户的浏览器。
    return render_template('show_user.html',data_list=data_list)


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