4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/33-尚硅谷-云尚办公系统-用户管理模块-CURD前端整合.mp4原创

各位同学大家好，刚才呢，我们完成了用户管理的增删改查接口，那下面呢，我们通过swa进行测试，测试之后咱们整合前端实现这种功能，这个前端呢，我就按照课件咱们进行复制，快速进行整合，咱把重点现在都放到后端中，那下面我们先进行测试，测试的时候呢，首先我在CTRL上面呢，我们为了一会儿看到方便，先加个注解A片。这个我加一下啊，然后在API。我一会儿看到那个中文的提示。这个名字我们叫做用户管理的接口，现在我们加上，然后加上之后我把这服务我们给它启动起来，咱们进行。进行测试。等他揪起来。启动之后呢，我们打开浏览器，用咱们之前说的IP端口号加上doc HTML打开测试页面，那咱们打开一下啊这个页面。

8800DOC。DHTL。回车大家看是不是打开了，打开之后我们看这个位置角色管理接口，之前写到的，目前做的是用户管理接口，然后咱们点开是不是咱们写的接口，那咱们测试啊，首先我们是第一个用户的条件分页查询，咱们来查一下点调试，这位置有很多参数，咱们输入当前页一，每页显示直调记录条件，先不输入点发送。我们看到啊，这里边应该有它相关的数据，那咱们找个具体的，这里有个keyword，我们是根据用户名进行操作，比如我输入一个叫这个din。

我们找一个啊in点发送，大家再来看把这条数据是不是查到了，证明条件分页查询应该就是正确的，然后之后呢，我们再试一个，根据这个ID查询，咱们点击调试数值一点发送。各位看到数据是不是得到了之后，我们再是一个删除，删除的时候呢，我就把这个ID是一的数据给它删掉，点发送提示我们成功到表里边，咱们刷新来看一下，就是一就是额的命。各位看里边是不是删掉了，这只变成了一啊，咱给大家改回去啊，我一会儿测试方便。所以现在证明这几个接口都是对的，然后再来看有一个添加，有一个更新，咱们做一个添加，添加里边呢，我在这个位置啊，我现在都关掉啊，看着比较乱一点，咱就打开一个保存添加。

这里点调试这位置，输入他这段JA1SON数据，那咱们输一下啊，但是这里边还有别的值，咱暂时没用到，比如这个用户属于角色，咱先做最基础的，首先把这个ID我们给它去掉。这个时间给它也是去掉。包括这个时间。然后里边有一个用户名称，我们就加上一个test。约束，所以现在咱就加上这么几个值，加上之后下面我点这个发送。我们看提示我们成功到表里边看一下这个数据是不是加进来了，做这个t at硅谷啊，这些我是没加数据啊，咱就加了这几个值，证明成功之后呢，我们再往下来看，下面有一个更新修改，修改的时候呢，我们点调试，比如说改刚才那个ID等于13的这条数据在这里边的时间也都给它去掉。

然后咱们改一下啊，刚才的名字叫T的at硅谷，我们就随便一个，比如写一个这个就叫T。这个名称啊，咱们叫test，比如说零一。现在我点击发送。提示成功到表里边，咱们刷新看一下是不是改了，所以证明我们写到用户的增删改查接口就都正确了，通过newa完成测试这个之后呢，下面咱们快速把前端做整合啊，这个我就直接复制了啊，在前端里边呢，首先第一部分咱们先加上路由，那路由咱们来到这个前端页面中啊，大家应该记得啊，路由加到哪里。

Root中有个in JS，然后在里边有一个角色管理，咱们在角色管理下面加上这个用户管理。那我从里边做过复制，就是这个位置啊，就是在这里。把这个复制过来。啊，我课件加到上面啊，咱也加到上面，就是上下都可以啊，我就放到上面了，用户管理，然后用户管理中。这位置有一个页面，咱们把这个页面进行创建，我们写到这个位置。这个页面呢，在system里有一个system user，然后里边有一个面。进行创建。现在这部分完成就是路由做了添加，然后路由添加之后，咱们在API中呢，建个JS文件，把刚才写的接口在里边都进行定义，我们快速一下啊，user.js定义相关的接口也就是这些啊，我直接就复制一下啊，咱们检查一下，注意路径跟你的接口中保持一致就可以了。

