00:01
我们刚才把这个新增弹出的模态框啊做好了,部门信息查询也放在这儿了,那我们接下来就来点完成点击保存添加员工的方法。好,那么呢,我们来在这一块,我们先来看这个保存按钮。保存按钮,我们在模态框中有这个保存按钮,当我们点击这个保存按钮以后,来我们就来发HS请求,保存人工数据,好,我们把这个按钮来给它,给一个ID,比如呢,我们就叫epc。把它。员工的这个保存按钮,好,我们来为他绑定,单击事件。哎,我们都做成HX的,所以说呢,为它绑定。单击事件,当他点击以后。当他点击以后,当他点击以后呢,我们就应该是将我们这个模态框中咱们这个填写的。
01:07
啊,表单数据。提交给咱们这个服务器进行保存。进行保存比就说呢,我们假设服务器employee controller中有一个员工保存方法,好我们来定义一个员工保存方法,那么这些呢,全是基于as的,那我们来定义一个返回message对象,好,Message里边就会包装保存成功还是失败啊,好,然后呢,我们就叫save EP。Return。让他来处理我们这个请求。额外的呢,我们来注意一下,我们从现在来开始就来规定这个请求。这个请求呢,因为我们是咱们这个rest风格的uri,所以说我们来看啊,新增我们在这一块,我们来现在就来开始规定我们这个uri。
02:07
U,如果呢?我们这么发E。我们来发E请求,但是呢,如果我发的是get。哎,我带上员工的ID。如果发的是get请求,那就是查询啊,咱们员工查询咱们这个员工的查询ID,围棋的咱们这个员工,如果我发的是EP请求,但是呢,我发的是post请求,那我就是保存员工。如果我发的是EP请求,而我发的比如呢,我带上员工ID。我发的是put请求,那么呢,我们就是修改咱们这个员工,哎,我修改哪个员工。啊。如果呢,我们再来看EP,我带上咱们这个员工ID,如果我发的是的请求,那么呢,我们就是删除员工,所以说呢,在请求咱们这个uri上,我们都是基本上一样,都是杠emp请求,只不过呢,我们请求方式不同,哎,我们就完成不同的咱们这个操作。
03:20
好,我们就来把这个方法来规定一下,好,它处理EP请求,但是呢,他的这个请求方式,因为这是一个员工保存规定,它的method,哎,只有是post形式的请求才行,Request method,第2POST。好,那么这个呢,我们来定义员工保存。员工保存。好,同样我们这个返回结算数据response。好,员工保存,我们在这一块呢,只需要一个非常简单的employee对象,哎,因为我们页面提交过来的KY6这些K跟employee对象里面的属性一模一样,我们这么直接来写它自动封装employee对象,那么呢,我们只需要在这里边调用employee service,哎。
04:11
他的这个员工保存方法假设呢,我们有一个叫cep的方法。好,我们传入employee对象这个方法呢,帮我们保存员工,好我这一块啊,创建这个方法。这个方法呢,就是咱们这个员工保存方法。员工保存好,这个员工保存呢,我们调用employee member。这个保存呢,我们来看啊,有一个insert,这个insert跟insert select selective咱们之前看过了,这个selective是有选择的插入,就说呢,因为我们这个员工的ID是自增的,所以说呢,这个insert它是连ID都要插入,我们就用这个方法。好,Employ对象,那么我们带的值让它插入就行了,好。
05:00
保存,我们定义完来到employee control中,好,这个保存成功了以后呢,我们就message它返回成功success就行了。这样的话呢,我们一个简单的保存就写好了。接下来呢,我们就来到咱们这个啊首页来在这一块,当我们点击保存按钮以后,我们应该发送as请求保存员工。咱们就要发送。发送咱们这个Ajax。请求保存我们这些员工。好。到点Ajax。好,请求的URL地址就是我们刚才写的这个方法APP。Past,好,我们刚才写了一个叫E的这个方法,但是呢,我们规定请求类型必须是post,好,然后呢,请求数据。这一块的关键这个数据,数据呢,就是我们填写的,我们。
06:05
这个模态框我们来看啊模态框。哎,我们员工添加的模态框在这儿,这个模态框这个form表单里边的啊,这些我们填写的这些啊QY6。而这些数据呢,我们可以通过GS拿到每一项的值,我们来拼装成我们要,呃,咱们这个提交给服务器的数据,那这样就太麻烦了。而我们杰克瑞呢,为我们提供,哎,之前。有一个咱们这简单的把表单里边的数据拿出来的办法。哎,就是这个C方法,那么这个方法呢,它能叫序列化表格中的内容为字符串,而序列化的这个字符串它是用于AJS请求的,所以说呢,我们可以先来看一下。如果调用这个方法,表单字符是什么样?
07:00
我们就来找到这个表单,到好,这个表单呢,就是我们员工添加的模态框EP and model。井号。它里边的这个form表单,因为它只有一个form表单,好,我们就这把这个form表单呢,我们来给它序列化。序列化的内容。好,序列化的,咱们最终结果我可以alert一下,咱们来给大家看。好,我们来看一下,当我们点保存以后,序列化的结果是什么呢?走。我们来到这个页面,好,我重新来刷新这个页面。我们来看服务器,好,服务器正在启动刷新这个页面,当我点击新增,好,我来输入一些数数据,比如呢,咱们这个to k,诶email就叫123qq.com,好,然后呢,我们来选一个女开发部,测试部,我点保存,哎,大家来看alert的数据。
08:02
哎,就是咱们这个K等于Y6AND k等于Y6,哎,这些呢,就是直接要提交给服务器的数据,所以说没问题,我们拿它来快捷操作。好,这一串呢,哎,我们来注意一下,这就是提取我们要提交的这个数据,我把这个AJS请求我们来重新写。好,这个要发送给服务器的数据,就是我们这个数据,这条数据。表格序列化后的数据,那么发送成功以后,我们来success。好,来写一个result。Result,当我们请求成功以后,我们来可以alert一下,我们提示用户是保存成功呢还是失败呢?来result,因为服务器给我们返回会有咱们这个message信息,我们来看。把这个呢,我们来基本写上,写上以后我来。
09:01
重新测试来刷新。好,这个新增模态框就弹出来了,来,我们来写一个,比如呢,我们就叫Tom cat,哎,我们就叫to cat and硅谷。点com好,我们来选一个女,选了一个测试部,我点保存,哎,处理成功。你看啊,我们这一块处理成功了,但是我们逻辑没做完,处理成功以后呢,应该这个对话框关闭,这是第一点。第二点呢,处理成功以后,我们应该来到最后一页,我们来看这个添加好的数据,所以说呢,这两处我们得来做出来。当我们这个员工保存成功。员工保存。成功,我们需要做两个工作,第一个工作就是什么呢?啊,关闭。那么这个模态框。第二个工作就是呢,来到咱们这个最后一页,最后一页来啊,来到咱们这个最后一页,然后呢,显示刚才。
10:09
八寸的数据。就是它,所以说呢,我们想做这个活,那么要做这个活呢,也非常简单,关闭模态框,我们来到咱们这个。中来看咱们这个模态框的关闭javascript插件。模态框啊,方法我们来看啊,它这呢是受显示模态框,这儿就是关闭模态框,把模态框的ID传过来,调用model head就行了。那也非常简单。关闭模态框。调用。TD隐藏模态框呢,就是我们这个。第一个哎,我们就做完了,那么第二个我们这个呢,还要来到最后一页显示刚才的数据。关键这一块呢,还有些问题,我来到最后一页,我怎么知道最后一页是第几页呢?比如看啊,我们现在啊是两条记录,如果正好我们这一页恰好有五条记录,我一添加,那么现在是总页码201,我们的总页码应该就变成202了,所以说这个页码挺不确定的。
11:20
那么这样怎么办呢?啊,其实也非常简单,因为我们这个分页插件,它会把一个大于总页码的,咱们这个页码给我们查出总是最后一页的数据,所以说呢,我们让他,哎在这一块。当我们关闭模态框以后,我们还是发送Ajax请求。请求,那么这显示最后一页数据。数据即可,那么这个最后一页数据啊,那我们就直接啊,我们这个AJS请求显示数据,就是调这个图配置方法,然后最后一页呢,你传一个非常大的数字它就行了,哎,只要呢啊超过总页码就行了啊,比如你传一个999都行,哎,你要觉得这个数字不保险啊,这肯定是成的,但是万一我的页码都大于999了呢,所以说呢,还有一种解决办法。
12:14
也就是说呢,我们这个。可以将咱们这个总记录数,我们当做页码啊,这总行了吧,所以说呢,我们来看刚才啊,那这个分页显示数据的时候。这是咱们这个封页,封页拿到咱们这个result会在这进行数据展示,我们可以呢,哎,全局定义一个变量来保存我们这个总记录数比呢,就叫total。啊,比如说呢,我们在这一块呢,保存一下总计录数,我们以后拿总计录数,要想去最后一页,我们拿总计录数当做总页数。这个总计录数呢,我们就在咱们这显示员工数据的时候,诶,显示风险信息的时候,那么这一块呢,哎,有咱们这个总计录数啊,把分险信息显示出来,我们给全局的总计录数也分个值。
13:05
好,CTRLCCTRLV。好,然后呢,我们接下来,接下来我们来看啊,在这一块我们就不去999了,我们去咱们这个总计录数,我叫偷偷啊。Total。好,我们这个总记录数肯定比咱们这个总页码大好,那么呢,我们接下来来尝试一下行不行。来刷新。啊。我要点新增,我来查保存一个in,然后呢,123123AT,咱们这个比如就叫qq.com好女,我们来整一个测试部,我点保存,哎,我们来看来到最后一页了,我们发的这个请求呢,我们也可以监控到他发的这个页码是一个总记录数,比如说我们再来行增。这个A等AAA好,我点保存我们来看。好,这个EP请求,这是我们员工保存,你看这个配置number,它确实要1003,这个1003是咱们这个啊,刚才的这个总记录数啊,这样处理呢就完成了,那我们这个呢。
14:13
员工的新增就基本完成了。基本完成的意思是什么呢?你看我们现在的逻辑啊,我们说这个员工姓名一定要做校验的啊,总不能乱传一些,比如呢,我们刚才这个adin啊,保存的时候,我再传一个adin再保存一遍啊呢,这就是一个非法的,包括呢,我们这个员工的姓名,我们都是有格式要求的,所以说呢,我们接下来把校验功能完成即可。
我来说两句