- 新建项目,因为我的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的子类