人事管理系统项目（一）

最新推荐文章于 2024-07-23 10:42:03 发布

ysc18402950481

最新推荐文章于 2024-07-23 10:42:03 发布

阅读量1.2k

点赞数 1

分类专栏：人事管理系统项目

本文链接：https://blog.csdn.net/ysc18402950481/article/details/109035364

版权

人事管理系统项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

人事管理系统项目（一）

大家好，今天分享一个基于JavaWeb完成的比较基础的人事管理小项目，在开始之前先配置我们需要用到的maven依赖包。我们需要用到javax.servlet-api，mysql-connector-java MYSQL驱动包，fastjson，commons-beanutils，junit，druid阿里巴巴数据库连接池这些依赖包，在pom.xml里配置好这些依赖包后，我们先从前端页面开始，下面是登录页面：(注意：前端页面这里运用到了一些前端框架的样式，一定要引进相应的包)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
        响应式移动设备优先设置
        viewport：视口
        width=device-width：页面的大小与设备的大小匹配
        initial-scale=1:页面初始大小与设备大小一致，无需缩放
        移动端自适应
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <!--引入CSS文件-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .win-login {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0px;
            margin: 0px;
            padding: 0px;
            display: flex;

            background-color: #dddddd;
            /*设置弹性布局*/
            flex-direction: row;
            /*设置水平方向*/
            justify-content: center;
            /*根据direction的方向设置居中*/
            align-items: center;
            /*根据direction的反方向设置居中*/
        }

        .container {
            width: 800px;
            height: 500px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 5px black;
            display: flex;
            background-color: ghostwhite;
            /*设置弹性布局*/
            flex-direction: column;
            /*列布局*/
            align-items: center;
        }

        .title {
            font-size: 60px;
            font-weight: bold;
            color: red;
            text-shadow: 5px 5px 5px #a9a9a9;
            letter-spacing: 15px;
            margin: 50px 0;
        }

        .login-input {
            position: relative;
            width: 300px;
            height: 50px;
            border: 0px solid red;
            margin: 5px 0;
        }

        .login-input > label {
            box-sizing: border-box;
            position: absolute;
            border: 0px solid red;
            width: 65px;
            height: 50px;
            line-height: 50px;
            letter-spacing: 2px;
            padding-left: 10px;
            color: #666666;
        }

        .login-input > input {
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #dddddd;
            padding-left: 65px;
            outline: none;
            font-size: 18px;
            width: 100%;
            height: 100%;
        }

        .login-button {
            position: relative;
            width: 300px;
            height: 50px;
            margin: 15px 0;
        }

        .login-button > button {
            border: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            border: 1px solid #dddddd;
            outline: none;
            background-color: white;
            letter-spacing: 15px;
            padding-left: 15px;
            color: #666666;
            font-size: 18px;
        }

        .login-button > button:hover {
            cursor: pointer;
            background-color: cornflowerblue;
            color: white;
        }

        .login-button > button:active {
            font-weight: bold;
            outline: none;
            border: 0;
            box-shadow: 0px 0px 8px 1px #7088ff;
        }
    </style>
</head>
<body>
<div class="container-fluid container-other">
    <div class="win-login">
        <div class="container" id="login-container">
            <div class="title">人力资源管理系统</div>
            <form name="loginForm">
                <div class="login-input">
                    <label>账户：</label>
                    <input type="text" name="account_name"/>
                </div>
                <div class="login-input">
                    <label>密码：</label>
                    <input type="password" name="account_password"/>
                </div>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="customSwitch1" name="autoLogin">
                    <label class="custom-control-label" for="customSwitch1">7天自动登录</label>
                </div>
                <div class="login-button">
                    <button type="button">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="layer-v3.1.1/layer/layer.js"></script>
