51-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色添加

各位同学大家好，刚才呢咱们完成了角色的删除功能，下面呢，我们继续实现角色的添加修改以及批量删除功能，首先我们先完成添加功能，添加功能怎么做，给各位同学先做个分析，然后咱们进行实现，那我首先在图里边给大家画一下咱们该怎么去做。这里边我来写一下。首先我们的第一部分咱们做添加，那我在页面上先加入一个添加的按钮。加完按钮之后，大家想一下啊，添加要怎么做，添加是不是有一个表单要，所以我们这么来实现，当我现在。点击添加按钮，咱们让他怎么做，就是弹出一个框，在弹框里边进行实现，这是我们目前的做法，也就是说你现在点添加之后。

然后在页面上我们弹出一个框，在弹框里边呢，咱们有这个表单的部分，在表单里边我简单写一下，因为咱们加的是角色，那咱们有。角色的名称。角色的编码等内容，然后在里边我们填写信息，最后咱们点击一个保存按钮，那就把这个数据最终加到数据库。所以以上是咱们分析的一个基本过程，弹框填写表单信息，最后点保存加到数据库，这是咱们基本分析，那分析之后下面呢，咱们开始实现前端功能，首先第一部分跟之前一样，在肉点JS里边把添加的接口我们做一个定义，我快速写下添加。参考之前的这个方法，咱们快速做个修改。

添加呢，我们起个名字就叫这个。肉就是添加角色，然后添加的时候呢，它需要的参数肯定是一个角色的对象，我们起个名字叫肉，然后写完之后下面改它的其他信息，首先我们改一下添加的路径，到接口中看一下添加的名字叫C，那我把这里边快速改一下，然后第二部分添加用的是post提交，这里改成post的，但是特别注意啊，第三部分。我们看啊，接口里边的传入数据用的是什么？是不是request body request body，咱们说过通过Jason格式传递，把Jason格式数据封装到对象中去，所以这里边我特别说明啊，就是如果说啊，你要传递的是Jason格式数据，然后在里边怎么做，你就不要写para了，加上另外一个属性名字叫date，然后加上你的对象的名字，这就表示通过Jason形式传递数据。

这个是前端的写法，如果说你不是data形式，那还是之前这个para，也就是说啊，我接口里边呢，如果说不加底，那我们前端传的是para，加上之后加的就是date，注意啊，名字不要写错data，然后对象名字是里边那个肉，现在接口咱们就完成了定义。接口完成定义之后呢，下面我们来到页面中，在页面中呢，首先在date中我们先定一个初始值，因为一会儿咱要得到表单的数据，所以咱们给它起个名字，我就叫system肉，先来一个空的对象，为了一会儿我们操作。我写下封装添加表单的数据。

初始值写完之后，下面呢，我们按照刚才分析的部分，在页面中加上一个添加的按钮，这个按钮用IUI中的组件，那咱们从这个课件中，我们直接找到这个按钮，从里边直接复制过来，咱们快速找一下，就是在这个位置。加上一个div，然后我把它放到我的表格的下边，就放到这个位置。当然你把它也可以放到表格的上面都可以啊，我就放到上面吧，下面也一样啊，咱放到这个位置，然后各位看，在里边有个按钮，这按钮做的就是添加，然后在添加里边绑定世界，它会调用里边的A的方法，那咱们看一下页面中的效果，我把页面刷新，大家看这位置是不是有一个添加按钮，这个我们就做到了。然后做到之后呢，大家看我课件里边啊，这个位置呢，有一个样式，咱们把样式给它也加一下，这个样式加到哪里呢？再看它的位置啊，咱加到这个地方，各位看这个目录。

Public中有一个叫index.html，在里边我们加上这个style，就是加上它这个样式部分，这表示就是公共这个部分，那我们最终看效果，你看啊，里面就多了一个是一个边框的，这个效果就看起来更加的美观一点，所以现在按钮做了添加，按钮加上之后，下面呢，咱要实现点添加，是不是要做一个弹框的效果，那弹框怎么做，咱们通过IUI里边来找一下这个弹框，那我们到里边找一下啊。首先咱们看啊，这里边呢，有很多的内容，大家找到这个叫dialo对话框，然后在dialo里边呢，咱们找一个弹框，比如说大家看啊，这些是不是都是弹框的效果，是不是都是弹框，然后这个弹框怎么做的呢？咱们来看一下源码中它的实现。

各位看里边啊，用EL dial，然后里边有一个叫ible sy，里边有个强调啊，这个值如果是触，它就会弹框，如果它是false，那它就不弹框，所以咱们也可以这么做，把这值改成触就可以弹框，这是一个弹框部分，而弹框大家来到课件中，我这里已经写好了，咱们把它直接复制一下，这部分演dilo，然后里边有个值，这只等于true，就弹框，等于false，不弹框，然后在弹框里边我加了一个表单，为了咱们后面能做角色的添加，现在这部分直接复制一下。因为它是弹框的部分，所以其实放到位置无所谓，我就放到我这个分页下边了，只要你放到div中应该都可以，因为它是在里边是弹框的效果，现在这部分完成，完成之后呢，咱需要加上一个初始值，就是这个值。

我把这个拿到下边，咱们初始值先写上一个叫false加个注释表示弹出那个。框的这么一个效果。这个冒号啊，应该是英文输入法的冒号。所以以上咱们就把这部分完成了，然后大家看啊，它的表单里边也是用到这个双向绑定v model，通过SYS肉它的名称和编码，最终做这个封装，包括大家看我们的名字跟它应该是保持一致的，现在这个页面部分我们就准备好了，然后咱们看一下这个效果怎么样，大家看啊，我现在点添加，然后咱看它里边效果，咱们发现啊，点添加之后呢，这里边是不是应该弹个框了，而这个弹框点添加之后应该是触发事件，让咱们刚才说这值等于处是不是就可以了，那咱们继续写下，找到添加按钮，在找到啊，应该在我们的。

