慕课OA系统

最新推荐文章于 2023-02-01 11:27:11 发布

VIP文章秋刀鱼的族谱

最新推荐文章于 2023-02-01 11:27:11 发布

阅读量750

点赞数 1

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_55689615/article/details/122487745

版权

前期准备：
IntelliJ IDEA 2019.3.3 x64(搭建平台)
SQLyog(任意可视化工具都行)
Mysql任意版本(版本号在8以上都可以)

项目详解：
一、登录界面
二、功能界面
1、请假功能
2、注销功能
3、审批功能
4、通知功能

功能实现：
(注意：项目所需数据需提前写入数据库中)
所需表总览：
在这里插入图片描述
登录界面：
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网办公OA系统</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        body{
            background-color: #f2f2f2;
        }
        .oa-container{
            /*background-color: white;*/
            position: absolute;
            width: 400px;
            height: 350px;
            top: 50%;
            left: 50%;
            padding: 20px;
            margin-left: -200px;
            margin-top: -175px;
        }
        #username,#password{
            text-align: center;
            font-size: 24px;
        }
    </style>


</head>
<body>
<div class="oa-container">
    <h1 style="text-align: center;margin-bottom: 20px">慕课网办公OA系统</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <input type="text" id="username" lay-verify="required" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <input type="password" id="password" lay-verify="required" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid " lay-submit lay-filter="login">登录</button>
        </div>
    </form>
</div>
<script src="/resources/layui/layui.all.js"></script>
<script>
    layui.form.on("submit(login)",function(formdata){//data参数包含了当前表单的数据
      console.log(formdata);
      layui.$.ajax({
          url:"/check_login",
          data:formdata.field,
          type:"post",
          dataType:"json",
          success : function (json) {
              console.log(json);
              if (json.code == "0"){
                  //layui.layer.msg("登录成功");
                  //跳转url
                  window.location.href=json.redirect_url;
              }else{
                  layui.layer.msg(json.message);
              }

          }
      })
      return false;//submit提交事件返回true则表单提交，false则阻止表单提交
    })
</script>
</body>
</html>

在这里插入图片描述
功能界面：
index.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网办公OA系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
</head>

<body class="layui-layout-body">
<!-- Layui后台布局CSS -->
<div class="layui-layout layui-layout-admin">
    <!--头部导航栏-->
    <div class="layui-header">
        <!--系统标题-->
        <div class="layui-logo" style="font-size:18px">慕课网办公OA系统</div>
        <!--右侧当前用户信息-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:void(0)">
                    <!--图标-->
                    <span class="layui-icon layui-icon-user" style="font-size: 20px">
                    </span>
                    <!--用户信息-->
                    ${current_employee.name}[${current_department.departmentName}-${current_employee.title}]
                </a>
            </li>
            <!--注销按钮-->
            <li class="layui-nav-item"><a href="/logout">注销</a></li>
        </ul>
    </div>
    <!--左侧菜单栏-->
    <div class="layui-side layui-bg-black">
        <!--可滚动菜单-->
        <div class="layui-side-scroll">
            <!--可折叠导航栏-->
            <ul class="layui-nav layui-nav-tree">
                <#list node_list as node>

                    <#if node.nodeType == 1>
                    <!--父节点-->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:void(0)">${node.nodeName}</a>
                        <dl class="layui-nav-child module" data-node-id="${node.nodeId}"></dl>
                    </li>
                    </#if>
                    <#if node.nodeType == 2>
                    <!--子节点-->
                    <dd class="function" data-parent-id="${node.parentId}">
                        <a href="${node.url}" target="ifmMain">${node.nodeName}</a>
                    </dd>
                    </#if>
                </#list>
            </ul>
        </div>
    </div>
    <!--主体部分采用iframe嵌入其他页面-->
    <div class="layui-body" style="overflow-y: hidden">
        <iframe name="ifmMain" src="/forward/notice" style="border: 0px;width: 100%;height: 100%"></iframe>
    </div>
    <!--版权信息-->
    <div class="layui-footer">
        Copyright © imooc. All Rights Reserved.
    </div>
</div>
<!--LayUI JS文件-->
<script src="/resources/layui/layui.all.js"></script>
<script>
    //将所有功能根据parent_id移动到指定模块下
    layui.$(".function").each(function () {
        var func = layui.$(this);
        var parentId = func.data("parent-id");
        layui.$("dl[data-node-id=" + parentId + "]").append(func);
    })
    //刷新折叠菜单
    layui.element.render('nav');
</script>
</body>
</html>

在这里插入图片描述
注销功能
LogoutServlet.java

package com.imooc.oa.controller;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * 注销功能
 */

@WebServlet(name = "LogoutServlet" , urlPatterns = "/logout")
public class LogoutServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //作废当前session
        request.getSession().invalidate();
        response.sendRedirect("/login.html");
    }
}

在这里插入图片描述
请假功能
form.ftl


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        /*表单容器*/
        .ns-container {
            position: absolute;
            width: 500px;
            height: 450px;
            top: 150px;
            left: 50%;
            margin-left: -250px;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <blockquote class="layui-elem-quote">
        <h2>请假申请</h2>
    </blockquote>
    <table id="grdNoticeList" lay-filter="grdNoticeList"></table>
</div>
<div class="ns-container">
    <h1 style="text-align: center;margin-bottom: 20px">请假申请单</h1>
    <form class="layui-form">

最低0.47元/天解锁文章

秋刀鱼的族谱

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
慕课OA系统

前期准备：IntelliJ IDEA 2019.3.3 x64(搭建平台)SQLyog(任意可视化工具都行)Mysql任意版本(版本号在8以上都可以)项目详解：一、登录界面二、功能界面1、请假功能2、注销功能3、审批功能4、通知功能功能实现：(注意：项目所需数据需提前写入数据库中)所需表总览：登录界面：login.html<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