python~Flask的简单使用
<!--前端HTML页面-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Flask对表单数据的简单处理</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<div class="login-wrapper">
<div class="login-content">
<h1>
欢迎回家
</h1>
<div class="form-wrapper">
<div class="form-content">
<form action="http://127.0.0.1:5000/login/" method="post">
<div class="inputs">
<input class="username errHightlight" type="text" placeholder="手机号码/账号" name="usernmae"/>
<input class="pwd errHightlight" type="password" placeholder="密码" name="password"/>
</div>
<button class="login-btn" d="submit" value="登录">
登录
</button>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>/*前端css样式*/
*,
html,
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, span, input, button, div, p{
color: #444;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: linear-gradient(150deg, white, whitesmoke);
}
.login-wrapper {
display: flex;
justify-content: center;
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
height: 100%;
/* border: 1px solid red; */
}
.login-content {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
h1 {
margin-bottom: 20px;
width: 100%;
}
.inputs{
display: flex;
flex-flow:column nowrap;
}
.inputs input {
border: 1px solid #ccc;
border-radius: 2px;
width: 100%;
height: 45px;
margin: 8px 0;
box-sizing: border-box;
padding-left: 10px;
font-size: 16px;
background: #ddd;
transition: all .2s ease;
}
input:hover {
background: #eee;
/* box-shadow: 0 0 8px lightblue; */
/* outline: none; */
}
input:focus {
background: #fff;
box-shadow: 0 0 8px lightblue;
/* outline: none; */
}
.veriCode-wrapper {
display: none;
}
.veriCode-content {
display: flex;
flex: row nowrap;
justify-content: space-between;
}
.veriCode-content input {
border-radius: 2px 0 0 2px;
border-right: none;
}
.veriCode-content div {
background: #777;
width: 60px;
height: 45px;
margin: 8px 0;
line-height: 45px;
padding: 0 15px;
text-align: center;
border-radius: 0 2px 2px 0;
color: white;
font-weight: bold;
letter-spacing: 3px;
}
.login-btn {
border: 1px solid #ccc;
border-radius: 3px;
height: 45px;
width: 100%;
margin: 15px auto;
font-size: 16px;
font-weight: bold;
color: white;
letter-spacing: 10px;
background: rgb(14, 175, 90);
cursor: pointer;
transition: .2s ease;
}
.login-btn:hover{
background: rgb(13, 163, 83);
}
.login-btn:active{
background: rgb(14, 175, 90);
}
.errMsg{
display: none;
font-size: 12px;
border: 1px solid crimson;
border-radius: 2px;
height: 25px;
line-height:25px;
padding-left: 10px;
margin: 5px 0;
background: pink;
color: crimson;
}
/* .errHightlight{
border: 1px solid crimson!important;
} */
/* .active{
display: block;
} */
.otherActions {
font-size: 13px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding-bottom: 170px;
}通过127.0.0.1:5000/login/访问到页面
输入想要插入的数据
# 引入Flask
from flask import Flask, request
# 引入pymysql操作数据库
import pymysql
app = Flask(__name__)
@app.route('/login/', methods=['GET', 'POST'])
def getinfo():
# 获取表单传输过来的数据,nmae是用户名字段，pwd是密码字段
name = request.values.get("usernmae") # 打印请求的表单数据
pwd = request.values.get('password')# 数据库连接
conn = pymysql.connect(
host='127.0.0.1',
port=3306,
user='root',
password='123456',
database='day48', # 创建的数据库为day48
charset='utf8'
)
# sql执行语句，创建的表名为userinfo
sql = 'insert into userinfo(username,password) values(%s,%s)'
# 生成游标对象
cursor = conn.cursor()
# 执行sql语句
cursor.execute(sql, (name, pwd))
# 提交插入的数据
conn.commit()
return '插入数据成功'
# 执行
app.run()但页面显示插入数据成功，代表数据插入到数据库当中
通过navicat查看插入的数据
版权申明
本文系作者 @Tis-FYM 原创发布在Tis-FYI站点。未经许可，禁止转载。
暂无评论数据