咱们看啊，User跟咱们这个类是不一样，然后第一个是条件分查询，Get提交传入当前页，每页记录数。是这个值，第二个是根据ID查询，第三个添加啊，咱应该是POS提交用request包D，然后下一个是根据ID进行修改，以及最后这个删除底例的提交，这就是接口定义完成，完成之后下面呢，在我们刚才那个点的页面中加上相内容，包括IU，包括最终的调用啊，咱们把这个就给它直接复下。我给他拿到我们这里面来。直接复制，然后咱们也是检查一下啊，我这里说明啊，各位在复制页面的时候呢，咱们一般检查到无外乎就是这么几个地方，就是主要是两个地方啊，第一个地方你看一下你引入这个路径是否正确，然后第二个看你里边这些名字啊，是不是跟你的保持一致，其实主要就是一个地方这个路径是否对，因为别的地方基本都一样。

啊，都是差不多的，那咱们看一下啊，这个可以暂时忽略，这是我们的一个状态，咱一会儿来看啊，然后大家看里边。定位置，首先引入路径。A片。UR应该正确，然后下面有它相关方法啊，包括咱们写到这些条件，分页查询，以及里边的添加，修改，删除等等，这里边应该都存在。这个咱就完成了啊，然后这里边有一个修改状态，就是报错的地方，这还没有写到啊，一会儿咱会给它完善出来，比如说你状态是可用不可用，一会儿会写。这是页面的部分，然后页面完成之后，下面呢，我们进行这个最终的测试，试一下结果怎么样，咱们来到这个项目中。

Local的9528车。然后大家来看啊，在里边呢，有一个用户管理，在用户管理中我们看到是不是有很多数据，因为我每页显示十条数据，咱把那值啊改的小一点，要不然这个效果咱看的不明确啊，给它改一下。这里边呃，改一下啊，这个值我就不写这个十了，咱们写一个五啊，每页让它显示五条记录，现在再看一下是不是可以了，这是第一页，这是第二页，目前有数据啊，这些没有加这个具体值啊，但是这个分页出来了，然后之后呢，我们是一个条件分页查询，我这里边只有一个名字，咱们输入我的me。点搜索是不出来了，如果说我什么都不输入，或者点重置查全部之后，我们是一个添加，在添加里边弹个框，我们输入，比如这个。

我的in。At硅谷啊，密码就是123456这些随便写个。点确定，现在做了添加，然后添加之后我们来看一下，刚才加的应该就是这个值，之后我们来是一个修改，点击按钮。在里边，比如加个零一。确定。是不是变成了修改之后呢，还有一个删除，点删除弹过框确定是不是就删掉了啊，所以现在啊，我们就完成这个部分，这就完成这个功能，这里边还有一个改状态，这个暂时没有做到，一会儿咱会实现。所以咱们发现啊，目前这个用户的增删改查这个。功能我们就最终完成了，跟角色基本上是类似的啊，其实通过它也是为了把之前的角色里边的功能咱做个巩固，但是其实里边呢，在用户管理中，我想重点给大家讲的是下一个功能，就这个功能给用户分配角色，比如说现在我这用户啊，咱看一下比如叫这个。

王经理啊，他的角色，比如是一个总经理，那咱要分配他有哪个角色，包括这个的密是管理员有他的角色，所以咱们后面要重点做这个用户分配角色，目前实现的是最基本的增删改查操作。这个我们就完成了，然后完成之后呢，刚才有一个小问题啊，不知大家是否看到，我刚才比如说啊，我再试下一个小问题，就是咱们随便加一条数据啊，随便写一个。比如说100，我随便写一个值啊。咱们点确定。是不是加了，然后你看啊，第三页在第三页的时候呢，现在我点删除确定是不是删掉了，但删掉之后你发现啊，这里边因为第三页就有一条记录，我删掉之后这数据数据没了，目前应该是没有第三页了，而他还停留在第三页，但是数据是没有数据啊，这是不是一个小bug，所以咱给他改一下啊，怎么改，找到前端就是一个小地方，其实咱们可以让他都回到我们的首页面中，因为第三页这个数据已经没有了。

咱们找到啊，就是我添加之后或者删除之后那个刷新的部分。我们找到啊，应该在这里。Date，它跳转还是当前页，但是当前第三页数据已经没有了，把它去掉，或者说改个一就可以了，让他回到我们的第一页啊，这样的话就避免刚才的这个问题。比如说咱们可以再试一下啊，我来个111啊，就为了测试啊。确定。第三页删除，确定。是不是回到第一页，现在这个小问题就解决了以上啊，把增删改查功能实现，咱们马上实现用户管理模块中的重要功能，分配角色功能。