本篇博客的主要内容是：

本篇博客有几点特别说明下：

（1）前端的东西挺复杂的，感受到了【学会一个成熟的前端框架】的重要性。毕竟，框架可以提高前段文件的开发效率，简化开发步骤！

（2）前端的Ajax请求和非Ajax请求，需要及时总结；

（3）篇幅较长，内容难度还好，可以快速浏览；

（4）左侧功能栏点击不同的菜单，在功能区会显示不同的内嵌页面；为此，特地编写了一个跳转的功能Servlet：ForwardServlet；

前面几篇博客完成了【请假申请】底层的业务代码；本篇博客就是编写对应的前台界面，并和后台的业务代码进行联系，通过网页向后台服务提交请求，完成【请假申请】前台到后台的整体流程。

一：form.html：请假的前台页面

二：form.html分析和说明：

（1）需要修改的地方：form.html中引入layui的地方需要修改下

（2）引入SweetAlert弹出框js组件：让处理成功（或处理失败）时的弹出框更加美观

（3）form.html代码结构分析：静态HTML部分

（3.1）引入layui的css

（3.2）定义类来修饰【请假表单】在网页上的位置

（3.3）表单放在了一个div容器中

（3.4）表单第一项：部门

（3.5）表单第二项：申请人

（3.6）表单第三项：请假类型

（3.7）表单第四项：请假时长

（3.8）表单第五项：请假原因

（3.9）表单第六项：提价按钮

（4）form.html代码结构分析：JavaScript代码部分

（4.1）获取layui对象的三个子对象：【laydate子对象】，【form子对象】，【$Ajax子对象】

（4.2）设置时间范围

（4.3）提交表单

三：将form.html改为form.ftl：以便能够使用FreeMarker模板引擎：使得【部门】和【申请人】信息变成动态的

四：页面跳转的设置：即点击【左边功能菜单的“请假申请”】后，会显示form.ftl请假表单的内容

1：第一步：设置【功能的url】

2：第二步：设置【请假申请】的跳转url

3：第三步：编写【专门用于页面跳转的“工具Servlet”】，实现向【请假申请的form.ftl的跳转】（这是一种设计的技巧！！！！！）

五：流程梳理

六：阶段性回顾和总结

将请假申请的前台文件form复制进webapp目录下：

一：form.html：请假的前台页面


<!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"><!--基本信息--><div class="layui-form-item"><label class="layui-form-label">部门</label><div class="layui-input-block"><div class="layui-col-md12" style="padding-top: 10px;">研发部</div></div></div><div class="layui-form-item"><label class="layui-form-label">申请人</label><div class="layui-input-block"><div class="layui-col-md12" style="padding-top: 10px;">齐紫陌[部门经理]</div></div></div><!--请假类型下拉框--><div class="layui-form-item"><label class="layui-form-label">请假类别</label><div class="layui-input-block layui-col-space5"><select name="formType" lay-verify="required" lay-filter="cityCode"><option value="1">事假</option><option value="2">病假</option><option value="3">工伤假</option><option value="4">婚嫁</option><option value="5">产假</option><option value="6">丧假</option></select></div></div><!--请假时长日期选择框--><div class="layui-form-item"><label class="layui-form-label">请假时长</label><div class="layui-input-block layui-col-space5"><input name="leaveRange" type="text" class="layui-input" id="daterange" placeholder=" - "><input id="startTime" name="startTime" type="hidden"><input id="endTime" name="endTime" type="hidden"></div></div><!--请假事由--><div class="layui-form-item"><label class="layui-form-label">请假事由</label><div class="layui-input-block layui-col-space5"><input name="reason" type="text"  lay-verify="required|mobile" placeholder="" autocomplete="off" class="layui-input"></div></div><!--提交按钮--><div class="layui-form-item " style="text-align: center"><button class="layui-btn" type="button" lay-submit lay-filter="sub">立即申请</button></div></form>
</div><script src="/resources/layui/layui.js"></script>
<!--<script src="resources/sweetalert2.all.min.js"></script>-->
<script src="/resources/sweetalert2.js"></script>
<script>var layDate = layui.laydate; //Layui日期选择框JS对象var layForm = layui.form; //layui表单对象var $ = layui.$; //jQuery对象//日期时间范围layDate.render({elem: '#daterange',type: 'datetime',range: true,format: 'yyyy年M月d日H时',done: function(value, start, end){//选择日期后出发的时间,设置startTime与endTime隐藏域var startTime = start.year + "-" + start.month + "-" + start.date + "-" + start.hours;var endTime = end.year + "-" + end.month + "-" + end.date + "-" + end.hours;console.info("请假开始时间",startTime);$("#startTime").val(startTime);console.info("请假结束时间",endTime);$("#endTime").val(endTime);}});//表单提交事件layForm.on('submit(sub)', function(data){console.info("向服务器提交的表单数据",data.field);$.post("/leave/create",data.field,function (json) {console.info(json);if(json.code == "0"){/*SweetAlert2确定对话框*/Swal.fire({type: 'success',html: "<h2>请假单已提交,等待上级审批</h2>",confirmButtonText: "确定"}).then(function (result) {window.location.href="/forward/notice";});}else{Swal.fire({type: 'warning',html: "<h2>" + json.message + "</h2>",confirmButtonText: "确定"});}},"json");return false;});</script>
</body>
</html>

