添加用户页面(Flask+前端+MySQL整合)

  1. 首先导入Flask库和pymysql库。Flask用于创建Web应用程序,pymysql用于连接和操作MySQL数据库。
python 复制代码
from flask import Flask, render_template, request
import pymysql
  1. 创建一个Flask应用实例。__name__参数告诉Flask使用当前模块作为应用的名称。
python 复制代码
app = Flask(__name__)
  1. 定义了一个路由/add/user,并且支持GET和POST方法。GET方法用于显示表单,POST方法用于处理表单提交的数据。
python 复制代码
@app.route("/add/user", methods=['GET', 'POST'])
def add_user():
    if request.method == 'GET':
        return render_template("add_user.html")
  1. 从提交的表单中获取用户输入的用户名、密码和手机号。
python 复制代码
 username = request.form.get('user')
 password = request.form.get('pwd')
 mobile = request.form.get('mobile')
  1. 连接到MySQL数据库。pymysql.connect方法使用指定的参数(主机、端口、用户名、密码、字符集和数据库名)来建立连接。cursor用于执行SQL查询
python 复制代码
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='1234567', charset='utf8', db='unicom')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
  1. 定义并执行SQL插入语句,将表单提交的数据插入到admin表中。
python 复制代码
sql = 'insert into admin(username,password,mobile) values(%s,%s,%s)'
cursor.execute(sql, [username, password, mobile])
  1. 提交事务,确保数据被永久保存到数据库中,关闭数据库连接。
python 复制代码
conn.commit()
cursor.close()
conn.close()

8.返回响应

python 复制代码
return '添加成功'
  1. 启动Flask开发服务器
python 复制代码
if __name__ == '__main__':
    app.run()

add_user.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/add/user">
    <input type="text" name="user" placeholder="用户名">
    <input type="text" name="pwd" placeholder="密码">
    <input type="text" name="mobile" placeholder="手机号">
    <input type="submit" value="提 交">
</form>

</body>
</html>

html页面显示:
点击提交后添加成功

在命令提示符中查询表中新添加数据

相关推荐
静谧空间几秒前
Linux自动备份Mysql数据
linux·运维·mysql
霖霖总总1 分钟前
[小技巧40]MySQL中的MVCC:多版本并发控制的深度解析
数据库·mysql
德彪稳坐倒骑驴1 分钟前
DataX将数据在MySQL和HDFS之间互相迁移
数据库·mysql·hdfs
IT教程资源2 分钟前
N-159基于springboot,vue,AI协同过滤算法旅游推荐系统
mysql·vue·前后端分离·springboot旅游推荐·协同过滤算法旅游推荐·ai旅游推荐
玉梅小洋5 分钟前
Chrome设置链接自动跳转新标签页而不是覆盖
前端·chrome
EndingCoder11 分钟前
反射和元数据:高级装饰器用法
linux·运维·前端·ubuntu·typescript
Marshmallowc15 分钟前
React性能优化:useState初始值为什么要用箭头函数?深度解析Lazy Initialization与Fiber机制
前端·react.js·性能优化·前端框架·react hooks
Coder_Boy_18 分钟前
基于SpringAI的在线考试系统-试卷管理模块完整优化方案
前端·人工智能·spring boot·架构·领域驱动
摇滚侠23 分钟前
Node.js 零基础教程,Node.js 和 NPM 的安装与使用
前端·npm·node.js