74-尚硅谷-硅谷通用权限项目-菜单管理模块-CRUD前端整合

各位同学大家好，刚才呢，咱们完成了菜单管理的增删改查接口，接口完成之后我们可以通过swa two或者说叫耐BG进行测试，这个测试我们来简单看一下，咱们现在打开这个测试的网站local host8800加上doc.hl后，咱们打开咱们看一下啊，这里边服务我们需要启动，刚才忘了启动了，咱们把服务启动一下，然后咱们用swag先做一个简单测试，测试之后我们开始整合前端。咱们等他启动，现在已经启动了，然后咱们进入各位看到这里边有一个菜单管理，咱们一共有五个接口，ID查询，菜单列表增加修改，还有删除，那咱们快速测试一个，比如说我测试这个菜单列表，点击调试点发送。大家看数据是不是查出来了，这是第一个，然后第二个有一个ID查询，咱们随便输入一个ID点发送。

大家看到数据是不是也查到了啊，当然里边还有添加、修改和删除，我就不一个一个测试了，因为功能跟之前咱们做的用户包括角色基本上是类似的，所以以上是菜单管理的增删改查接口，这个我们就先写到这里。接口完成之后呢？那下面咱们做什么呢？咱们就开始整合菜单管理的前端，大家看我这个项目中，之前咱是不是已经完成了角色管理前端，包括用户管理前端，而菜单管理前端因为跟之前基本上是类似的，所以这个前端我就不从零给各位来编写，咱们就按照课件中的顺序进行整合，那下面咱们开始整合一下，首先我们先简单过一遍，首先第一步咱们肯定是添加路由，这个路由之前已经加过了菜单管理，然后加上路由之后创建页面，创建页面之后我们的下一步操作，咱们在API中创建JS文件，定义我们要调用的接口，包括增删改、查接口，接口写完之后，最后在页面中编写相关方法，以及用UI中的相关组件来实现菜单。

的增删改查操作，这是我们基本的一个过程，那下面呢，咱们快速整合一下，首先第一步我们先来到这个前端里边找到路由，然后大家看到啊，咱之前写到的，咱们看这个路由菜单管理这个位置有我们这个页面，这个页面我们已经创建过了，System里边的menu list.vuee这是第一步。然后第二步，我们在这个API中，咱们创建一个JS文件，我们起个名字就叫me。

点这个创建，创建之后呢，里边定义接口，这个定义我就从课件中直接复制了，因为之前我们写过很多遍这个代码，咱们直接拿过来。但是给各位强调啊，如果说你复制我课件中这个代码，你拿回来之后，需要跟你写的接口做个对比，它的路径，包括提交方式等信息跟你的可能会不一样，所以咱们需要给他检查一遍，那咱们下面检查一下。首先第一行引入request jas文件，第二行是咱们接口的路径，那我来到接口这个CTRL上边，咱们为了防止写错，我把这个先复制一下，放到咱们的这里边，就是定义一个常量，因为咱们类上边都是固定的，然后定义之后看里边的接口，第一个接口获取列表就是菜单列表。

咱们看这个名字，我们这里边叫find nots，它是get，提交这个是正确的，然后第二个是根据ID删除，咱们检查一下咱们的名字叫ID delete，提交这个正确，第三个保存或者说添加，这里标注一下添加，然后咱们看一下接口。咱们是用的是这个POS提交，加的是save，然后里边传的是request body这个参数，那咱看这个都正确，Repair body之前讲到加上date以Jason形式传递，如果你没有repair body，这里是不是写上Christmas这个，之后再看这个修改。咱们看到啊，修改，我们叫这个这个名字update，然后是post提交，咱们看，呃，看这里边啊，跟我们有点区别，这里写的是不是叫put，其实我们也改成put啊，这里边我就跟我接口一致，都用post提交，这个是修改，然后这样的话我们就完成这个接口的基本定义，增删改查接口，在menu JS中完成了定义，这是我们写的这个步骤，然后完成之后下一步操作，在页面中加入内容，这个部分我就直接复制了，然后咱们一会儿详细来看一遍这个页面。

来到这个就是menu里边的list.vouee中，把这个页面的里边的代码咱们直接复制过来，复制之后我们检查一下这个相关的代码。咱们看一下啊，我一保存大家看到下面是不是就报错了，然后他报了一个什么错呢？这个错误给各位特别说明啊，比如说各位同学，你在复制我课件代码的时候，当你发现出现这个错误，你看这是什么错误，This dependence was not found，是不是这个依赖找不到啊，那这个错误基本上是因为你的那个路径写错了，比如你用引的引入那路径写的不对，他会报这个错误，然后这个错误呢，它会有一个提示，说你可以这么做，N PM in install，但是这个in install咱肯定下载不了，因为这是我们路径写错了，那咱们看一下啊，该怎么改，首先上面部部分都是element的UI部分，这部分就固定的咱不需要改，改的是我们的Java SQL代码，那咱们往下来看，首先第一个引入JS文件，咱们看一下啊，我这个文件的名字是不是就叫menu啊，咱们不叫这个得给它改。

