Smobiler实现美观登录界面——C# 或.NET Smobiler实例开发手机app（二）

article/2025/10/27 3:23:25

一、本文目标

二、准备工作

1、数据库

2、材料

三、界面布局

1、设置控件的属性值

（1）输入框

（2）图片属性

（3） HandElectricity的标题的label属性

（4）登录按钮

（5）版权申明

（6）记住密码

2、事件代码

（1）登录按钮

（2）使用验证码登录

（3）其它的按钮

一、本文目标

初级版，请看我的上一篇博文自行补脑哦，这里就不在赘述了。

二、准备工作

1、数据库

本文采用的是SqlSever2008的数据库，暂时的数据表设计如下：

表名为：HE_User 用于保存用户的账号密码等信息，其它的表现在还用不上，暂时不讲。

下表为登录的账号密码，这里会涉及到一个知识点，就是如何设置sqlsever的id自增。

这里用到了identity关键字：indentity(a,b)，a b均为正整数，a表示开始数，b表示步长，indentity(1,1)就代表从1开始，每次增加1 。下面是我创建id字段的代码。

id int IDENTITY(1,1) not null CONSTRAINT pk_id PRIMARY KEY

2、材料

一张背景图片，一张背景透明的LOGO。

在ElectricityAPP下新建窗体，命名为frmLogin。

把背景图命名为bg，LOGO的图片命名为LOGO（命名不要为中文都行）放到Image这个文件夹里面。

三、界面布局

1、设置控件的属性值

再次基础操作返回上一篇博客视频讲解。这里主要讲一些细节和美观的问题。

先往界面中拖入一个panel设置dock属性为fill。

（1）输入框

输入框的name设置为txtUerName和ytxtPassword（这是账号和密码的输入框）。

（2）图片属性

（3） HandElectricity的标题的label属性

（4）登录按钮

（5）版权申明

（6）记住密码

这里只能帮到这里了。

2、事件代码

（1）登录按钮

我在这里写一个函数IsConnectDB来返回登录状态的。

登录按钮的Press事件：

a. 需要判断是否勾选保存密码的checkbox。

b. 连接数据库（我使用的是Sqlsever数据库，这里需要打开数据库远程连接的权限，把这个问题解决了在执行代码测试！）

 /// <summary>/// 验证用户名和密码/// </summary>/// <param name="userName"></param>/// <param name="passWord"></param>private int IsConnetDB(string userName, string passWord){try{SqlConnection conn = new SqlConnection("server=服务器的ip地址;database=HandElectricity; uid=sa;pwd=123");conn.Open();string sqlcmd = "select count(*) from [HE_User] where username= '" + userName + "' and password='" + passWord + "'";SqlCommand cmd = new SqlCommand();cmd.Connection = conn;cmd.CommandText = sqlcmd;int result = Convert.ToInt32(cmd.ExecuteScalar());conn.Close();if (result == 1){//登录成功MessageBox.Show("登录成功!");//frm_Main fm = new frm_Main();//Show(fm);}else{MessageBox.Show("账号或密码错误！");return 0;}}catch (Exception ex){Toast(ex.Message);}return 1;}private void btnLogon_Click(object sender, EventArgs e){try{string userName = txtUserName.Text.Trim();string passWord = txtPassword.Text.Trim();if (string.IsNullOrEmpty(userName) || string.IsNullOrEmpty(passWord)){throw new Exception("用户名或密码不能为空！");}int result = IsConnetDB(userName, passWord);LoadClientData(MobileServer.ServerID + "user", userName);//登录成功才记住密码if (result == 1 && chkRememberPwd.Checked == true){LoadClientData(MobileServer.ServerID + "pwd", passWord);}}catch (Exception ex){Toast(ex.Message);}}

（2）使用验证码登录

如果需要真正的验证码，需要另行购买短信的API接口。

这里把发送了的手机号码保存在了一个记事本里面，按理来说这是需要加密处理的，我这里没有加密。

 private void btnVerify_Click(object sender, EventArgs e){try{string userID = txtUserName.Text.Trim();if (userID.Length != 11){MessageBox.Show("请输入正确的手机号码！");}else{FileStream fs;if (File.Exists("./logMobile.txt")){fs = new FileStream("./logMobile.txt", FileMode.Open);}else{fs = new FileStream("./logMobile.txt", FileMode.CreateNew);}StreamWriter sw = new StreamWriter(fs);sw.WriteLine(userID);fs.Close();MessageBox.Show("验证码发送成功，注意接收！");}}