1、index.jsp的页面展示和代码

image.png

  1. <%--
  2. 登录页的开发！
  3. --%>
  4. <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
  5. <%
  6.     String path = request.getContextPath();
  7.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  8. %>
  9. <html>
  10. <head>
  11.     <base href="<%=basePath%>">
  12.     <title>登录</title>
  13.     <link rel="stylesheet" href="assets/plugins/fontawesome-free/css/all.min.css">
  14.     <link rel="stylesheet" href="assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  15.     <link rel="stylesheet" href="assets/dist/css/adminlte.min.css">
  16.     <style>
  17.         #_body {
  18.             background-image: url("assets/img/loginbg.jpg");
  19.             background-size: cover;
  20.         }
  21.     </style>
  22. </head>
  23. <body class="hold-transition login-page" id="_body">
  24. <div class="login-box">
  25.     <div class="login-logo">
  26.         <a href="">后台管理系统</a>
  27.     </div>
  28.     <div class="card">
  29.         <div class="card-body login-card-body">
  30.             <p class="login-box-msg">欢迎登录后台管理系统</p>
  31.             <form action="#" method="post">
  32.                 <div class="input-group mb-3">
  33.                     <input type="phone" class="form-control" placeholder="手机号">
  34.                     <div class="input-group-append">
  35.                         <div class="input-group-text">
  36.                             <span class="fas fa-phone-square"></span>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 <div class="input-group mb-3">
  41.                     <input type="password" class="form-control" placeholder="密码">
  42.                     <div class="input-group-append">
  43.                         <div class="input-group-text">
  44.                             <span class="fas fa-lock"></span>
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.                 <div class="row">
  49.                     <div class="col-8">
  50.                         <div class="icheck-primary">
  51.                             <input type="checkbox" id="remember">
  52.                             <label for="remember">
  53.                                 <span style="font-weight: normal">记住我</span>
  54.                             </label>
  55.                         </div>
  56.                     </div>
  57.                     <!-- /.col -->
  58.                     <div class="col-4">
  59.                         <button type="submit" class="btn btn-primary btn-block">登 录</button>
  60.                     </div>
  61.                 </div>
  62.             </form>
  63.         </div>
  64.     </div>
  65. </div>
  66. </div>
  67. <!-- jQuery -->
  68. <script src="assets/plugins/jquery/jquery.min.js"></script>
  69. <!-- Bootstrap 4 -->
  70. <script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  71. <!-- AdminLTE App -->
  72. <script src="assets/dist/js/adminlte.min.js"></script>
  73. </body>
  74. </html>