04-EasyUI_登陆的实现

最新推荐文章于 2020-06-11 21:51:06 发布

forwardNow

最新推荐文章于 2020-06-11 21:51:06 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： EasyUI 登陆

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/13631497

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

登陆

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

- dialog,messager的应用

- 登陆项目下载 EasyUI_简单登陆界面.zip (MyEclipse2013项目拷贝)

- 截图

登陆: 使用 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>

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

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)

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, 如下

        <script type="text/javascript">
            var loginAndRegDialog;
            
            $(function(){
            });
        </script>   
        <div id="loginAndRegDialog"></div>

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">
<!--  
		登陆: 使用 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
			 	C. Firebug 查看Ajax是否请求成功(截图1.jpg)
			 	
			8. 处理结果
			 	- 失败: messager 弹对模式话框
			 	- 成功: 隐藏 dialog,并右下角弹对话框
									
			 
		技巧:
			1. 以id的值作为全局变量, 方便定位dom, 如下
			
				<script type="text/javascript">
					var loginAndRegDialog;
					
					$(function(){
					});
				</script>	
				<div id="loginAndRegDialog"></div>		
			
			2. 使用JS获得项目的URL
			
			3. 将表格里的内容序列化为字符串
			
				$("#loginInputForm").serialize()
					==> name=zhangsan&password=123
	-->
<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>