HTML+CSS登录界面，有数据库的登录验证

HTML

 1 <!DOCTYPE html>

 2 <html lang="zh-CN">

 3     <head>

 4         <meta charset="UTF-8" />

 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 6         <title>用户登录</title>

 7         <link rel="stylesheet" href="CSS/login.css" />

 8     </head>

 9     <body>

10     <form name="user" action="LoginServlet" method="post">

11         <div class="login">

12             <h2>用户登录</h2>

13             <div class="login_box">

14                 <input type="text" name="uid" id="uid" autocomplete="off"/><label>用户名</label>

15             </div>

16             <div class="login_box">

17                 <input type="password" name="password" id="password" autocomplete="off"/><label>密码</label>

18             </div>

19             <a href="#" onclick="document.user.submit();return false">

20             登录

21             <span></span>

22             <span></span>

23             <span></span>

24             <span></span>

25             </a>

26         </div>

27         </form>

28     </body>

29 </html>

CSS

* {

    /* 初始化 清除页面元素的内外边距 */

    padding: 0;

    margin: 0;

    /* 盒子模型 */

    box-sizing: border-box;

}

body {

    /* 弹性布局 让页面元素垂直+水平居中 */

    display: flex;

    justify-content: center;

    align-items: center;

    /* 让页面始终占浏览器可视区域总高度 */

    height: 100vh;

    /* 背景渐变色 */

    background: linear-gradient(#141e30, #243b55);

}

.login {

    /* 弹性布局 让子元素称为弹性项目 */

    display: flex;

    /* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */

    flex-direction: column;

    /* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */

    align-items: center;

    width: 400px;

    padding: 40px;

    background-color: rgba(0, 0, 0, 0.2);

    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);

}

.login h2 {

    color: #fff;

    margin-bottom: 30px;

}

.login .login_box {

    /* 相对定位 */

    position: relative;

    width: 100%;

}

.login .login_box input {

    /* 清除input框自带的边框和轮廓 */

    outline: none;

    border: none;

    width: 100%;

    padding: 10px 0;

    margin-bottom: 30px;

    color: #fff;

    font-size: 16px;

    border-bottom: 1px solid #fff;

    /* 背景颜色为透明色 */

    background-color: transparent;

}

.login .login_box label {

    position: absolute;

    top: 0;

    left: 0;

    padding: 10px 0;

    color: #fff;

    /* 这个属性的默认值是auto 默认是这个元素可以被点击 但是如果我们写了none 就是这个元素不能被点击 , 就好像它可见但是不能用 可望而不可即 */

    /* 这个就是两者的区别 */

    pointer-events: none;

    /* 加个过渡 */

    transition: all 0.5s;

}

/* :focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器 去找与input相邻的兄弟label */

/* :valid 选择器是判断input框的内容是否合法,如果合法会执行下面的属性代码,不合法就不会执行,我们刚开始写布局的时候给input框写了required 我们删掉看对比 当没有required的话input框的值就会被认为一直合法,所以一直都是下方的样式 ,但是密码不会,密码框内的值为空,那么这句话局不合法,required不能为空 当我们给密码框写点东西的时候才会执行以下代码*/

.login .login_box input:focus + label,

.login .login_box input:valid + label {

    top: -20px;

    color: #03e9f4;

    font-size: 12px;

}

.login a {

    overflow: hidden;

    position: relative;

    padding: 10px 20px;

    color: #03e9f4;

    /* 取消a表现原有的下划线 */

    text-decoration: none;

    /* 同样加个过渡 */

    transition: all 0.5s;

}

.login a:hover {

    color: #fff;

    border-radius: 5px;

    background-color: #03e9f4;

    box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,

        0 0 100px #03e9f4;

}

.login a span {

    position: absolute;

}

.login a span:first-child {

    top: 0;

    left: -100%;

    width: 100%;

    height: 2px;

    /* to right 就是往右边 下面的同理 */

    background: linear-gradient(to right, transparent, #03e9f4);

    /* 动画 名称 时长 linear是匀速运动 infinite是无限次运动 */

    animation: move1 1s linear infinite;

}

.login a span:nth-child(2) {

    right: 0;

    top: -100%;

    width: 2px;

    height: 100%;

    background: linear-gradient(transparent, #03e9f4);

    /* 这里多了个0.25s其实是延迟时间 */

    animation: move2 1s linear 0.25s infinite;

}

.login a span:nth-child(3) {

    right: -100%;

    bottom: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(to left, transparent, #03e9f4);

    animation: move3 1s linear 0.5s infinite;

}

.login a span:last-child {

    left: 0;

    bottom: -100%;

    width: 2px;

    height: 100%;

    background: linear-gradient(#03e9f4, transparent);

    animation: move4 1s linear 0.75s infinite;

}

@keyframes move1 {

    0% {

        left: -100%;

    }

    50%,

    100% {

        left: 100%;

    }

}

@keyframes move2 {

    0% {

        top: -100%;

    }

    50%,

    100% {

        top: 100%;

    }

}

@keyframes move3 {

    0% {

        right: -100%;

    }

    50%,

    100% {

        right: 100%;

    }

}

@keyframes move4 {

    0% {

        bottom: -100%;

    }

    50%,

    100% {

        bottom: 100%;

    }

}

LoginServlet

package servlet;

import java.io.IOException;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.text.SimpleDateFormat;

import java.util.Date;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class UserServlet

 */

@WebServlet("/LoginServlet")

public class LoginServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public LoginServlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        response.setContentType("text/html;charset=UTF-8");

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String date=sdf.format(new Date());

        String uid=String.valueOf(request.getParameter("uid"));

        String pass=String.valueOf(request.getParameter("password"));

        try {

            Class.forName("com.mysql.cj.jdbc.Driver");

            String url="jdbc:mysql://localhost:3306/family income and expenditure?&useSSL=false&serverTimezone=UTC";

            String username="root";

            String password="";

            Connection conn=DriverManager.getConnection(url,username,password);

            String sql="select * from user_info where uid='"+uid+"'and password='"+pass+"'";

            PreparedStatement ps=conn.prepareStatement(sql);

            ResultSet rs=ps.executeQuery();

            if(rs.next()) {

                System.out.println(date+"  "+uid+" "+"login");

                System.out.println();

                request.setAttribute("uid", uid);

                request.getRequestDispatcher("index.html").forward(request,response);//登录成功

            }else{

                response.getWriter().write("<font style='color:red;font-size:35px'><div align='center'>"+

                "用户名或密码错误！5秒后自动跳转"+"</div>"+"</font>");

                response.getWriter().write("<div align='center'>"

                +"如果没有发生跳转，请点"+"<a href='login.html'>"+"这里"+"</div>");

                response.setHeader("refresh", "5;url=login.html");//登录失败，重新登录

            }

        }catch(Exception e) {

            e.printStackTrace();

        }finally{

        }

    }

}

Code

巴特西

HTML+CSS登录界面，有数据库的登录验证

最新文章

热门文章