wxPython之模拟带有验证码的登录

电玩女神 2022-06-07 09:57 182阅读 0赞

带有验证码的登录，是我们在上网时经常遇到的场景。本文将利用Python的wxPython模块来模拟带有验证码的登录。其GUI界面如下：  
　　![这里写图片描述][SouthEast]  
　　首先，我们需要产生验证码图片，图片的文字从‘A-Z，a-z,0-9’中随机产生4个，这可以利用Python的Pygame模块来完成。其函数如下：

#产生图片验证码的图像，保存在本地电脑
        def generate_picture(self):
            #pygame初始化
            pygame.init()
            #设置字体和字号
            font = pygame.font.SysFont('consolas', 64)
            #产生字母及数字列表，并重组，取其前四个作为图片验证码的文字
            chr_num_lst = list(itertools.chain([chr(ord('A')+_) for _ in range(26)],\
                                           [chr(ord('a')+_) for _ in range(26)],\
                                           [str(_) for _ in range(10)]))
    
            random.shuffle(chr_num_lst)
            self.val_text = chr_num_lst[0]+chr_num_lst[1]+chr_num_lst[2]+chr_num_lst[3]
            #渲染图片，设置背景颜色和字体样式,前面的颜色是字体颜色
            ftext = font.render(self.val_text, True, (0, 0, 255),(255,0,0))
            #保存图片
            pygame.image.save(ftext, r"%s/val.png"%os.getcwd())#图片保存地址

接着，我们需要利用wxPython模块进行GUI设计，界面设计的代码如下：

class Example(wx.Frame): 
        def __init__(self, parent, title):
            #继承父类wx.Frame的初始化方法，并设置窗口大小为320*220
            super(Example, self).__init__(parent, title = title, size=(320, 220)) 
            self.InitUI() 
            self.Centre() 
            self.Show()
    
    def InitUI(self):
            #产生验证码图片
            self.generate_picture()
    
            #利用wxpython的GridBagSizer()进行页面布局
            panel = wx.Panel(self) 
            sizer = wx.GridBagSizer(10, 20) #列间隔为10，行间隔为20
    
            #添加账号字段，并加入页面布局，为第一行，第一列
            text = wx.StaticText(panel, label="账号") 
            sizer.Add(text, pos = (0, 0), flag=wx.ALL, border=5)
    
            #添加文本框字段，并加入页面布局，为第一行，第2,3列
            self.tc = wx.TextCtrl(panel) 
            sizer.Add(self.tc, pos=(0, 1), span=(1,2), flag=wx.EXPAND|wx.ALL, border=5) 
    
            #添加密码字段，并加入页面布局，为第二行，第一列
            text1 = wx.StaticText(panel, label="密码") 
            sizer.Add(text1, pos=(1,0), flag=wx.ALL, border=5) 
    
            #添加文本框字段，以星号掩盖,并加入页面布局，为第二行，第2,3列
            tc1 = wx.TextCtrl(panel, style=wx.TE_PASSWORD) 
            sizer.Add(tc1, pos=(1,1), span=(1,2), flag=wx.EXPAND|wx.ALL, border=5) 
    
            #添加验证码字段，并加入页面布局，为第三行，第一列
            text2 = wx.StaticText(panel, label = "验证码") 
            sizer.Add(text2, pos=(2, 0), flag = wx.ALL, border=5)
    
            #添加文本框字段，并加入页面布局，为第三行，第2列
            self.tc2 = wx.TextCtrl(panel)
            sizer.Add(self.tc2, pos=(2,1), flag=wx.ALL, border=5)
    
            #添加验证码图片，并加入页面布局，为第三行，第3列
            image = wx.Image(r'%s/val.png'%os.getcwd(), wx.BITMAP_TYPE_PNG).Rescale(80,25).ConvertToBitmap() #获取图片，转化为Bitmap形式
            self.bmp= wx.StaticBitmap(panel, -1, image) #转化为wx.StaticBitmap()形式
            sizer.Add(self.bmp, pos=(2,2), flag=wx.ALL, border=5)
    
            #添加登录按钮，并加入页面布局，为第四行，第2列
            btn = wx.Button(panel, -1, "登录")
            sizer.Add(btn, pos=(3,1), flag=wx.ALL, border=5)
    
            #为登录按钮绑定login_process事件
            self.Bind(wx.EVT_BUTTON, self.login_process, btn)
            #将Panmel适应GridBagSizer()放置
            panel.SetSizerAndFit(sizer)

