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

来源：互联网发布：淘宝金鹰汇怎么样编辑：程序博客网时间：2024/05/24 01:52

第一步：首先上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>

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

1 0