基于wxPthon所做的GUI桥梁数据监测管理项目 (二) 登陆界面开发

（一）登陆界面开发：

1.前端界面设计

很多和我一样的初学者们可能以前的开发就是在一个黑框框里进行交互，后台进行数据计算，类似于这样：

这是一年前用C++写的课设，确实现在看起来好丑。

现在让我们认识一个全新的软件：wxformbuilder，我只能说这是一个前端窗口设计软件，相关介绍自己去搜，我就不复制粘贴了，软件是在github上下载的

传送门：GitHub - wxFormBuilder/wxFormBuilder: A wxWidgets GUI Builder

这里不会系统的对此软件进行讲解，说白了，我目前会用的功能也不多，只讲到该项目实现所用到的功能（你不认识的组件你就新建一个空白项目点着玩儿嘛，看是啥效果，总能试出来）。

我假设你已经装好了此软件，首先，打开该软件后我们可以看到这样的界面：

上面是组件，左边是项目树，中间是你的设计面板（你的窗口设计就在这里），右边是该窗口的属性

先点击左上角File-New Project，或者ctrl+N：

随后我们可以在项目树看到多了一个这个东西：

项目命名有所不同不要生搬硬套，我们单击该项目，在中间上方的组件中选择Forms，然后在下方组件栏选择Dialog：

好的他生成了这样一个东西：

截至目前，我们的第一个窗口的画板就搞好了，你可真棒，后面我们需要对该会话框进行布局设计。

使用到组件中的Layout-wxBoxSizer（第一个），布局我会统一使用该组件，其他组件更方便但是限制也变多了，比如有一个像田字格的组件（第四个），他就是在属性面板输入几行几列，限制死了，而使用这个就可以进行嵌套设计，先插入一个wxBoxSizer代表整个框架，然后在他下面在放两个wxBoxSizer，这就是两行，然后再在这两行的下面添加wxBoxSizer，在属性中调整为纵向排列，我就可以设计他的列数，这样可实现每行列数不一致。

具体实现：

此处放spacer占位符是为了让大家都看得明白布局，比如我点击bSizer6，右边上半个框边框就会变红，表示这里是bSizer6，点击bSizer7下半就会变红，点击bSizer1整个框都会变红（注意在新建第二个行bSizer7是需要先点击一下父级bSizer1再新建，不然他会新建到第一个行bSizer6的下面）

在给行bSizer6下面放两列时我们会发现会变成这样：

他又把第一行分成了两行，那这样的话怎么办呢，只能横向排列很丑。

我们先点击bSizer6，然后把视线转移到右边属性框，会发现wxBoxSizer下有一个orient选项

这个选项就是控制横纵排列的，我们把这个选项改成wxHORIZONTAL就会发现bSizer6变成纵行排列了

此时我们就可以摆上文本框（wxStasicText）和输入框（wxTextCtrl）了，这两个组件在界面中间组件框的Common下：

比如这里是一个登录窗口，我们需要账号及其输入框，密码及其输入框，先删除原来的bSizer8、bSizer10，就在第一行bSizer6下新建一个wxStasicText和一个wxTextCtrl，第二行bSizer7下同理（记得把bSizer7也改成纵行排列），可以得到这样一个界面：

我们需要让第一行的MyLabel显示为账号，第二行的MyLabel显示为密码，就点击该wxStasicText（我这里点击m_staticText1），在右侧属性框会发现有一个名叫label的属性，里面的值是MyLabel，刚好和界面中的值对应嘛，我们就修改该项（我们也可以直接在中间设计面板中点击MyLabel，右侧属性栏也会跳转过去），把该项修改为账号，改完记得敲回车！改完记得敲回车！改完记得敲回车！不然改不成功，密码同理

此时静态文本框名字都改过来了，可以看到窗口右侧还有大面积空白没有使用，好丑啊，就选中m_textCtrl1，在最上方属性栏选择顶格（一个小方框带一个向右向上的箭头），输入框就顶到最右边了：

