50-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色删除

各位同学大家好，刚才呢，我们完成了角色列表功能，下面呢，我们来实现角色的删除功能，那咱们开始进行实现。首先第一部分我们在前端的这个肉点JS里边，把删除的接口咱们先进行定义，我在里边给各位快速写一下。角色的删除功能。然后删除呢，咱们就参考这个接口，把它快速做定义，我给删除的方法起一个名字，这个名字我们就称为remove ID，根据ID进行删除，里边传入参数ID，然后传完之后下面加上接口的路径，接口路径我到接口中来复制一下传ID，它是底delete提交。咱们来写一下，然后ID呢，跟之前一样，通过表达式模板字符串来取到，它是比delete提交，注意这个不要写错，另外它没有其他参数，这一部分我们就需要去掉了，因为它只有这个ID值，所以现在接口就完成了定义，这是我们的第一部分。

然后这个之后下面呢，我们来到页面中，咱在页面中看一下啊，页面的这个位置是不是有一个删除按钮，那咱们找到这个按钮，大家看应该是在这里边。我把这个调到大一点，咱们看一下啊，这个位置有两个按钮，第一个按钮就是咱们说这个修改，然后第二个是删除，咱们先看删除，删除里边呢，掉了一个方法，这个方法。Remove date BYD，然后里边串IDID的这个传的方式给各位特别说明一下啊，大家看这写法，第一个是不是叫scope呀，就是这个scope什么意思呢？大家可以理解为它就代表咱们整个的这个表格，整个表格就是一个scope，然后咱们再来看scope里边点上什么肉，就是每一行，然后ID，它就表示得到咱们每行的ID，比如说我第一行，那把第一行ID得到转到方法中，我的第二行得到第二行的ID转到方法中，所以现在在方法里边有我们的。

角色的ID值，那下面呢，咱们在里边把方法做一个创建。删除角色remove data ID里边传入ID值，然后在里边咱们调用接口来做一个删除，咱们来调用一下名字叫API。咱们写一下啊，A片点上刚才我写的方法ID。传入ID值，然后加上一个点Z，里边加上response箭头函数。

所以各位同学看啊，现在这个过程应该就完成了，而我删除之后要干什么，咱们是不是要刷新页面，就是调这个方法，让他再重新查一次，得到你说完之后的最新的数据，这是我们一个最基本的实现，但是我强调啊，各位同学应该都知道这个特点，咱们实际中呢，应该各位同学见过很多的删除，而删除我们要怎么去做？各位应该知道我点删除并不是马上删吧，它应该怎么样，是不是要弹个框提示我们说是否删除，点确定删，点取消，咱是不是不删，所以咱目前也这么做，点删除按钮，让他弹个框，弹框里面有提示点确定删，点取消不删，加上一个确认框的效果。然后怎么做，咱们还是找一下UI中的组件，看有没有这个弹框的效果，咱们往下找。

大家看这个位置。有一个叫消息提示，这应该不是，然后有一个弹框，弹框里边大家看这个叫确认消息，咱们看它的效果，大家看是不是就这样子点确定咱要删除，点取消咱肯定就不删，所以咱用这个弹框进实现，那这弹框呢，我把源码从里边复制一下，然后咱们在前段中改成我们的效果，那咱们直接复制一下。然后注意啊，复制别复制错，它前面有三个括号，然后咱们去掉三个括号，就是中间的这个位置，我把这个直接咱们复制到我这个方法中来，直接拿过来，这是那个弹框的这个效果。复制之后我们在里边看一下啊，首先第一个它有一个提示说此操作将删除这个角色，咱改一个提示是否继续确定取消，我这里说明啊，当你点确定在这个MUI中封装好了，确定之后它就行Z方法，取消之后执行开方法，但是呢，我们在点取消的时候，其实我们不需要做这个提示，就是这个意思，大家看啊，我点确定肯定是删除成功，点取消不需要提示这个吧，说已经取消，所以咱们直接就把这cash就去掉了，因为取消的时候不需要提示直接去掉，然后在里边怎么做，看这个啊，当我点确定执行Z方法，在Z方法中，那咱们就可以调用我们的方法进行删除，而调方法删的过程就是刚才这个代码，我把这个代码咱们直接拿过来，调用API中的ID。

根据ID删除，删除之后咱们这里边做两个事情，第一个给他做一个提示。

就是提示它申入成功，而提示信息就是这段话，UI中封装的这么一个弹框的提示，就这个，然后提示之后我们再刷新页面。刷新页面，而刷新页面就是调用我们查询所有。这个方法叫。Fetch date，我把这个直接复制过来。所以各位看啊，现在删除功能我们就最终实验出来了，这个代码我们再检查一遍，然后最终做个测试，我们的做法就是第一步在肉点宅中把删除的接口完成了定义，注意路径不要写错，注意提交方式不要写错，Delete。写完之后，在页面中我们加上了一个按钮，就是删除按钮，里边传入删除的角色ID，在方法中咱们先弹个框，点确定掉API中的方法进行删除，删除之后提示信息刷新页面，如果取消，那我们就什么都不需要做，确定才进行删除。以上就是删除功能的实现，这个我们就写到这里。

然后最后呢，咱们把效果试一下，看一下最终的结果，咱们测试大家看啊，目前我一共有几条记录，是不是九条，我现在比如说啊，我把这个就是测试角色这个删掉，咱们点删除，大家看效果啊，各位仔细看怎么样，是不是弹框点取消，什么都不做，然后我现在点确定。看怎么样题说我们是不是叫失败呀，那咱看啊是哪里写错了，咱把问题来排查一下，到底是哪里问题，首先啊，咱们打开这个ID，我们看里边啊，这里边没有错误的提示，证明这部分应该是没写错，那咱们把这个浏览器的F12点开，看他到底报了什么错啊，大家看啊，这里边就报了这个错误，然后咱们看啊，应该还是前端哪里写的不对啊，咱们快速检查一下啊，找到前端的代码中。