成我们这个名字或者说你都跟课件中一致，我这就改一下，这是第一个，刚才写错了，现在应该就改正确了，这个完成完成之后我们继续来看。在下面部分中呢，我们首先呢，写了一个常量的一个对象，里边定了一些初始值，定义之后，下面就是核心部分，第一个data中一些初始值，然后第二个我们看啊，在初始值中有这么一部分，这一部分什么意思，是那些相关的图标切换，什么叫图标，比如说给大家举个例子，你看啊，我这个页面这个位置。

是不是有图标，因为咱们菜单中也会有它相关的图标啊，就是这种图标有这么一个切换，然后咱们继续来看，在下面呢，就是created给咱们说了太多遍啊，当我们页面一启动，或者页面一执行，在页面渲染之前，这个created智慧执行，所以create中咱就调方法得到数据进行显示，Create表示在页面渲染之前会执行，所以你看我调了一个叫date方法，然后在date中就调用了我们刚才这个接口，咱们刚才接口就这个叫find nodes，最终得到数据，然后咱们在页面中我们进行显示。

大家看这位置用yellow table把这个显示，这个咱之前说过，因为咱们目前做的是菜单，菜单我想做到一种竖性显示，所以把这数据传过来，按照它要求的格式传递，咱们之前写接口的时候，咱们再看一遍啊，当时咱是这么做的。在接口中呢，我们通过这个就是递归的方式，然后一层一层找到数据，最终变成就是IUI，它要求这个数据格式，这是我们之前做到的，所以现在把这数据直接拿过来，最终在面中就会按照数形结构显示，用的是element UI中的组件进行实现，这个我们就是第一部分，然后再来看，这就是删除方法，跟之前都是一样的，然后包括我们有这个就是添加，包括有修改等等这个功能啊，跟之前基本上都类似，然后这里边啊，就特别说这么两小点，首先我们看啊，添加也好，修改也好，里边传了一个什么。

是不叫肉啊，这个肉什么意思呢？它表示就是当前我这一行的数据，这里边就把这行给我们传过来，然后咱们再来看啊，比如咱就以这个。修远为例，你看啊，肉传过来之后，然后再继续往下传，然后通过肉能得到里边的各种值，比如说你肉这里边的ID等等啊，包括名称等等，用它都可以得到，所以我们是这么传，另外还一个细节就是这个代码。这个代码什么意思呢？我们有一个叫system menu往上看啊，这里咱们做法就是把我们这个固定的对象的值给它复制过来，但是我们做添加之前，这对象是不是要清空一下，因为你可能有上次或者说有之前的数据，所以咱加了一个叫object点，就是把你对象中的值给它做个清空，为了后面我们做这个添加。

以上啊，就是咱们说到的这个增删改，查到前端整合，这个我们就完成了，所以各位前端按照课件中的过程，你直接复制改成你的效果可以了，重点把接口好好去编写一下，前端在复制的时候就是几个问题再强调一下啊，就是各位特别容易犯的问题，第一个就是你接口定义路径，提交方式，参数一定要对照你的接口检查一遍，我课件中写的跟你的可能一样，当然也可能不一样，如果不一样以你那为准。然后第二个在复制页面的时候，重点检查就是第一个你引入的路径，这个不要写错，然后另外啊，就是这个代码中直接复制，你跟我们那个结构基本一致。以上就是我们写到的，然后写完之后咱们来到前端，我们看一下这个效果，咱们做一个最终的测试，试一下最终结果到底是怎么样。

首先我们点击菜单管理大家看啊，现在里边显示了一个叫系统管理，咱们再来点，我们看下一层里边是不是有很多内容，再一点是不是还有内容，所以现在我们就完成了一个列表的显示，就是第一个功能菜单的列表，然后列表中能有一个功能，这里边没有做，因为跟之前一样，就这个状态，跟我们之前做这个就是大家看啊，用户管理中这个类似，就是可用不可用啊，这各位可以参考它来完成一下，我这里就不再完成了，跟之前一致，然后这个之后在里边还有其他功能，比如说我们现在做一个添加，咱就以这个为例啊，日志管理为例。我随便加个数据啊，为了咱们做测试就可以了，就叫太次岛，然后第二个选择你的这个图标，包括里边其他地址，咱就直接点确定，然后大家看在日志管理中是不是加了这么一个菜单，包括有图标，然后这个内容我们可以做一个修改，比如说改一个T的at硅谷，点确定是不是做了修改，包括它可以做一个删除。

所以以上我们就完成了菜单最基本的增删改查操作，通过前端我们也完成了这么一个测试。