然后客户端输完账号密码人傻了，欸不是，你让我输入也不让我点登录啊，我输完搁这傻站着啊，所以我们需要什么。一个确认按钮，这个确认按钮肯定不能放在一二行啊，那样多丑，新建一个第三行，在bSizer1下面再新建一行（和上面步骤一致，记得改为纵向排列）：

第三行建好了，在这个里面放一系列按钮，我们在界面中间上面组件框中点击Common-wxButton（就那个长得就很像一个按钮的，写着ok的那个）：

可以看到就多了个按钮，改名方法和上面静态文本框改名方法一致（这里说叫改名是错的，因为像这样的组件他有两个属性，一个是name一个是label，label是显示在前端的标签，name才是他的实际名字，我们在后端进行调用时用的是name而不是label，在这里改的都是label，可以叫改标签），双击MyButton，在右侧属性栏中修改label为登录（敲回车），注册和退出同理：

在右侧有空白的时候就把三个按钮全部顶格就行（上方属性栏那个按钮（一个小方框带一个向右向上的箭头））。

至此，我们登陆界面前端部分设计完成，你真棒。到这应该wxfb的基本使用也掌握的差不多了，现在你去设计一个qq吧（不是，哈哈）

2.后端逻辑链接

目前我们的前端界面是设计好了，但是这也只是一个框架，相当于我们只是画了一幅图，没有给他添加具体的逻辑，现在就是跑也跑不动，就只能看看。

使用该前端设计工具的目的就是为了简化我们的后端代码书写工作，实际生成窗口还是代码实现，该软件是给我们提供一个良好的可视化工具及可以直接生成代码，在该篇博客中，我们采取python语言进行设计，目前设计好了窗口，接下来的工作就是生成代码并集成进我们的pycharm中：

首先我们点击整个项目树的最顶层，可以看到右侧属性栏有一个code_generation，默认为C++，我们点击前面的小加号展开下属列表，将C++取消，换成Python，这时就把我们的生成代码换成了python。

点击左上角File-Generate Code（或者直接单击F8），就会在当前根目录下生成一份py代码文件，当然如果你想在别的目录下生成，也可以在属性框中进行修改

生成的py文件默认昵称为noname，因为并没有给其设定name，我们可以在属性框中进行修改。注意：此时属性框中name是项目名，不是生成的py文件的名字，我们需要修改file栏，例如此处，我将file栏改为CSDNtext01，在我的根目录下就生成了一份CSDNtext01.py

打开此py文件，我们就可以看到生成的代码（其实未生成之前在wxfb软件中也可以看到代码，中间组件下面Editor-Python），生成的这份py文件一定不能修改哈。咱们写其他的代码就在其他的py文件中写，生成的这份在我们调试的过程中会不断覆盖生成，写在这里面啥用都没有：

这里有一个坏习惯，我们这个框架的名字叫MyDialog1，在后续进行项目管理的时候可读性非常差，我们需要把他改过来，回到wxfb软件，点击项目树中的MyDialog1，在右侧属性栏中修改name为LoginFrame，并重新点击生成代码，可以看到类名已经变成了：

我们做了这么久，总得先把这个界面展示出来看看吧，要不然一点成就感都没有，还怎么做，你说是吧。

回到pycharm，我们在同级目录下新建一个py文件，命名为myframe.py，我们将在此模块中书写对前端设计框架的继承，设计一些具体实现方法，前端生成的代码不是直接就能用的，那个只能做一些窗口的展示，我们还需要进行逻辑链接，所以需要继承。

首先我们新建一个类：Login，对前端界面的登录窗口进行继承同时重写他的__init__方法：

class Login(CSDNtext01.LoginFrame):
    def __init__(self):
        CSDNtext01.LoginFrame.__init__(self, parent=None)