上面这个位置刚才咱们刚复制过，在这里里边有个方法叫A的，那下面咱们写下这个A的方法，我写到这里注释我写的详细点啊，点击添加，它会弹出这么一个框，方法名字叫A的。把这个咱们完成，做法很简单，这次点这个叫dialo visible，这个值等于处就会弹框。然后弹框之后呢，因为咱们要新加这个数据，所以第一次谈这数据肯定是等于空的，所以咱给他做一个清空，因为为了防止后面问题，比如你之前加过里边可能数据没有清空，所以咱每次弹框把数据清空一下，为了咱能够加入最新的内容，这就是弹框的实现，现在我们就完成了，完成之后最终的效果咱们试一下啊，大家注意看现在添加是不是弹框在里边，我能输入名称，输入编码，点确定，肯定会加到数据库，所以现在这部分我们就做到了。当然咱们后面修改功能也通过这个弹框进行实现，比如修改的时候肯定做数据回显，最终修改，现在啊，咱们就完成了第一部分，然后下面做的是什么呢？输入数据，点确定，最终调用接口，把数据可以加到数据库中。

那下面呢，咱们开始写这个确定这个方法，我到里边找一下，确定呢，是在这个位置，就是里边这个CZ的方法，咱们写到下边。

这个位置。点击确定它最终的实现。然后各位注意这个方法的名字什么意思，添加或者修改，比如咱后面啊，这个确定要做添加，还要做修改，所以在下面我们这么来做，咱们把添加修改方法单独小下边，然后在里边做个判断，最终就实现，那这里边我先写一个添加的方法，添加起个名字就叫save。或者说写的更完整点啊，叫C肉，然后在save肉里边，咱们现在我们来调用接口方法，A片里边，刚才我们写的添加这个拿过来，然后添加呢，肯定是用到我们那个对象SYS。

加上这个点赞，然后加上response箭头函数，这是一个添加的调用，调用完添加之后咱们干什么？各位应该能想到，第一个咱是不是要提这个信息，告诉用户添加成功，第二个关闭弹框，然后第三个那就是刷新页面，主要有三步，我这里写一下啊，第一个提示第二个。关闭弹框，第三个刷新页面，那我们写一下啊，第一个提示之前咱们删除之后用过，那我把这个复制咱们快速改一下，因为跟它基本一致，咱就改成叫添加成功，这是第一个我们做一个提示。然后第二个呢，关闭弹框，那就是加上this，点这个刚才咱们这个属性，咱们找一下这个叫dialogue visible，把这个值改成处就可以了，这是我们的第二部分啊，改成false，就是它关闭弹框处是打开弹框，然后第三个刷新页面，调用咱们的方法，就是那个叫fech did的方法，这样的话就会刷新页面。

以上添加就完成了，完成之后呢，在这里边我们做一个调用，直接就调这个方法做到的就是添加，但是这里边啊有个问题，刚才我们也提到了，这个方法呢，既能做添加也能做修改，所以咱们需要做个判断。添加还是修改，那大家跟我一起想象啊，咱们怎么判断它是添加还是修改，比如说我现在在这个页面中怎么判断点确定是添加还是修改，大家想一下这个该怎么做，这里边强调啊，各位看这个对象，如果说啊，你做添加这个里边是不是应该是没有ID址，如果有ID值，那咱们做的是不是就修改得根据I地址判断就可以了，我这里啊写一下。

首先第一个这次点SYS肉，点上ID，就是它里边如果说没有ID，那咱们做的就是添加，那我就调这个方法。如果说呢，里边有I地址，加上一个else。那他做的就是。修改方法，这个修改方法咱们先创建出来，一会儿我们再进行实现。这个我先写出来啊，这个是修改的方法。所以以上我们就是把这个添加功能和咱们就最终实现出来了，就是里边的这么一个结构。

咱们把这功能呢，再做一个分析，再把过程再看一遍，然后最终我们再做个测试，那我们看一遍啊，首先第一步我们加上一个按钮，就是在这个位置这里。添加点添加掉A的方法，A的方法中呢，咱们是在这个位置，大家看到就是在这里。做法就是把表单清空，然后弹出个框，弹框咱们用这个IUI中这个组件叫EDIO，当这值等于处就弹框，当它等于falsex就不弹框，然后弹框之后用双向绑定绑定你的数据，最后我们点确定，就是在这个位置确定的时候呢，调save o update做添加，添加的时候做了一个判断，如果说对象中没有ID添加，有ID就修改添加方法，咱们调接口进行实现，添加之后提示信息关闭弹框，并且刷新页面，修改方法咱们一会儿进行实现，所以说以上就是角色的添加功能，前端的实现，这个我们就完成了，完成之后呢，最后咱们把效果就是最终来试一下，看一下它最后的效果到底是怎么样。

好，那咱们最后把这功能我们来测试一下。来到我们这个页面中，首先大家看啊，我点添加弹个框，然后在里边我先输入角色的名称，咱就做个测试了，就是test角色名称添加，然后里边编码，我随便写一个at硅谷，现在点确定，大家看效果确定。

我们看啊，提示我们是不成功，然后咱们看在页面中显示了我们这个内容，刚才加的是不是这个数据，包括咱到表里边看一下，大家看这个值是不是加进来了，所以以上我们就完成了角色的添加功能，前端里边通过弹框，通过这个过程咱们做了一个实验。