4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/28-尚硅谷-云尚办公系统-角色管理前端-添加.mp4原创

下面呢，我们开始实现角色的添加功能，添加功能怎么实现，给各位做个说明，大家看啊，我们现在在的列表页面里边，一会儿咱们在里边加上一个添加按钮，当我点添加按钮之后，怎么做，让他来弹出一个框，或者说弹出一个层，在弹框里边咱们加上表单，输入角色的信息，包括名称，包括编码，点确定，把数据加到数据库，并且关闭弹框，刷新页面，这是我们要做的事情，就是通过一个弹框进行实现，那这个具体怎么做，咱们来做一个详细的编写。那咱们来看一下啊，首先我们先在页面中加上一个添加的按钮，这按钮我从课件中直接复制一下，用的是UI中这个e button组件，大家看这里边有一个添加的按钮，咱们把这个复制，然后在列表页面中给它加上。我们来加一下啊，咱们把它呢，就加到我们的这个位置。

我们找到啊，他就放到这里边。啊，也是我们的搜索重置到后面或者放到前面啊都可以，咱就加一个地方就可以了，我就给它加到这个表格这个位置了，啊放到这个位置。加上一个添加按钮，然后加上之后大家看啊，在这里边我要实现，当我点添加它是要弹个框啊，添加里边呢，我有一个方法叫A的方法，所以我们在里边加上一个A的方法写位置。就是点击添加弹出一个框，或者说弹出一个层，这方法中就来做这个事情，那弹框怎么做？我们继续往下整合，咱们在页面中加上这一段代码，用的是叫e dialo，一个对话框，通过UI中这个对话框来实现弹框的效果。

我们把它放到页面中，这个位置无所谓，只要你放到div中就可以了，我就加到这里。然后大家看啊，EL里的个属性，然后里有个我强调这个值等于它就会弹出这个框，它等于false就不会弹出，通过它进行控制，所以我在里边加上一个初始值等于false，就是是否弹框。我写到这个位置啊，是否。弹框，那咱们弹框怎么做，让这个值等于处是不是就可以了，所以我写到这个位置。点dialo visible等于处，它就会弹出这么一个框，这个咱们就实现，然后实现之后我们继续往下来做啊，因为咱要弹框嘛，大家看在弹里面有一个表单，表单里边呢，用双向绑定，我们要取到这个里边的值，所以咱们加上一个对象用于接收这个值，我写到这位置。

啊，咱们就加上一个空的对象用于。封装表单中角色的数据啊，放到这里就可以了，然后之后咱们再来看啊，在这个yellow Di里边还有一个地方，各位看这个位置啊，咱们找一下啊，应该在里边有这么一个地方。我们来看一下啊。啊，就是在啊在这里啊，大家看这位置啊，这是什么意思呢？你看啊，比如现在我弹个框，我现在不想添加了，然后我点取消，点取消之后在这里边我加一个dialosible，等于false，它就会关闭弹，所以以上咱们把这个页面部分就整合出来了，整合之后我们先看一下效果，然后咱们再进一步往下编写，现在我们来来到这里边看一下啊，首先我点击添加。

大家看是不是弹过框了，在弹框里边咱们输入相关的内容，点确定，调接口加到数据库，点取消，那就关闭弹框，所以现在我们就这么来实现啊，当然你可以把这添啊放到这个搜索重置一起，我就这么来放了，咱看的更明确，你正常应该放它后面或者放到它前面，也就你写到这个同一个div中应该就可以了，我是故意写到外边，或者各位看的更加明确啊。然后咱们现在这个基本结构完成，完成之后我们继续往下写，首先按照咱刚才说到的，在system里边把接口咱们先做一个定义。角色添加。我给它起个名字就叫。就是添加角色或者保存角色，然后在里边呢入这个对象啊，这个肉下面呢，加上你这个结构，在结构中第一部分加上添加的路径，我们到这个接口中复制一下啊，它就叫C。

