怎么使用easy_ui搭建后台ui--初试牛刀（上）登陆页面的搭建

我不是女神ヾ 2022-07-13 09:10 173阅读 0赞

1.效果如下：（虽然感觉有点丑，但是后台主要是看功能，不看颜值吧）

![Image 1][]![Center][]

2.引入必要的文件

**//引入 jQuery核心库，这里采用的是 2.0**

**<script type="text/javascript" src="easyui/jquery.min.js"></script>**

**//引入 jQuery EasyUI核心库，这里采用的是 1.3.6**

**<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>**

**//引入 EasyUI中文提示信息**

**<script type="text/javascript" src="easyui/locale/easyui-lang-zh\_CN.js"></script>**

**//引入自己开发的 JS文件**

**<script type="text/javascript" src="js/index.js"></script>**

**//引入 EasyUI核心 UI文件 CSS**

**<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />**

**//引入 EasyUI图标文件**

**<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />**

**//引入自己的js文件和css文件**

**<script type="text/javascript" src="js/login.js" ></script>**

**<link rel="stylesheet" type="text/css" href="css/login.css" />**

4.这里使用了dialog,LinkButton(按钮)组件,ValidateBox(验证框)组件

html代码如下：

<html>
    
    <head>
    
    <title>登录窗口</title> <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    
    </head>
    
    <body>
    
    <div id="login">
    	<p>管理员账号：<input type="text" name="username" class="textbox" id="username"></p>
    	<p>管理员密码：<input type="text" name="password" class="textbox" id="password"></p>
    </div>
    <div id="btn">
    	<a href="#" class="easyui-linkbutton">登录</a>
    </div>
    
    
    </body>
    <script type="text/javascript" src="easyui/jquery.min.js"></script> 
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <script type="text/javascript" src="js/login.js" ></script>
    </html>

css代码：

#login{
    	padding:6px 0 0 0;
    }
    p{
    	height: 22px;
    	line-height: 22px;
    	padding: 4px 0 0 25px;
    }
    #btn{
    	text-align: center;
    }
    .easyui-linkbutton{
    	padding: 0,10px;
    }

5.\#login\{  
padding:6px 0 0 0;  
\}  
p\{  
height: 22px;  
line-height: 22px;  
padding: 4px 0 0 25px;  
\}  
\#btn\{  
text-align: center;  
\}  
.easyui-linkbutton\{  
padding: 0,10px;  
\}  
5.使用js调用加载UI组件

$('#login').dialog({
    		title:"登录后台",
    		width:"300",
    		height:"180",
    		modal:true,//不可修改
    		iconCls:"icon-login",//登录图标
    		buttons:"#btn"//对话框按钮
    	});

6.使用validatebox对输入框进行验证

//管理员账号验证
    	$('#username').validatebox({
    		required:true,
    		missingMessage:"请输入管理员账号",
    		invalidMessage:"管理员账号不得为空！",
    	});
    	//管理员密码验证
    	$('#password').validatebox({
    		required:true,
    		missingMessage:"请输入管理员密码",
    		invalidMessage:"管理员密码不得为空！"
    	});
    		if(!$('#username').validatebox('isValid')){
    			$('#username').focus();
    		}else if(!$('#password').validatebox('isValid')){
    			$('#password').focus();
    
    		}

7.点击登录

$('#btn a').click(function(){
    		if(!$('#username').validatebox('isValid')){
    			$('#username').focus();
    		}else if(!$('#password').validatebox('isValid')){
    			$('#password').focus();
    
    		}else{
    			$.ajax({
    				url:'checklogin.php',
    				type:"post",
    				data: {
    					username:$('#username').val(),
    					password:$('#password').val(),
    				},
    				beforeSend:function(){
    					$.messager.progress({
    						text:'正在登录中...',
    					});
    				},
    				success:function(data,response,status){
    					$.messager.progress('close');
    					if(data>0){
    
    					}else{
    						$.messager.alert('登录失败！','用户名或者密码不正确！','warning',function(){
    							$('#password').select();
    						});
    					}
    					
    				}
    			});
    		}
    	});

[Image 1]: 
[Center]: /images/20220713/63255637637343b099b3a76fd042cc68.png