一、登录界面
流程图:
1 . 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
height: 100%;
}
.login {
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #282c34;
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
color: #61dafb;
}
.container {
height: 30px;
width: 250px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
input {
width: 100%;
height: 100%;
position: relative;
outline: none;
border: none;
box-sizing: border-box;
padding-left: 5px;
background-color: #282c34;
color: #61dafb;
caret-color: #61dafb;
}
input::placeholder {
color: #61dafb;
}
span {
position: absolute;
content: "";
display: block;
background-color: #61dafb;
transition: transform .1s ease-in-out;
}
.top,
.bottom {
left: 0px;
right: 0px;
height: 2px;
}
.left,
.right {
top: 0px;
bottom: 0px;
width: 2px;
transform: scaleY(0);
}
.top {
top: 0px;
transform: scaleX(0);
transform-origin: left center;
transition-delay: .2s;
}
.left {
left: 0px;
transform-origin: bottom center;
transition-delay: .3s;
}
.bottom {
bottom: 0px;
}
.right {
right: 0px;
transform-origin: top center;
transition-delay: .1s;
}
input:focus ~ .right {
transform: scaleY(1);
transform-origin: bottom center;
}
input:focus ~ .left {
transform: scaleY(1);
transform-origin: top center;
}
input:focus ~ .top {
transform: scaleY(1);
transform-origin: right center;
}
.container1 {
height: 30px;
width: 250px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn {
position: absolute;
left: 50%;
top: 54%;
transform: translate(-50%, -50%);
text-align: center;
padding: 5px;
width: 52%;
margin-top: 40px;
background-color: #61dafb;
color: #fff;
}
</style>
</head>
<body>
<div class="login">
<div class="header">登录</div>
<div class="container">
<input type="text" placeholder="请输入用户名">
<span class="left"></span>
<span class="right"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>
<div class="container1">
<input type="password" placeholder="请输入密码">
<span class="left"></span>
<span class="right"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>
<div class="btn">登录</div>
</div>
</body>
</html>
2 . 图片演示
二、计算器功能实现
# 定义主窗口布局，确定行数
def window_main():
layout = [
[sg.Text('计算结果：', font=("微软雅黑", 10)), sg.Button('历史记录', font=("微软雅黑", 10), pad=(10, 1))],
[sg.Text('0', key='-express-', justification='right', size=(30, 1), font=("微软雅黑", 10), background_color='#fff', text_color='#000')],
[sg.Text('0', key='-result-', justification='right', size=(30, 1), font=("微软雅黑", 10), background_color='#fff', text_color='#000')],
[sg.Button('清空', size=(6, 2)), sg.Button('删除', size=(6, 2)), sg.Button('x²', size=(6, 2)), sg.Button('÷', size=(6, 2))],
[sg.Button('7', size=(6, 2)), sg.Button('8', size=(6, 2)), sg.Button('9', size=(6, 2)), sg.Button('x', size=(6, 2))],
[sg.Button('4', size=(6, 2)), sg.Button('5', size=(6, 2)), sg.Button('6', size=(6, 2)), sg.Button('-', size=(6, 2))],
[sg.Button('1', size=(6, 2)), sg.Button('2', size=(6, 2)), sg.Button('3', size=(6, 2)), sg.Button('+', size=(6, 2))],
[sg.Button('+/-', size=(6, 2)), sg.Button('0', size=(6, 2)), sg.Button('.', size=(6, 2)), sg.Button('=', size=(6, 2))],
]
# 创建窗口
return sg.Window('简易计算器@月亮', layout, finalize=True, default_element_size=(50, 1))
# 定义历史记录窗口布局
def createwindow_history(history_list=None):
history_text = ''
if history_list:
history_text = '\n'.join(['='.join(i) for i in history_list])
layout = [
[sg.Text('历史记录：', font=("微软雅黑", 10))],
[sg.Multiline(history_text, justification='right', disabled=True, autoscroll=True, size=(30, 10), font=("微软雅黑", 10), background_color='#fff', text_color='#000')]
]
return sg.Window('历史记录', layout, finalize=True)
def get_result(eval_str):
global result
eval_str = eval_str.replace('^', '**').replace('x', '*').replace('÷', '/')
try:
result = eval(eval_str)
except Exception as e:
result = '0'
window_main['-result-'].update(result)
return str(result)
window_main = window_main()
window_sub = None
history_list = []
express = '0'
result = '0'
flag = 0
while True:
window, event, value = sg.read_all_windows()
if window == window_main and event in (None, sg.WIN_CLOSED):
if window_sub is not None:
window_sub.close()
break
elif event == '历史记录':
if not window_sub:
window_sub = createwindow_history(history_list)
else:
window_sub.close()
window_sub = None
elif window == window_sub and event is None:
window_sub.close()
window_sub = None
elif event == '=':
express1 = express
express = get_result(express)
history_list.append([express1, express])
flag = 1
elif event == '清空':
express = '0'
result = '0'
window_main['-express-'].update(express)
window_main['-result-'].update(result)
elif event == '删除':
if len(express.lstrip('-').strip('(').strip(')')) == 1:
express = '0'
elif express[-1] == ')':
express = express.lstrip('-').strip('(').strip(')')
else:
express = express[:-1]
window_main['-express-'].update(express)
elif event == 'x²':
express = f'({express}) ^ 2'
window_main['-express-'].update(express)
elif event == '+/-':
express = f'-({express})'
get_result(express)
else:
if flag == 1 and event in '0123456789':
express = '0'
flag = 0
if express == '0':
express = event
else:
express = express + event
window_main['-express-'].update(express)
window.close()
三、数据库连接
主要思路是：
step1：连接数据库，创建游标。
step2：确定跑数脚本，执行跑数代码。
step3：对得到的执行结果进行数据处理。
# 导入库
import datetime //时间处理包
import pymysql //连接数据库包
import numpy as py //数据处理包
import pandas as pd //数据处理包
# 连接数据库
connection = pymysql.connect(
host='localhost',
user='root',
password='123456789',
database='single',
port=3306,
charset='utf8mb4' #字符编码
use_unicode=None, #是否使用unicode编码
connect_timeout=10000 #连接超时时间
)
# 创建游标对象
cursor = connection.cursor()
# 具体curd操作
except pymysql.Error as e:
print(f'操作数据库失败{e}')
finally:
connection.close()
# 执行 SQL 查询
sql_query = "SELECT * FROM menus"
cursor.execute(sql_query)
first = cursor.fetchone() //从缓冲区获取一条数据
print(first)
cursor.scroll(0, mode='absolute') //移动游标到结果集的第一行
three = cursor.fetchmany(3) //指定获取几条数据
for row in three: //遍历结果
print(row)
results = cursor.fetchall() //获取所有结果
for row in results: //遍历结果
print(row)
# 更新数据
update_query = "UPDATE menus SET title = %s WHERE id = %s"
affected_rows = cursor.execute(update_query, ('张三', '123456'))
if affected_rows > 0:
print(f"更新成功，影响了 {affected_rows} 行数据")
else:
print("更新失败，没有影响任何行数据")
connection.commit() //提交更改
# 删除数据
delete_query = "DELETE FROM menus WHERE id = %s"
affected_rows = cursor.execute(delete_query, ('13',))
if affected_rows > 0:
print(f"删除成功，影响了 {affected_rows} 行数据")
else:
print("删除失败，没有影响任何行数据")
connection.commit() //提交更改
# 事务处理
try:
connection.begin()
# curd操作
connection.commit()
except pymysql.Error as e:
connection.rollback()
print(f"失败: {e}")
finally:
# 关闭游标和连接
cursor.close()
connection.close()