初学easyUi框架，利用easyUi框架实现登录。

最新推荐文章于 2024-05-27 12:07:42 发布

自强不息的程序员

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量1.4w

点赞数 6

文章标签： easyUi

本文链接：https://blog.csdn.net/u011504564/article/details/53302799

版权

第一步：首先上easyUi官网下载easyUi插件

官网链接 http://www.jeasyui.com/download/index.php

第二步：

将这些文件直接拷到工程WebRoot目录下，如下图所示。

3.开始写前台代码，将这些css 、js 引入进来。

4.最终实现效果是这样的，下面会上传代码

代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
	<link rel="stylesheet" type="text/css" href="js/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
  </head>
  <%
  	String message = (String) request.getAttribute("message");
		if (message == null) {
			message = "";
		}
		if (!message.trim().equals("")) {
			out.println("<script language='javascript'>");
			out.println("alert('"+message+"')");
			out.println("</script>");
		}
		//request.removeAttribute("message");
		 %>
  <body >
	<div id="login" class="easyui-window" style="padding-top: 5px;padding-left: 15px" >
		<form id="loginForm" action=<%=basePath%>login method="get">
		<table>
		<tr>
			<td>
				<table>
				<tr><td>用户名</td><td><input  class="easyui-validatebox"   id="userName" name="userName" type="text"/></td><td></td></tr>
				<tr><td>密 码</td><td><input  class="easyui-validatebox"  id="passWord" name="passWord" type="password"></td><td></td></tr>
				<tr><td>角 色</td><td><select name="role"> <option value="1">普通用户</option><option value="2">管理员</option></select> </td></tr>
				<div style="text-align: center;color: red;" id="showMsg"></div>
				</table>
			</td>
			<td>
			<img src="images/head.png"/>
			</td>
			</tr>
		</table>
		</form>
	</div>
	<script type="text/javascript">
		$(function() {
			$("#login").dialog({
				title : '登录',
				backcolor:'#00f',
				iconCls : 'icon-lock',	
				width : '420',
				height : '230',
				closable : false,
				minimizable : false,
				maximizable : false,
				resizable : false,
				modal : true,
				buttons : [ {
					text : '登录',
					iconCls : 'icon-ok',
					handler:function(){
					doLogin();
					}
				} ]
			});
		});
		function doLogin(){
		 if($("input[name='userName']").val()=="" || $("input[name='passWord']").val()==""){
         $("#showMsg").html("用户名或密码为空，请输入");
         $("input[name='login']").focus();}else{
		$("#login").dialog("close");
		$("#loginForm").get(0).submit();
		}
		}
	</script>
  </body>
</html>

本菜鸟也是第一次学这写，不好勿喷，共同学习。

自强不息的程序员

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
5
评论
初学easyUi框架，利用easyUi框架实现登录。

第一步：首先上easyUi官网下载easyUi插件官网链接 http://www.jeasyui.com/download/index.php第二步：将这些文件直接拷到工程WebRoot目录下，如下图所示。3.开始写前台代码，将这些css 、js 引入进来。4.最终实现效果是这样的，下面会上传代码代码如下：<%String path
复制链接

扫一扫