发布项目，并访问：

二：form.html分析和说明：

（1）需要修改的地方：form.html中引入layui的地方需要修改下

layui除了有css和JavaScript函数外，layui还内置了jQuery；（因为jQuery实现了Ajax，自然layui也可以实现Ajax；；；；毕竟layui是一款容易上手的适合后端开发人员的前端框架）

（2）引入SweetAlert弹出框js组件：让处理成功（或处理失败）时的弹出框更加美观

sweetalert的官网：https://sweetalert2.github.io/；也可以访问：https://sweetalert.js.org/（建议参考这个）；都可以；不清楚了，去查看參考就行了；

因为layui默认的弹出对话框太丑了，所以这儿我们引入了SweetAlert；（具体SweetAlert可以参考：后台系统三：【预览】功能；（利用SweetAlert这个JS组件实现【图片弹出对话框】））

按理说sweetalert2.all.min.js和sweetalert2.js应该可以兼容啊，为什么使用sweetalert2.js不行？待解决……？？？？？？？？？？？？？？？？？？：

经过实测，过一段时间后，再使用sweetalert2.js又可以了，有点扯哎。。。

（3）form.html代码结构分析：静态HTML部分

…………………………

（3.1）引入layui的css

…………………………

（3.2）定义类来修饰【请假表单】在网页上的位置

…………………………

（3.3）表单放在了一个div容器中

…………………………

（3.4）表单第一项：部门

…………………………

（3.5）表单第二项：申请人

…………………………

（3.6）表单第三项：请假类型

…………………………

（3.7）表单第四项：请假时长

、

…………………………

（3.8）表单第五项：请假原因

…………………………

（3.9）表单第六项：提价按钮

（4）form.html代码结构分析：JavaScript代码部分

…………………………

（4.1）获取layui对象的三个子对象：【laydate子对象】，【form子对象】，【$Ajax子对象】

…………………………

（4.2）设置时间范围

关于done: function(value, start, end)中value参数的作用：（其实不是特别清除）：

目前知道的就是可以输出value的值：

console.log(value); //得到日期生成的值，如：2017-08-18

…………………………

（4.3）提交表单

【表单中的数据项的名字】，【后台代码获取表单数据时的参数】需要保持一致：

layui.$.post()：layui内置的jQuery的Ajax函数：向后台发起post请求。可以参考：jQuery中Ajax函数：$.ajax()、$.post()、$.get()的使用、区别；这篇博客；

这部分，还有未结局的部分；这个请假申请提交表单的时候，向后台发起的是一个Ajax请求，这一点有待进一步阐述？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

三：将form.html改为form.ftl：以便能够使用FreeMarker模板引擎：使得【部门】和【申请人】信息变成动态的

如下：

因为：在登录的时候，我们将登录用户的User信息、Employee信息、Department信息、功能节点信息都存储在了Session中：

所以，在form.ftl中我们可以直接获取：这样，form.ftl中的【部门】和【申请人】信息就变成动态的了；

四：页面跳转的设置：即点击【左边功能菜单的“请假申请”】后，会显示form.ftl请假表单的内容

为了实现这个功能，需要做以下几个步骤：

1：第一步：设置【功能的url】

在OA系统七：数据库表设计：RBAC（基于角色的访问控制）介绍与核心表；我们知道，在【RBAC（Role-Based Access Control：基于角色的访问控制）】机制下，任何东西都可以看成是一种资源，功能可以看成是一种资源、文件等可以看成是一种资源，url也可以看成是一种资源；；；；；我们在创建【sys_node：系统功能表】的时候，在【sys_node：系统功能表】中增加了url字段，意思是该功能节点对应的url地址；自然，在当前系统中，功能包括【通知公告】，【请假申请】，【请假审批】；这几个功能需要设置对应的url，几个功能对应的url我们设置如下：

