本章将会创建一个如下图样式的登录界面：
下面让我们一步步实现它！
1 构建登录窗口的布局
首先，设计整个窗口的布局：
from tkinter import ttk, Tk
from tkinter import StringVar, BooleanVar
from tkinter import Canvas
from PIL import ImageTk, Image
class HelloWindow(Tk):
def __init__(self, hello_image='images/leimu.jpg'):
super().__init__()
self.title('欢迎进入计算机视觉的世界')
self.geometry('400x270') # 默认窗口大小
self.maxsize(400, 300) # 限制窗口大小
self._hello_image(hello_image)
self._set_variable()
self.create_widgets()
self._layout()
# 设定鼠标光标进入密码的输入框，显示密码，离开之后显示为 '*'
self.entry_usr_pwd.bind(
'<Enter>', lambda e: self.entry_usr_pwd.config(show=''))
self.entry_usr_pwd.bind(
'<Leave>', lambda e: self.entry_usr_pwd.config(show='*'))
def _hello_image(self, hello_image):
'''欢迎界面的图片'''
self.I = Image.open(hello_image).resize((380, 100))
self.canvas = Canvas(height=100, width=380)
self.image_file = ImageTk.PhotoImage(self.I)
self.canvas.create_image(20, 0, anchor='nw', image=self.image_file)
def _set_variable(self):
'''设置变量'''
self.var_usr_name = StringVar() # 用户名变量
self.var_usr_pwd = StringVar() # 密码变量
def create_widgets(self):
'''创建主要的小部件'''
self.frame_usr = ttk.Frame() # 用户信息框架
self.frame_act = ttk.Frame() # 用户行为框架
self.label_usr_name = ttk.Label(self.frame_usr, text='用户名: ')
self.entry_usr_name = ttk.Entry(
self.frame_usr, textvariable=self.var_usr_name, width=25)
self.label_usr_pwd = ttk.Label(self.frame_usr, text='密码: ')
self.entry_usr_pwd = ttk.Entry(
self.frame_usr, textvariable=self.var_usr_pwd, show='*', width=25)
self.button_login = ttk.Button(
self.frame_act, text='登录', command=self.usr_login)
self.button_login = ttk.Button(
self.frame_act, text='登录', command=self.usr_login)
self.button_sign_up = ttk.Button(
self.frame_act, text='注册', command=self.usr_sign_up)
def _layout(self):
self.canvas.grid(row=0, column=0, sticky='we')
self.frame_usr.grid(row=1, column=0, sticky='ns',
padx=5, pady=5, ipady=2)
self.frame_act.grid(row=2, column=0, sticky='ns', padx=5, pady=5)
self.label_usr_name.grid(row=0, column=0, sticky='we')
self.entry_usr_name.grid(row=0, column=1, sticky='we')
self.label_usr_pwd.grid(row=1, column=0, sticky='we')
self.entry_usr_pwd.grid(row=1, column=1, sticky='we')
self.button_login.grid(row=0, column=0, sticky='we')
self.button_sign_up.grid(row=0, column=1, sticky='we')
def usr_login(self):
'''用户登录的行为'''
pass
def usr_sign_up(self):
'''用户注册的行为'''
pass
此代码实现了当鼠标的光标进入到密码的输入框时，显示密码，离开后密码显示为 '*'。
2 设置用户的注册行为
我们需要定义如下函数：
class HelloWindow(Tk):
...
def test_user_name(self, user_name):
if user_name:
if user_name[0].isalpha() and len(user_name) > 2:
return True
def test_user_pwd(self, user_pwd):
if user_pwd:
if user_pwd[0].isalpha() and len(user_pwd) > 6:
return True
def write_user_info(self, new_user_info, users_info):
users_info.update(new_user_info)
with open('users_info.json', 'w', encoding='utf-8') as fp:
json.dump(users_info, fp)
def load_users_info(self):
try:
with open('users_info.json', 'r', encoding='utf-8') as fp:
users_info = json.load(fp)
except FileNotFoundError:
users_info = {}
return users_info
def usr_sign_up(self):
'''用户注册的行为'''
user_name = self.entry_usr_name.get()
user_pwd = self.entry_usr_pwd.get()
users_info = self.load_users_info()
cond = user_name not in users_info
cond1 = self.test_user_name(user_name) and self.test_user_pwd(user_pwd)
if cond and cond1:
self.write_user_info(users_info, {user_name:user_pwd})
messagebox.showinfo('', "注册成功！")
else:
messagebox.showerror('注册失败！', "请检查您的输入")
定义 usr_sign_up 函数用于用户的注册行为。这里仅仅写了一个简单的注册机制：
- 用户名和密码的第一个字符必须为“字母”；
- 用户名的长度不得少于 2 字符。
- 密码的长度不得少于 6 字符。
- 如果注册成功，则将用户的名称与密码保存进
'users_info.json'文件。
您可以通过修改 test_user_name 和 test_user_pwd 函数，设置更加复杂的注册机制。
3 设置用户的登录行为
登录行为比较容易设定：
class HelloWindow(Tk):
...
def usr_login(self):
'''用户登录的行为'''
user_name = self.entry_usr_name.get()
user_pwd = self.entry_usr_pwd.get()
users_info = self.load_users_info()
user_info = {user_name:user_pwd}
cond = set(user_info.items()) < set(users_info.items())
if cond:
messagebox.showinfo('', "登录成功！")
else:
messagebox.showerror('登录失败！', "请检查您的输入")
最终的效果图：
完整的代码：
