登录界面设计之三:界面搭建

Posted punishercn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了登录界面设计之三:界面搭建相关的知识,希望对你有一定的参考价值。

  登录界面的搭建还是比较简单的,虽然有点简陋,但能用的姑且当做好的吧,如下图:

技术分享图片

这里使用的是DevExpress控件,其中值得一看的就是使用LayoutControl控件来进行TextEdit控件的布局。技术分享图片对于一般几个TextEdit并排的布局而言,使用这个控件的效果还是不错的。


  既然涉及到了系统的登录,那么自然少不了数据库的连接等操作了。这里,我自己做的时候也很乱,争取能表述的清楚一些。

首先,如果要访问数据库,那没库不行哈。那么,就赶着手头的东西,赶紧弄个库出来吧。

数据库创建与表设计

  具体流程就是:创立一个Access2007格式的数据库文件,这里名称为:BoardWages.accdb。别忘了给它创建个密码,不过具体过程就略了,如果有和我一样的小白,没关系,咱稍微搜一下就OK了。然后再创建一个名为tbUser的表,并建立字段,如下图所示:

技术分享图片

  其中,ID字段为自动编号;Name字段为文本格式,保存用户名;Password为文本字段,保存密码的MD5散列值。为啥是MD5格式?因为这样别人即使打开了你的数据库也无法看到真实的密码!如果还有人问为啥不能反推,那我也就不能解释了……

MD5函数

  参考代码:

 1     /// <summary>
 2     ///  MD5操作类
 3     /// </summary>
 4     public class MD5Hashing
 5     {
 6         /// <summary>
 7         ///  MD5加密算法
 8         /// </summary>
 9         /// <param name="input">要加密的字符串</param>
10         /// <param name="encode">编码类型</param>
11         /// <returns></returns>
12         public static string MD5Encrypt(string input, Encoding encode)
13         {
14             MD5 md5 = new MD5CryptoServiceProvider();
15             byte[] t = md5.ComputeHash(encode.GetBytes(input));
16             StringBuilder sb = new StringBuilder(32);
17             for (int i = 0; i < t.Length; i++)
18             {
19                 sb.Append(t[i].ToString("x").PadLeft(2, 0));
20             }
21             return sb.ToString();
22         }
23     }

  好了,说完数据库,继续说数据库访问的事。最早,自己学习的时候,学了ODBC,还有OLEDB,再之后的ado.net,直接写SQL代码,对于很多像我这样的小白而言,是很容易出错的,所以,各位大大们,就弄出了很多的ORM组件,解决了小白们的问题。这里,我使用的是秋大的CYQ.Data,因为这个接触的多,用惯了,也确实很好用。还是老规矩,先把代码贴上再慢慢说:

 1             // 使用自定义的方法,利用Validate组件进行验证
 2             // 但要注意的是,需要把控件的tag属性进行设置
 3             if (MyValidator.IsEmpty(txtName,txtPassword) == false)
 4             {
 5                 return;
 6             }
 7 
 8             // 验证没问题之后,获取控件内的用户名和密码
 9             string name = txtName.Text.Trim();          // 用户名
10             string password = txtPassword.Text.Trim();  // 密码
11 
12             // 在数据库中进行查询
13             using (MAction action = new MAction(tbUser, MyAPPConfig.LocalConn))
14             {
15                 if (!action.Exists("Name = ‘" + name + ""))        //  是否存在用户名?
16                 {
17                     CShowMsg.ShowWarning(string.Format("用户名‘{0}‘不存在",name));
18                     return;
19                 }
20                 else
21                 {
22                     // 对密码进行MD5加密,再进行判断
23                     string md5Password = MD5Hashing.MD5Encrypt(password, Encoding.UTF8);
24                     string where = string.Format("Name = ‘{0}‘ and Password = ‘{1}‘",name,md5Password);
25                     if (!action.Exists(where))
26                     {
27                         CShowMsg.ShowWarning("用户名或者密码不正确!");
28                         return;
29                     }
30                     else
31                     {
32                         // 这一句,就可以关闭当前的页面了。因为在Program中进行了处理。
33                         this.DialogResult = System.Windows.Forms.DialogResult.OK;
34                     }
35                 }
36             }

  注意了,包含在using中的代码就是使用CYQ.Data的具体代码了,这里先查看是否存在用户名,再查看是否存在用户名和密码都存在的记录。代码是下午写的,现在感觉,这里重复了,直接进行第二组判断应该就可以了。其中,把判断条件添加进去,这里我使用的是string.Format方法来组成了字符串来当做查询条件。具体的CYQ.Data怎么用,我想没有比秋大的博客更好的地方了,大家可以自行搜索。

  需要更多说明的有三个地方:

1、MyAPPConfig.LocalConn 是自己定义的Access的连接字符串,这里是:Provider=Microsoft.ACE.OLEDB.12.0;Data Source=.DataBoardWages.accdb;Persist Security Info=True;Jet OLEDB:Database Password=boardwages!2019
2、CShowMsg.ShowWarning 是自定义的一个输出方法,其实就是对于 MessageBox.Show方法的一个封装而已。
3、MyValidator.IsEmpty也是自定义的一个方法,目的是判断指定的控件是否内容为空,如果是,会有相应的提示,例如:

 

技术分享图片


这里涉及到了FluentValidation验证组件的使用,回头需要专门的用一章来说明。

 小结:好了,下午大概就做了这些内容,最后就是在数据库中手动添加一条记录,然后自己在登录界面中,使用正确的用户名和密码进行登录,看是否能够登录成功以验证我们数据访问组件使用的是否正确。写的比较仓促,有问题的地方,大家多多批评指正。

 




以上是关于登录界面设计之三:界面搭建的主要内容,如果未能解决你的问题,请参考以下文章

登录界面的搭建

Docker下Prometheus和Grafana三部曲之三:自定义监控项开发和配置

UI登录界面的搭建

百思不得姐第3天:登录注册界面搭建

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)

微端游戏启动器LAUNCHER的制作MFC版之三(界面)