以【请假申请】这个功能为例，当我们点击左侧功能栏的【请假申请】后，跳转的url会是【/forward/form】；

2：第二步：设置【请假申请】的跳转url

其实，我们的请假申请部分已经做好了，那么如何使得点击【请假申请】后（url为/form/form），跳转到请假申请的前端文件form.ftl嘞？

PS：很显然，因为我们把form.ftl挪到了WEB-INF目录下（即form.ftl没有在webApp根目录下），所以我们不能直接在外侧访问form.ftl，只能通过服务器的渲染才能够输出结果；

3：第三步：编写【专门用于页面跳转的“工具Servlet”】，实现向【请假申请的form.ftl的跳转】（这是一种设计的技巧！！！！！）

可以发现，几个功能url都是【/forward/*】这种格式；那么可以设置一个Servlet来统一处理这些功能的跳转；

…………………………

新增一个ForwardServlet：这个Servlet专为显示页面提供服务

ForwardServlet：

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;/*** 页面跳转Servlet;（通用的，不针对特定业务，一个工具servlet）*/
@WebServlet(name = "ForwardServlet",urlPatterns = "/forward/*")
public class ForwardServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String uri = request.getRequestURI();/*** /forward/form* /forward/a/b/b/form*///[/forward/form → forward/form]   [/forward/a/b/b/form → forward/a/b/b/form]String subUri = uri.substring(1);//[forward/form → /form]   [forward/a/b/b/form → /a/b/b/form]String page = subUri.substring(subUri.indexOf("/"));request.getRequestDispatcher(page + ".ftl").forward(request,response);}
}

说明：

