04-EasyUI_登陆的实现

悠悠 2022-09-18 00:56 45阅读 0赞

登陆

\- 模式登陆框  
\- 登陆成功, 右下角弹提示框, 2秒后消失  
\- 登陆失败, 弹出模式对话框提示  
\- Ajax提交表单信息,servlet处理

\- dialog,messager的应用

\- 登陆项目下载 [EasyUI\_简单登陆界面.zip][EasyUI_.zip] (MyEclipse2013项目拷贝)

\- 截图

![SouthEast][]

![SouthEast 1][]![SouthEast 2][]

登陆: 使用 dialog 做登陆界面

# 步骤: #

##  1. 弹出 dialog ##

将指定id的div渲染成dialog

##  2. 去掉dialog右上角关闭按钮 ##

dialog  
Dependencies  
window  
linkbutton  
window  
Dependencies  
draggable  
resizable  
panel  
panel的属性  
|-- closable:boolean,Defines if to show closable button.

##  3. 模式化dialog ##

dialog  
Dependencies  
window  
linkbutton  
window的属性  
|-- modal:boolean,Defines if window is a modal window.

##  4. 添加文本框(用户名,密码) ##

1) 直接在<div>的body里写<input>  
2) 使用<table>布局  
3) CSS样式: 用户名/密码 标签, 居右  
4) 将<table>放入<form>

##  5. 添加注册和登陆按钮  ##

dialog的属性  
|-- buttons: array, each button options is same as linkbutton.  
buttons : \[ \{  
text : '注册', // 标签  
handler : function() \{\} // 点击后的触发的函数  
\}, \{  
text : '登陆',  
handler : function() \{\}  
\} \]

##  6. 验证登陆按钮的handler(注: 不要用alert) ##

\{  
text : '登陆',  
handler : function() \{  
console.info('我点击了登陆按钮....');  
\}  
\}

##  7. 提交用户名密码 ##

1) 提交方式  
A. form表单提交  
B. 序列化表单,Ajax提交  
  
2) Ajax提交  
A. 参看jQuery关于$.ajax()的详细说明(见下面 "页面完整代码")  
B. 处理登陆的servlet(见下面 "服务器端servlet")  
C. Firebug 查看Ajax是否请求成功(截图1.jpg)  
![SouthEast 3][]

##  8. 处理结果 ##

\- 失败: messager 弹对模式话框  
\- 成功: 隐藏 dialog,并右下角弹对话框

success : function(data, textStatus) {	// 请求成功后的回调函数
    							//console.info(data);
    							//console.info(data.msg);
    							//$.messager.alert('标题',data.msg);
    							if (data && data.success) {	// 成功, 隐藏dialog
    								loginAndRegDialog.dialog('close');
    								$.messager.show({
    									title : "提示",
    									msg : data.msg,
    									timeout:2000,
    								});
    							} else { // 失败, 弹 对话框
    								$.messager.alert('标题',data.msg);
    							}
    							
    						},

# 技巧: #

##  1. 以id的值作为全局变量, 方便定位dom, 如下 ##

##  2. 使用JS获得项目的URL ##

// 获取项目的URL
    	function getCurProjPath() {
    		var curWwwPath = window.document.location.href;
    		var pathName = window.document.location.pathname;
    		var pos = curWwwPath.indexOf(pathName);
    		var localhostPath = curWwwPath.substring(0, pos);
    		var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    		return (localhostPath + projectName);
    	}
    	//console.info(getCurProjPath());

##  3. 将表格里的内容序列化为字符串 ##

$("\#loginInputForm").serialize()

==> name=zhangsan&password=123

# 服务器端servlet #

package foo.ui.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class UserLoginServlet extends HttpServlet {
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		
    		request.setCharacterEncoding("UTF-8");
    		response.setCharacterEncoding("UTF-8");
    		
    		String name = request.getParameter("name");
    		String password = request.getParameter("password");
    
    		System.out.println("name=" + name + "\npassword=" + password);
    		
    		String resultJson = null;
    		
    		// 失败
    		resultJson = "{\"success\":false,\"msg\":\"用户名或密码错误!\"}";
    
    		// 成功
    		if ( name != null && "admin".equals(name) ) {
    			resultJson = "{\"success\":true,\"msg\":\"登陆成功....\"}";
    		}
    		
    		response.getWriter().print(resultJson);
    	}
    
    }

# 页面完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
      <head>
        <title>login</title>
    	
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
    
        <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
    
    <script type="text/javascript">
    	// 获取项目的URL
    	function getCurProjPath() {
    		var curWwwPath = window.document.location.href;
    		var pathName = window.document.location.pathname;
    		var pos = curWwwPath.indexOf(pathName);
    		var localhostPath = curWwwPath.substring(0, pos);
    		var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    		return (localhostPath + projectName);
    	}
    	//console.info(getCurProjPath());
    </script>	
    <script type="text/javascript" charset="UTF-8">
    	var loginAndRegDialog;
    
    	$(function() {
    		loginAndRegDialog = $("#loginAndRegDialog");
    		// 将div渲染程dialog
    		loginAndRegDialog.dialog({
    			closable : false,
    			modal : true,
    			buttons : [ {
    				text : '注册',
    				handler : function() {
    				}
    			}, {
    				text : '登陆',
    				handler : function() {
    					//console.info('我点击了登陆按钮....');
    					$.ajax({
    						type : "POST", // 请求方式 ("POST" 或 "GET")， 默认为 "GET"
    						url : getCurProjPath() + '/userLoginServlet',
    						/*data : {	// 发送到服务器的数据
    							name : $("#loginInputForm input[name=name]").val(),
    							password : $("#loginInputForm input[name=password]").val()
    						},*/
    						data : $("#loginInputForm").serialize(),
    						cache : false,	// 不缓存此页面
    						dataType : 'json',	// 预期服务器返回的数据类型。
    						success : function(data, textStatus) {	// 请求成功后的回调函数
    							//console.info(data);
    							//console.info(data.msg);
    							//$.messager.alert('标题',data.msg);
    							if (data && data.success) {	// 成功, 隐藏dialog
    								loginAndRegDialog.dialog('close');
    								$.messager.show({
    									title : "提示",
    									msg : data.msg,
    									timeout:2000,
    								});
    							} else { // 失败, 弹 对话框
    								$.messager.alert('标题',data.msg);
    							}
    							
    						},
    						error : function (XMLHttpRequest, textStatus, errorThrown) {
    							console.info("Ajax 执行失败");
    						}
    					});
    				}
    			} ]
    		});
    	});
    </script>
    	<style type="text/css">
    		/* 标签居右  */
    		th{
    			text-align: right;
    		}
    	</style>
      </head>
      
      <body>
    
    	<div id="loginAndRegDialog"
    		title="用户登陆"
    		style="width:250px;height:200px;"	
    	>
    		<form id="loginInputForm" action="post">
    			<table>
    				<tr>
    					<th>用户名</th>
    					<td><input name="name" type="text"/></td>
    				</tr>
    				<tr>
    					<th>密码</th>
    					<td><input name="password" type="password"/></td>
    				</tr>
    			</table>
    		</form>
    	</div>
    	
    	
      </body>
    </html>

[EasyUI_.zip]: http://download.csdn.net/detail/wuqinfei_cs/6477567
[SouthEast]: /images/20220828/e3c1cb4ae2264a018311324af07312df.png
[SouthEast 1]: https://img-blog.csdn.net/20131030175109937?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3VxaW5mZWlfY3M=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220828/7742c802ebe747d18f9a42dce52d3685.png
[SouthEast 3]: /images/20220828/dea76078093e4c66a8ec2c15a7ad67b7.png