这个是路径用的提交方式是post提交，并且他用的是request body。这里给它改一下啊，Post request body，我们刚才提到了request body表示用Jason格式传递，所以咱加个date，加个它就会把这转成get格式给我们传过去，所以现在这部分就完成，完成之后来到页面中，在页面中呢，来到这个dialo里边，当我信息之后，包括你的名称啊，包括编码，然后咱们点确定，点确定之后它会调这个方法。Update里边行，那下面下这个update这个方法。这位置啊，其实这个方法有个特点啊，一会要做修改，修改也可以点这个按钮进行实现，所以我这么来做，我写一个。

作为咱们的添加方法。然后下面呢，再写一个update，暂时没做到，一会会实现这个作为我们的修改方法。啊，修改。然后最终在这里边做统一的调用。就update中做添加或者修改。那大家想一下啊，比如说我现在同样都是一个弹框，我们可能是添加，也可能是修改，那大家想咱们怎么判断我是添加还是修改，这个怎么做到。你说怎么判断？大家想一下怎么知道添加还是修改啊，其实很简单，咱们看一下啊，就是我们这个对象里边，如果说里边有ID值是不是就修改，没有ID值是不是就添加，咱就根据是否有ID值做判断，没有的话就是你的添加，有的话那就是修改啊，所以咱们最终把这个做个实现，我这里写下啊。

这位置。根据ID进行判断，如果说这次啊，咱应该叫啊，它里面就是没有ID值，那咱们做添加这次点C。添加，如果说里边有I地址，我们加上一个。那我们做修改，这次点update。这是我们做到的啊，这里加个注释，这是添加。这个是修改。然后在添加里边咱们调接口实现用API中刚才我写的方法。传入咱们的参数。然后加上一个点啊，加上response箭头函数，最终得到结果，添加之后咱们做什么呢？

大家想一下，其实很简单，添加之后点确定是不是关闭弹框刷新页面，就是这两个事情，关闭弹框呢，那让这个值等于false，刷新页面那就是调用的方法，或者说你再来一个友好性的提示，提示用户说这个操作成功就可以了。好，我这里快速写一下啊，首先我先加个。提示就是操作成功。然后第二个。我们在里边来。关闭弹框，这次点dialo值等于false。第三个刷新页面，我们调一下这个方法就可以了。所以以上这个过程咱们就完成了，添加角色的实现，这咱们就讲这里啊，所以大家把这过程要特别的清楚啊，属于我们潜能中最基础的部分。

然后这个之后，最后呢，咱把效果试一下，看一下最终结果怎么样。啊，这里为了明确，因为我每页就是一条记录啊，这个有很多页在外，稍微改一下，我让每页显示。三条记录。稍微多点啊，就看的更方便点。刷新。你看现在有两页，这是第一页，这是第二页，目前我有就是四条记录，现在我点添加，点添加就是这个页面，然后在里面输入角色名称，我们就叫test。啊，就叫T这个零一。然后编码，我也叫这个test的，为了测试啊，最后点确定。大家看，即使我们成功啊，然后咱看数据，因为咱没做那排序，但是你可以根据时间做个排序啊，然后咱们看这里边最终这值是不是做了显示，所以现在咱把它就最终完成了，这就完成了添加角色的部分。

当然这个完成之后呢，大家发现啊，目前我这个里边有一个小问题，各位仔细看啊，你发现啊，这时间是没有显示，那咱看一下什么问题啊，这咱们快速解决一下，因为刚才没有特别注意这一点啊，这时间确实没有显示出来，别的值都有，咱们看一下就直接看前端里边啊，大家看在前端中，我们这里边有角色名称，角色编码，创建时间，然后这prop加上你的属性名称。啊，大家看到问题了吧，啊，这问题有一个。很低端的一个问题啊，我这个字母写错了，应该写上prod，我加了一个pro啊，我加了一个这写错了，这个注意一下啊，给它改过来，然后咱给它保存到页面中，我们再刷新看一下时间是不是有了啊，这就可以了，所以以上完成了添加角色的。