最后，我们需要为“登录”按钮绑定事件，当验证码输入正确时，弹出消息框“登录成功！”，当验证码输入错误时，弹出消息框“登录失败！请重试！”同时，验证码的图片会改变。其函数定义如下：

#事件处理
        def login_process(self, event):
            self.input_val = self.tc2.GetValue()#获取验证码文本框的输入文字
    
            #判断验证码文本框的输入文字是否等于验证码图片上的文字（不计大小写），并弹出消息框
            if self.input_val.lower() == self.val_text.lower(): 
                wx.MessageBox("登录成功！\n欢迎您，%s!"%self.tc.GetValue(),'登录结果',wx.OK|wx.ICON_INFORMATION)
            else:
                wx.MessageBox("登录失败！请重试！",'登录结果',wx.OK|wx.ICON_INFORMATION)
                self.tc2.SetValue("") #将验证码文本框清空
                self.generate_picture() #重新产生一张验证码图片
                #获取新产生的验证码图片，转化为Bitmap形式
                image = wx.Image(r'%s/val.png'%os.getcwd(), wx.BITMAP_TYPE_PNG).Rescale(80,25).ConvertToBitmap()
                #更新GridBagSizer()的self.bmp
                self.bmp.SetBitmap(wx.BitmapFromImage(image))

当GUI设计完成后，进行测试，需要对不同的情况进行验证，图片如下：  
　　![这里写图片描述][SouthEast 1]  
　　![这里写图片描述][SouthEast 2]  
　　![这里写图片描述][SouthEast 3]  
　　![这里写图片描述][SouthEast 4]  
　　![这里写图片描述][SouthEast 5]  
　　![这里写图片描述][SouthEast 6]  
　　完整的Python代码如下：

