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博客

Delphi 复制代码

procedure TUniLoginForm1.UniButton1Click(Sender: TObject);
begin
  FDQuery1.Close;
  try
  FDQuery1.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;
  finally
  end;
  if uniedit3.text <> captchastring then
  begin
    showmessage('验证码错误');
    uniimage1click(sender);
  end
  else if FDQuery1.RecordCount<1 then
  begin
    showmessage('账号或密码错误！');
  end else
    messagebox(Handle,'登陆成功！','成功',MB_OK);

end;

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

sql 复制代码

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

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

Delphi 复制代码

procedure TUniLoginForm1.UniLoginFormScreenResize(Sender: TObject; AWidth,
  AHeight: Integer);
begin
  uniloginform1.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是名称，点击确定

css 复制代码

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

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

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