<script>
    //DOM方式的加载事件
    // window.οnlοad=function(){}
    //jQuery方式的加载事件
    $(function(){
        /**
         * 1.从浏览器中读取Cookie信息
         * 2.获得存储用户账户的cookie(cookie_account_name,cookie_account_password)
         * 3.1 判断用户账户的cookie都存在,如果存在则使用ajax请求将账户信息发送到loginServlet进行自动登录
         * 3.2 如果账户信息不存在则函数结束，什么也不做
         * */
        //1.从浏览器中读取Cookie信息,并解析每个cookie的name和value属性值
        let cookieStr = document.cookie;
        //通过";"号拆分cookie字符串获得一个字符串数组，每个元素中存放的为一个key=value的cookie字符串
        let cookieArr = cookieStr.split(";");
        //声明账户信息的变量
        let account_name=null;
        let account_password=null;
        //自动登录标记，false表示不进行自动登录，true表示进行自动登录
        let autoFlag = false;
        //遍历数组
        for (let cookie of cookieArr){
            //使用"="号分割cookie字符串，获得cookie的name和value属性
            let cookieAttrArr=cookie.trim().split("=");
            //判断当前cookie的name是否为"account_name",如果是则获取该cookie的value属性值并赋值给account_name变量
            if(cookieAttrArr[0] == "account_name"){
                account_name = cookieAttrArr[1];
            }
            //判断当前cookie的name是否为"account_password",如果是则获取该cookie的value属性值并赋值给account_password变量
            if(cookieAttrArr[0] == "account_password"){
                account_password = cookieAttrArr[1];
            }
            //判断是否获得账户信息
            if(account_name!=null && account_password!=null){
                //已获得账户信息(含账户名和密码)
                autoFlag = true;
                break;//循环退出
            }
        }
        //判断autoFlag是否自动登录
        if(autoFlag){
            /**弹出加载滚动条*/
            let index = layer.load(); //0代表加载的风格，支持0-2

            $.ajax({
                url:'login/login.do?operate=login',
                //"account_name="+account_name+"&account_password="+account_password;//查询参数

                data:{"account_name":account_name,"account_password":account_password},//JSON对象
                type:'POST',
                dataType:'JSON'
            })
                .done(result => {
                    //关闭加载层
                    layer.close(index);
                    if(result.success){//登录成功
                        layer.msg(result.message, {
                            icon: 6,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){//此函数在弹出层关闭后自动执行
                            //跳转到首页
                            location.href="emp/main.html";
                        });
                    }else{
                        layer.msg(result.message, {
                            icon: 5,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                })
                .fail( error => {
                    //关闭加载层
                    layer.close(index);
                    layer.msg(result.message, {
                        icon: 5,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                });
        }
    });
    $("button").click(()=>{
        /**弹出加载滚动条*/
        let index = layer.load(); //0代表加载的风格，支持0-2
        $.ajax({
            url:'login/login.do?operate=login',
            data:$("form").serialize(),
            type:'POST',
            dataType:'JSON'
        })
        .done(result=>{
            //关闭加载层
            layer.close(index);
            if (result.success){
                /***********使用JS添加Cookie*******************/
                //document.cookie="aaa=xxx;expires="+time;
                if(result.data){//如果data存在数据则表示用户勾选了自动登录
                    //获得服务端回传的Cookie数组
                    let cookieArr = result.data;
                    //遍历Cookie数组，并将Cookie添加到客户端
                    for(let cookieEle of cookieArr){

                        //获得存活时间,从cookie中获得的是秒单位，转换毫秒
                        let time = new Date(new Date().getTime()+cookieEle.maxAge*1000);

                        let maxAge = new Date(time);//获得time毫秒数所对应的实现对象

                        //添加Cookie
                        document.cookie=cookieEle.name+"="+cookieEle.value+";expires="+maxAge;
                    }
                }
                /***********************************************************/
                layer.msg(result.message, {
                    icon: 6,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                },function(){//此函数在弹出层关闭后自动执行
                    //跳转到首页
                    location.href="emp/main.html";
                })
            }else{
                layer.msg(result.message, {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                });
            }
        })
        .fail(error=>{
            //关闭加载层
            layer.close(index);
            layer.msg(result.message, {
                icon: 5,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
        })
    })
</script>
</body>
</html>