#载入必要的模块
    import wx
    import os
    import pygame
    from pygame.locals import *
    import itertools
    import random 
    
    #创建类
    class Example(wx.Frame): 
        def __init__(self, parent, title):
            #继承父类wx.Frame的初始化方法，并设置窗口大小为320*220
            super(Example, self).__init__(parent, title = title, size=(320, 220)) 
            self.InitUI() 
            self.Centre() 
            self.Show()
    
        #产生图片验证码的图像，保存在本地电脑
        def generate_picture(self):
            #pygame初始化
            pygame.init()
            #设置字体和字号
            font = pygame.font.SysFont('consolas', 64)
            #产生字母及数字列表，并重组，取其前四个作为图片验证码的文字
            chr_num_lst = list(itertools.chain([chr(ord('A')+_) for _ in range(26)],\
                                           [chr(ord('a')+_) for _ in range(26)],\
                                           [str(_) for _ in range(10)]))
    
            random.shuffle(chr_num_lst)
            self.val_text = chr_num_lst[0]+chr_num_lst[1]+chr_num_lst[2]+chr_num_lst[3]
            #渲染图片，设置背景颜色和字体样式,前面的颜色是字体颜色
            ftext = font.render(self.val_text, True, (0, 0, 255),(255,0,0))
            #保存图片
            pygame.image.save(ftext, r"%s/val.png"%os.getcwd())#图片保存地址
    
        def InitUI(self):
            #产生验证码图片
            self.generate_picture()
    
            #利用wxpython的GridBagSizer()进行页面布局
            panel = wx.Panel(self) 
            sizer = wx.GridBagSizer(10, 20) #列间隔为10，行间隔为20
    
            #添加账号字段，并加入页面布局，为第一行，第一列
            text = wx.StaticText(panel, label="账号") 
            sizer.Add(text, pos = (0, 0), flag=wx.ALL, border=5)
    
            #添加文本框字段，并加入页面布局，为第一行，第2,3列
            self.tc = wx.TextCtrl(panel) 
            sizer.Add(self.tc, pos=(0, 1), span=(1,2), flag=wx.EXPAND|wx.ALL, border=5) 
    
            #添加密码字段，并加入页面布局，为第二行，第一列
            text1 = wx.StaticText(panel, label="密码") 
            sizer.Add(text1, pos=(1,0), flag=wx.ALL, border=5) 
    
            #添加文本框字段，以星号掩盖,并加入页面布局，为第二行，第2,3列
            tc1 = wx.TextCtrl(panel, style=wx.TE_PASSWORD) 
            sizer.Add(tc1, pos=(1,1), span=(1,2), flag=wx.EXPAND|wx.ALL, border=5) 
    
            #添加验证码字段，并加入页面布局，为第三行，第一列
            text2 = wx.StaticText(panel, label = "验证码") 
            sizer.Add(text2, pos=(2, 0), flag = wx.ALL, border=5)
    
            #添加文本框字段，并加入页面布局，为第三行，第2列
            self.tc2 = wx.TextCtrl(panel)
            sizer.Add(self.tc2, pos=(2,1), flag=wx.ALL, border=5)
    
            #添加验证码图片，并加入页面布局，为第三行，第3列
            image = wx.Image(r'%s/val.png'%os.getcwd(), wx.BITMAP_TYPE_PNG).Rescale(80,25).ConvertToBitmap() #获取图片，转化为Bitmap形式
            self.bmp= wx.StaticBitmap(panel, -1, image) #转化为wx.StaticBitmap()形式
            sizer.Add(self.bmp, pos=(2,2), flag=wx.ALL, border=5)
    
            #添加登录按钮，并加入页面布局，为第四行，第2列
            btn = wx.Button(panel, -1, "登录")
            sizer.Add(btn, pos=(3,1), flag=wx.ALL, border=5)
    
            #为登录按钮绑定login_process事件
            self.Bind(wx.EVT_BUTTON, self.login_process, btn)
            #将Panmel适应GridBagSizer()放置
            panel.SetSizerAndFit(sizer)
    
        #事件处理
        def login_process(self, event):
            self.input_val = self.tc2.GetValue()#获取验证码文本框的输入文字
    
            #判断验证码文本框的输入文字是否等于验证码图片上的文字（不计大小写），并弹出消息框
            if self.input_val.lower() == self.val_text.lower(): 
                wx.MessageBox("登录成功！\n欢迎您，%s!"%self.tc.GetValue(),'登录结果',wx.OK|wx.ICON_INFORMATION)
            else:
                wx.MessageBox("登录失败！请重试！",'登录结果',wx.OK|wx.ICON_INFORMATION)
                self.tc2.SetValue("") #将验证码文本框清空
                self.generate_picture() #重新产生一张验证码图片
                #获取新产生的验证码图片，转化为Bitmap形式
                image = wx.Image(r'%s/val.png'%os.getcwd(), wx.BITMAP_TYPE_PNG).Rescale(80,25).ConvertToBitmap()
                #更新GridBagSizer()的self.bmp
                self.bmp.SetBitmap(wx.BitmapFromImage(image))
    
    #主函数 
    def main():           
        app = wx.App() 
        Example(None, title = '图片验证GUI') 
        app.MainLoop()
    
    main()

--------------------

本次分享到此结束，欢迎大家交流与批评~~

[SouthEast]: /images/20220607/093e5ea713bb4d47bb1320130bfe4e75.png
[SouthEast 1]: /images/20220607/4169213dca454c7aabfbdc006e0cd87c.png
[SouthEast 2]: /images/20220607/a38213d27973448680c0b5510f24ccde.png
[SouthEast 3]: /images/20220607/a280354ef17e4ce2892cd0e0f62dd0a3.png
[SouthEast 4]: /images/20220607/6aa1ba358bd6407396649420e1cffa67.png
[SouthEast 5]: /images/20220607/5e924b55816543b1b2c0e6524318252f.png
[SouthEast 6]: /images/20220607/761092b05e6b46da9e0b660b92bf58c6.png