（1）url也是用了通配符的形式：即，凡是“/forward/***”的请求，都会被这个Servlet捕获；

（2）ForwardServlet是用于页面跳转，是一个典型的适合处理get请求的Servlet，所以，其中只保留了doGet()方法；

（3）在实际开发中，尤其是对于大型的业务复杂的系统，其前端的ftl文件不可能放在一个目录中，我们往往会按照功能和模块，把这些前端的ftl文件分别存储在不同的目录中；

此时，就已经设置好了；

…………………………

说明：（2021-06-11补充：）

（1）这个/forward/*的ForwardServlet是专门用于页面跳转的，其作用仅仅是让【首页功能区的内嵌页面】显示出来，仅仅显示出来而已；（至于内嵌页面本身自己的一些与后台的请求，则不归这个Servlet管）

（2）LeaveFormServlet中根据url的不同，调用不同的方法的主要作用是：处理内嵌页面本身的一些请求；（即内嵌页面本身自己的一些与后台的请求，是由这个Servlet管理的）

…………………………

五：流程梳理

然后，当我们填写表单，点击提交后：

六：阶段性回顾和总结

（1）在前面已经开发了用户的登录、默认首页功能区的初始化，用户注销；

（2）那么【请假功能】这一块，就是在默认首页（index.ftl）上的操作：其基本结构如下：

（请假表单提交，为什么采用ajax的方式：仅仅是目前的理解，随时修改：）

（1）因为请假表单的提交，存在提交成功和提交失败的情况，而且提交成功后或者提交失败后还需要给出弹窗提示；所以，还用ajax请求，方便前台和后台通过JSON传递数据啦；

（2）因为，点击【请假申请】，请求成功后，或者请假失败后，都是在【功能展示区】发生变化，整个页面依旧是停留在index.ftl的；

（3）最后，ajax补充：前端界面点击后，发出一个请求，这个请求可能成功，可能失败。如果请求失败，就需要留在当前界面，为了能够在请求失败后留在当前界面，其自然要采取ajax请求；否则，如果采取一般的请求方式，其就会彻底跳向一个新的界面，么，如果请求失败时为了留在当前界面，还需要在新的界面跳转会当前界面，这种策论有点蠢啦，，，，不如ajax来的好。

（4）即使ajax请求后要跳转到新页面的话，直接在ajax请求的后台代码中加上请求成功后的跳转url就行了。。。。。然后，如果请求成功的话，在前台文件的ajax请求中获取后台传过来的(或是自己定义的)url，然后跳转就行了：

OA系统十九：请假申请五：【请假申请】这个内嵌页面的前台文件；设置【点击左侧菜单栏的“请假申请”后】在首页的“功能区”显示【请假功能】这个内嵌页面；相关推荐

OA系统十五：请假申请一：【请假申请】这个内嵌界面的数据库设计；（即请假申请这个线型工作流程的数据库设计！）
本篇博客的主要内容是:设计[请假申请]相关的数据表: 目录一:[多级请假审批流程]的数据库设计:分析 1.请假工作流程图 2.工作流程表的设计分析 3.设计约束二:具体表设计 1.leaveFor ...
OA系统十八：请假申请四：【请假申请】这个内嵌界面中【提交请假表单数据】的Controller层；
本篇博客的主要内容是: 本篇博客需要注意的点: (1)一种策略,或称之为一种思想:一个Controller的url设置成通配符的形式,从而实现不同的请求调用不同方法: (2)加深感受下Session这 ...
通过Dapr实现一个简单的基于.net的微服务电商系统(十九)——分布式事务之Saga模式...
目录: 一.通过Dapr实现一个简单的基于.net的微服务电商系统二.通过Dapr实现一个简单的基于.net的微服务电商系统(二)--通讯框架讲解三.通过Dapr实现一个简单的基于.net的微服务 ...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
背景:在对项目进行bug走查的时候,测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新,当时我真的懵了,vue项目了router还能在当前页面进行再次刷新!!!我怀着疑惑上网查询.咨询足足使用了 ...
OA系统十六：请假申请二：【请假申请】这个内嵌界面中【提交请假表单数据】的SQL语句和Dao层；
本篇博客的主要内容是: 本篇博客的主要目的是:创建与"请假流程有关的"[LeaveForm请假单表.ProcessFlow审批任务流程表.Notice消息通知表]三张表的底层的Da ...
怎么在html显示已登录状态,登录成功后，返回时不再显示登录等已经没用的页面...
wap2app适配的时候,常碰到的一个场景就是登录,wap站登录成功后,比较差的体验主要有两个: 1.back依然可以看到登录页,效果很差 2.首页如果有登录入口,返回首页,首页依然显示未登录的状态 ...
【转】pacs定位线_C#开发PACS医学影像处理系统(十五)：Dicom影像交叉定位线算法
转自:https://www.cnblogs.com/Uncle-Joker/p/13686618.html 1.定位线概念:某个方位的影像在另一个方向的影像上的投影相交线,例如横断面(从头到脚的方向 ...
办公OA系统毕业设计论文
摘要随着计算机技术的飞速发展,企业管理的传统方式逐渐将要被电子信息化管理所取代.近几年来,电子信息化是当代非常流行的经营模式,是学校.企业等团体组织最常用的系统,这种电子信息管理系统可以提高管理效 ...
OA系统二：项目介绍：需求介绍；功能展示；
慕课OA系统的[需求介绍]和[功能展示].本篇博客只是做了一个预先说明,没什么复杂内容. 目录 0.项目整体内容介绍 1.需求说明 (1)何为OA系统 (2)需求介绍 2.功能演示 (1)普通员工的操 ...

OA系统十九：请假申请五：【请假申请】这个内嵌页面的前台文件；设置【点击左侧菜单栏的“请假申请”后】在首页的“功能区”显示【请假功能】这个内嵌页面；

一：form.html：请假的前台页面

二：form.html分析和说明：

（1）需要修改的地方：form.html中引入layui的地方需要修改下

（2）引入SweetAlert弹出框js组件：让处理成功（或处理失败）时的弹出框更加美观

（3）form.html代码结构分析：静态HTML部分

（3.1）引入layui的css

（3.2）定义类来修饰【请假表单】在网页上的位置

（3.3）表单放在了一个div容器中

（3.4）表单第一项：部门

（3.5）表单第二项：申请人

（3.6）表单第三项：请假类型

（3.7）表单第四项：请假时长

（3.8）表单第五项：请假原因

（3.9）表单第六项：提价按钮

（4）form.html代码结构分析：JavaScript代码部分

（4.1）获取layui对象的三个子对象：【laydate子对象】，【form子对象】，【$Ajax子对象】

（4.2）设置时间范围

（4.3）提交表单

三：将form.html改为form.ftl：以便能够使用FreeMarker模板引擎：使得【部门】和【申请人】信息变成动态的

四：页面跳转的设置：即点击【左边功能菜单的“请假申请”】后，会显示form.ftl请假表单的内容

1：第一步：设置【功能的url】

2：第二步：设置【请假申请】的跳转url

3：第三步：编写【专门用于页面跳转的“工具Servlet”】，实现向【请假申请的form.ftl的跳转】（这是一种设计的技巧！！！！！）

说明：（2021-06-11补充：）

五：流程梳理

六：阶段性回顾和总结

OA系统十九：请假申请五：【请假申请】这个内嵌页面的前台文件；设置【点击左侧菜单栏的“请假申请”后】在首页的“功能区”显示【请假功能】这个内嵌页面；相关推荐

最新文章

热门文章