IDEA简单实现登录页面

最新推荐文章于 2025-08-25 12:38:00 发布

原创最新推荐文章于 2025-08-25 12:38:00 发布 · 1w 阅读

54 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

6 篇文章

订阅专栏

application.yml

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/bd1906?serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
    port: 8080

Controller层

@Controller
public class loginController {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @RequestMapping("/index")
    public String border(){
        return "/index.html";
    }

    @RequestMapping("/login")
    public String getUserFront(){
        return "/login.html";
    }

    @RequestMapping(value = "/log",method = RequestMethod.POST)
    @ResponseBody
    public String log(String name,String psd){
        String sql = "select * from user where username = '"+ name +"' and password = '"+psd+"'";
        List<Map<String,Object>> list = jdbcTemplate.queryForList(sql);
        if(list.size() == 0){
            return "0";
        }
        else{
            return "1";
        }
    }
}

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <title>login</title>
    <style>
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        body{
            background-image: url('./img/bg1.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        /* 标题 */
        .head{color: whitesmoke;font-size: 30px;text-align: center;margin-top: 10px;margin-bottom: 10px;}
        /* 刀盘图片 */
        .cutter{text-align: center;margin-bottom: 10px;}
        body .login_fields {
            margin-top: 40px;
            margin-left: 45%;
            height: 208px;
            position: absolute;
            left: 0;
        }
        body .login_fields .icon {
            position: absolute;
            z-index: 1;
            left: 36px;
            top: 8px;
            opacity: .5;
        }
        body .login_fields input[type='password'],body .login_fields input[type='text'] {
            color: #61BFFF !important;
        }
        body .login_fields input[type='text'], body .login_fields input[type='password'] {
            color: #afb1be;
            width: 190px;
            margin-top: -2px;
            background: rgba(57, 61, 82, 0);
            left: 0;
            padding: 10px 65px;
            border-top: 2px solid rgba(57, 61, 82, 0);
            border-bottom: 2px solid rgba(57, 61, 82, 0);
            border-right: none;
            border-left: none;
            outline: none;
            font-family: 'Gudea', sans-serif;
            box-shadow: none;
        }
        body .login_fields__user, body .login_fields__password {
            position: relative;
        }
        body .login_fields__submit {
            position: relative;
            top: 17px;
            left: 0;
            width: 80%;
            right: 0;
            margin: auto;
        }
        body .login_fields__submit .forgot a {
            color: #606479;
        }
        body .login_fields__submit input {
            border-radius: 50px;
            background: transparent;
            padding: 10px 50px;
            border: 2px solid #4FA1D9;
            color: #4FA1D9;
            text-transform: uppercase;
            font-size: 11px;
            -webkit-transition-property: background,color;
            transition-property: background,color;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
        }
        body .login_fields__submit input:focus {
            box-shadow: none;
            outline: none;
        }
        body .login_fields__submit input:hover {
            color: white;
            background: #4FA1D9;
            cursor: pointer;
            -webkit-transition-property: background,color;
            transition-property: background,color;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
        }
    </style>
</head>
<body>
<div class="head">
    智能互联装备协同管理平台
</div>
<div class="cutter">
    <img src="./img/cutter.png" alt="" id="img" width="450px" height="450px">
</div>
<div class='login_fields'>
    <div class='login_fields__user'>
        <div class='icon' >
            <img alt="" src='./img/user.png'>
        </div>
        <input id="userName" name="userName" placeholder='请输入用户名' maxlength="16" type='text' autocomplete="off" >
    </div>
    <div class='login_fields__password'>
        <div  class='icon' >
            <img alt="" src='./img/lock.png'>
        </div>
        <input id="userPsd" name="userPsd" placeholder='请输入密码' maxlength="16" type='text' autocomplete="off" >
    </div>
    <div class='login_fields__submit'>
        <input type='button' value='登录' id="btLogin">
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    //刀盘旋转
    var rotateVal = 0 // 旋转角度
    var InterVal // 定时器
    window.onload = function () {
        // 网页加载完成后即运行rotate函数
        rotate()
    }
    // 设置定时器
    function rotate () {
        InterVal = setInterval(function () {
            var img = document.getElementById('img')
            rotateVal += 1
            // 设置旋转属性(顺时针)
            img.style.transform = 'rotate(' + rotateVal + 'deg)'
            // 设置旋转时的动画  匀速0.1s
            img.style.transition = '0.1s linear'
        }, 100)
    }

    //判断及请求
    $(function () {
        $("#btLogin").click(function () {
            var name = $("#userName").val();
            var psd = $("#userPsd").val();
            console.log(name,psd);
            if (name == "" || name == null){
                alert("用户名不能为空！")
                return;
            }
            if (psd == "" || psd == null){
                alert("密码不能为空！")
                return;
            }
            $.ajax({
                type: "post",
                url: "/log",
                data: {name: name,psd: psd},
                success:function(data){
                    if(data == "1"){
                        window.location.href="./index";
                    }else{
                        alert("登录失败，账号密码不匹配！")
                    }
                }
            })
        })
    })
</script>