unigui 登陆界面

• 新建项目，因为我的Main页面做了其他的东西，所以我在这里新建一个form

File -> New -> From(Unigui) -> 登录窗体

• 添加组件：FDConnection，FDQuery，DataSource，Unipanel和几个uniedit，一个unibutton

首先连接数据库：FDConnection1 -> Connection Editor

Database：数据库名称

User_Name：用户名

PassWord：用户名的密码

Server：服务器，其中127.0.0.1默认为本地

点击Connection1的属性active，当active显示为true数据库连接成功

然后，FDQuery1 -> Connection -> FDConnection1

最后，DataSource -> DataSet -> FDQuery1

• 为输入账号的Uniedit1设置FieldLabel属性为用户名：，同理将输入密码的UniEdit2设为密码：

• 添加验证码，可见文章：unigui 图形验证码-CSDN博客
• 为按钮UniButton1添加登录事件,其中这段代码中为密码做了MD5加密处理

MD5加密可看文章：MD5加密-CSDN博客

procedure TUniLoginForm1.UniButton1Click(Sender: TObject);
beginFDQuery1.Close;tryFDQuery1.SQL.Text:='select * from logon where id=:aid and passwords=:apasswords';FDQuery1.Params.ParamByName('aid').Value:=uniedit1.Text;FDQuery1.Params.ParamByName('apasswords').Value:=THashMD5.GetHashString(uniedit2.Text);FDQuery1.open;finallyend;if uniedit3.text <> captchastring thenbeginshowmessage('验证码错误');uniimage1click(sender);endelse if FDQuery1.RecordCount<1 thenbeginshowmessage('账号或密码错误！');end elsemessagebox(Handle,'登陆成功！','成功',MB_OK);end;

我的数据库登录表的结构是在wldy数据库中创建logon表

use wldy
create table logon
(
id int primary key,
passwords varchar(255)
)

• 将form设为和浏览器大小相同，并且Unipanel永远在浏览器的中心

procedure TUniLoginForm1.UniLoginFormScreenResize(Sender: TObject; AWidth,AHeight: Integer);
beginuniloginform1.Height:=AHeight;uniloginform1.Width:=AWidth; //设form和浏览器一个大小unipanel1.Left:=(AWidth - unipanel1.width ) div 2;unipanel1.Top:=((AHeight - unipanel1.Height) div 2)+12; //unipanel在浏览器的中间
end;

• 将unipanel1设为圆角

在serverModule中CustomCSS中输入变圆角的代码，其中paneladd是名称，点击确定

.paneladd {border-radius: 10px; /* 设置内容区域的圆角半径为10px */
}

回到页面中，UniPanel1 -> LayoutConfig -> Cls -> 添加paneladd

• 添加unipanel。点击unipanel1，添加一个unipanel，这样能够使新添加的unipanel是unipanel1的子类