我们检查一遍，看哪步写的不对，那咱们来看啊，首先我们弹个框，然后调接口方法，如果成功，咱们提示并且刷新页面，我们这么看发现好像是没有问题，那这里边它删除还是失败，怎么做呢？咱这么来解决，通过debug方式来调试一下，看到底是哪步出了错误，那现在啊，我们debug调试一下，首先啊，当前的项目我先用debug方式启动起来，启动之后我在里边加上断点，咱们做个调试，看到底是哪里出的错。等它启动，然后咱们调试一下。

现在已经启动了，然后咱们试一下，我在里边呢，先刷新页面，刷新之后点击这个删除按钮，咱会弹个框，然后点确定，大家看是不是进入了，然后进入之后大家看啊，首先第一个得到了我们这个ID值，大家看啊，这里边问题就出来了，咱ID值咱就记后四位叫6600，当然咱们看一下我的表里边的ID值，到里边咱们找一下。咱发现啊。好像没有6600，咱们刚才删的是不是应该是这个，他的后四位是6593，所以咱发现问题了，也就是说我得的ID值跟数据库里面值是不一样的，所以这里边你看往下一测试，这个值是false，它肯定是失败的，这肯定是不对的，所以目前它是删除失败了，比如说提示我们咱也看到了，就是这个失败，那现在这个怎么解决呢？咱们先验证一下前端，前端里边呢，我这么来做一种最原始方式alert，咱们弹出一下这itd值，看这个值对不对，如果这个值没有问题，那就是咱们后端的错误。

咱们看一下啊，点按钮，大家看里边这个值啊，我先刷新一下。把这个啊，先给它挪过去，然后咱们刷新，我们看啊，这个值是不是也是600，所以说现在证明问题来了，就是因为我这个ID值不对，在前端传的就不对，到接口中它也出错了，那这值为什么会这样，下面给大家来说明这个问题，目前这个代码总体上没发现问题，但是问题咱看到了ID值前端传过来的跟数据库就不一样，所以这个值肯定是删不掉，那为什么出现，下面咱们来解释一下这个问题，并且最终就会解决，我这里写一下啊，这个问题呢，其实主要是什么问题，是javascript问题，我这里写一下就是javascript。

它处理这个就是整数类型是有这么一个范围的，超出这个范围，它的值就不能保证精度，它的范围是怎么样的，是正负二的五十三次方，也就这个值是负的二的这么写啊，就是正负。二的五十三次方。这这么写一下啊，就是正负。这是一个啊负，然后它是二的五是三次方。这是它的一个值，然后这个二的五次三次方，咱来算一下啊，它的值到底是多少，我们用计算器直接计算一下。这个呢，需要用到那个科学计算器，就是这个。

咱们算一下啊，我来一个二。然后它的这个五是三次方，大家看啊。五十三次方是不是它得到是这个值，我把这个咱们复制过来。咱们看啊，得到的是这个值也是正负的，你的这个范围，这是负的，加上你的正的这个啊，是我们要处理的范围，而大家咱们数一下啊，这个知道大小是1234。七八九十。是不是有16位，就是它拥有16位，当然各位应该记得啊，咱当时讲MP中提到过，MP呢，自动生成这个ID值，是不是有19的值，它是19位，所以说超过了16位，那它不能处理了，超过的位数它就不能保证精度了，刚才我这里边是六五，这个九三，结果呢，它显示是6600，也就是说超过了Java可能处理的最大范围，这是咱们目前遇到问题，我再说一遍啊，这个问题呢，不是咱们接口的错，是javascript本身一种机制，它处理整数类型有一个处理的范围，超过范围就不能保证精度，它的范围是正负二的五十三次方，也就是是16位的值，而MP生成那个默认的主键值是19位，所以它就不能保证精度，这是咱看到的，那怎么解决呢？很简单。

首先啊，其实咱们可以把我们实体类中那个找到实体类它的那个ID的类型改成死缀字符串就可以了，但是改成死人之后啊，这个就不能用了，因为这是自动增长嘛，那咱们先改成这个死缀。我把这个改一下，大家看是不是改成死顺了，它处理字符串理论上没有限制，但是处理整数类型是有这么一个二的五十三次方的一个范围，所以咱做好就是改成字符串就可以了，那我改完之后，咱们最后再来试一下，我把服务器重新启动，咱们再做个测试，也是通过debug，咱们看一下这个ID值到底是什么，然后最终给他看一下最后的结果。

等它启动。现在已经完成了，然后咱们在里边刷新。刷新之后，现在我点击这个测试角色二，大家看是不是6593，然后点确定到咱们的接口中，这里边最终就删除成功了啊，刚才忘了加断点没有加断点啊，咱再加个断点再试一下，我现在点击删除，然后确定，确定之后来到接口中，大家看啊ID值就能够保证精度，然后咱们再往下删除这个值是不是就处证明我们就最终成功了，其实我们扎索在处理的时候呢，刚才咱们返回页面列表的时候，里边的ID就没有保证精度，所以后面咱传它的值也是没有精度，造成最终就没有删掉，这是我们说明了这个问题。

这各位要清楚，我再说一遍啊，主要就是这句话，Javascript在处理整数类型值的时候，有一个处理范围是正负二的五十三次方，也就是16位的值，超过这个范围值，它就不能保证精度。如果想保证精度，我们的做法就是把整数类型改成字符串就可以了，刚才我在里边把ID的类型改成字符串，最终就可实现。所以以上是咱完成的删除这个功能，咱也顺便说了这么一个问题。