对，没错，最基本的，只需要展示界面的继承就是这样，只有三行代码（导包你自己导，我没算哈）。

然后再新建一个模块：myapp，继承自wx.app，在该模块中我们将书写整个程序的流程，通常只需要重写其中的OnInit方法以及OnExit方法，OnInit中我们写程序打开时执行的代码，OnExit中写程序关闭时执行的代码。目前我们的程序较为简单，只需要把登录窗口展示出来：

class MyApp(wx.App):
    def OnInit(self):
        # 对刚才写的继承的实例化
        login = myframe.Login()
        # 把该窗口展示出来
        login.Show()
        return True

    def OnExit(self, event):
        # 关闭窗口
        self.Destroy()
        # 继续执行其他可能与该事件相关的操作
        event.Skip()

新建main.py，在该模块中完成myapp的调用，main只需要这几行，后续也都不会再修改了：

if __name__ == '__main__':
    app = MyApp()
    app.MainLoop()

大功告成，我们在main函数中直接运行，可以看到窗口成功被展示出来了。

此时我们可以在账号密码栏输入账号密码，但是我们发现点击下面三个按钮都没用，没有任何反应。当然了，你啥都没写让人家给你啥反应，当人家傻妞啊。

别急奥，这不就要写接下来的东西了嘛。我们回到wxfb，点击刚才设计好的界面中的登录按钮，仔细观察右边的属性栏，会发现，我们刚才用到的属性都是Properties下的，旁边还有个Events，点进去后第一个是OnButtonClick，大概翻译一下不就是按钮点击嘛，那就是在这写逻辑呗。此时我们需要实现的是登录，所以在这里写上evt_login（这种事件尽量都以evt_开头，保证我们看一眼就知道这是个事件），然后要写该事件的具体实现方法，这就是为什么我们要把设计好的框架继承一遍了，继承了之后我们就可以增加这种事件。

点击F8更新一下框架代码，回到pycharm中的myframe模块，在Login类下重写evt_login方法，既然是登录，那我们最起码得验证一下账号密码吧。

3.密码验证

先写最简单也是最不利于维护的，把账号密码直接写在后台代码中，进行验证后提示账号密码是否正确（m_textCtrl1建议在wxfb中修改为m_username,密码同理，此处犯个懒）：

    def evt_login(self, event ):
        '''
        获取用户在输入框输入的内容，self.m_textCtrl1是指向某一个输入框
        GetValue()是获取到输入框的值
        strip()是删除掉首尾可能会产生的空格，如果没有就不删除
        '''
        username = self.m_textCtrl1.GetValue().strip()
        password = self.m_textCtrl2.GetValue().strip()
        if self.validate_credentials(username, password):
            '''
            使用wx.MessageBox方法可以展示一个简易弹窗
            第一个参数是内容，第二个参数是标题
            '''
            wx.MessageBox("账号密码正确","提示信息")
        else:
            wx.MessageBox("账号密码错误","提示信息")
            '''
            如果密码错误就会执行这个return一直返回让他输入
            密码正确就会正常去执行关闭登录窗口
            '''
            return
        # 关闭登陆窗口
        self.Close()
        event.Skip()

此处我们新定义了一个账号密码验证方法，方便后续做账号密码验证方法的升级：

    def validate_credentials(self,username,password):
        if username == 'admin' and password == '123456'
            return True
        else:
            return False

回到main中执行一下，当我们输入1和1时，会提示账号密码错误，输入我们设定好的账号密码时，会提示账号密码正确。

此时我们的密码输入还是以明文的形式，不符合保密原则，但此处暂不做修改，隐藏及展示密码功能作为后续拓展。

隐藏及展示密码，密码存储方式、注册功能：http://t.csdnimg.cn/9Oy2W

至此登录功能也已经完全实现，注册和退出的功能暂时不做实现，我们先保证程序一条线能跑下去，再做分支。