maven项目:实现用户信息的增删改和分页展示
-
接着上一篇博客项目的基础上开始
-
在page目录下,创建failer.jsp,当用户登录失败后,进入failer.jsp提示用户登录失败
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>操作失败</title> </head> <body> <p> 登录失败,点击这里回到<a href="${pageContext.request.contextPath}/page/login.jsp">登录</a> </p> </body> </html>
-
在page目录下,创建header.jsp、aside.jsp、success.jsp,其中success.jsp为用户登录成功后进入用户首页,success.jsp中包含header.jsp和aside.jsp,其中header.jsp为页面的头部,aside为页面的左侧部
-
header.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <header class="main-header"> <a href="all-admin-index.html" class="logo"> <span class="logo-mini"><b>用户</b></span> <span class="logo-lg"><b>用户</b>后台管理</span> </a> <nav class="navbar navbar-static-top"> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="../img/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${ sessionScope.user.username}</span> </a> <ul class="dropdown-menu"> <!-- User image --> <li class="user-header"> <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p> ${ sessionScope.user.username} - 数据管理员 <small>最后登录 11:20AM</small> </p> </li> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">修改密码</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">注销</a> </div> </li> </ul> </li> </ul> </div> </nav> </header>
-
aside.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%> <aside class="main-sidebar"> <section class="sidebar"> <div class="user-panel"> <div class="pull-left image"> <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p> ${ sessionScope.user.username}</p> <a href="#"><i class="fa fa-circle text-success"></i> 在线</a> </div> </div> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="搜索..."> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> </button> </span> </div> </form>--> <ul class="sidebar-menu"> <li class="header">菜单</li> <li id="admin-index"><a href="/page/success.jsp"><i class="fa fa-dashboard"></i> <span>首页</span></a></li> <!-- 菜单 --> <li class="treeview"> <a href="#"> <i class="fa fa-folder"></i> <span>后台通用页面</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="admin-datalist"> <a href="/page/UserList.jsp"> <i class="fa fa-circle-o"></i> 数据列表页 </a> </li> </ul> </li> </ul> </section> </aside>
-
success.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>首页</title> <meta name="description" content="AdminLTE2定制版"> <meta name="keywords" content="AdminLTE2定制版"> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css"> <link rel="stylesheet" href="../plugins/iCheck/square/blue.css"> <link rel="stylesheet" href="../plugins/morris/morris.css"> <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css"> <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css"> <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css"> <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css"> <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css"> <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css"> <link rel="stylesheet" href="../plugins/select2/select2.css"> <link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css"> <link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css"> <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css"> <link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css"> <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <jsp:include page="header.jsp"></jsp:include> <!-- 页面头部 /--> <!-- 导航侧栏 --> <jsp:include page="aside.jsp"></jsp:include> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> </div> <!-- 内容区域 /--> </div> <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="../plugins/jQueryUI/jquery-ui.min.js"></script> <script> $.widget.bridge('uibutton', $.ui.button); </script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/raphael/raphael-min.js"></script> <script src="../plugins/morris/morris.min.js"></script> <script src="../plugins/sparkline/jquery.sparkline.min.js"></script> <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> <script src="../plugins/knob/jquery.knob.js"></script> <script src="../plugins/daterangepicker/moment.min.js"></script> <script src="../plugins/daterangepicker/daterangepicker.js"></script> <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script> <script src="../plugins/datepicker/bootstrap-datepicker.js"></script> <script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script> <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script> <script src="../plugins/fastclick/fastclick.js"></script> <script src="../plugins/iCheck/icheck.min.js"></script> <script src="../plugins/adminLTE/js/app.min.js"></script> <script src="../plugins/treeTable/jquery.treetable.js"></script> <script src="../plugins/select2/select2.full.min.js"></script> <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script> <script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script> <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script> <script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script> <script src="../plugins/bootstrap-markdown/js/markdown.js"></script> <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script> <script src="../plugins/ckeditor/ckeditor.js"></script> <script src="../plugins/input-mask/jquery.inputmask.js"></script> <script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script> <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script> <script src="../plugins/datatables/jquery.dataTables.min.js"></script> <script src
-