JAVA WEB----完整的登陆界面前端优化

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:5140

web
{}
做完了之前的登陆界面后，我们要优化界面，使界面看起来，更加美观 第一步：去网站上下载Adminlte官网上下载框架 第二步：选择要使用的页面 ...charset=UTF-8" language="java" %> <!DOCTYPE html> &l

目录

做完了之前的登陆界面后，我们要优化界面，使界面看起来，更加美观

第一步：去Adminlte官网上下载所需要的框架

在这里插入图片描述

第二步：选择要使用的页面

把login.jsp和dist和plugins移动到idea后运行程序

在这里插入图片描述

第三步：修改使用的页面的代码

把login.jsp和dist和plugins移动到idea后运行程序
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>林XX的酒店管理系统</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->
  
  <!-- Ionicons -->
  
  <!-- icheck bootstrap -->
  
  <!-- Theme style -->
  
  <!-- Google Font: Source Sans Pro -->
  
</head>
<body  class="hold-transition login-page" >
<%--background="http://localhost:8080/images/win10.jpg"--%>
<div class="login-box">
  <div class="login-logo">
   <a href="../index2.html"><b>林XX</b>酒店管理系统</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
   <div class="card-body login-card-body">
     
登陆系统


     <form action="./login" method="post">
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="用户名" name="loginName">
        <div class="input-group-append">
         <div class="input-group-text">
           
         </div>
        </div>
      </div>
      <div class="input-group mb-3">
        <input type="password" class="form-control" placeholder="密码" name="loginPwd">
        <div class="input-group-append">
         <div class="input-group-text">
           
         </div>
        </div>
      </div>
      <div class="row">

        <div class="input-group mb-3">
         <input type="text" class="form-control" placeholder="验证码" name="validCode">
![](./captcha)
        <div class="input-group-append">
         <div class="input-group-text">
           
         </div>
        </div>
      </div>

      </div>
      <div class="col-4">

      </div>
      <div class="row">
        <div class="col-8">
         <div class="icheck-primary" style="color: blue">
           <%=request.getAttribute("msg")%>
         </div>
        </div>
        <!-- /.col -->
        <div class="col-4">
         <button type="submit" class="btn btn-primary btn-block">登陆</button>
        </div>
        <!-- /.col -->
      </div>
     </form>



   </div>
   <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>

</body>
</html>

第四步：运行程序

在这里插入图片描述

原文地址：https://blog.csdn.net/a1422346935/article/details/106301830?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168904449916800185828444%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168904449916800185828444&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-11-106301830-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=java%E4%BC%98%E5%8C%96

本文章网址:https://www.sjxi.cn/detil/7bfc26bde6a6430fba9f3d246afda1b5

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复