143-尚硅谷-尚医通-前台用户系统-就诊人管理-前端整合（1）

下面呢，我们来整合就诊人管理的前端部分，按照课件中的流程，咱们把前端快速整合出来。首先第一部分呢，我在前端里边先把增删改查的接口部分先定出来，那我现在来到我这个API的文件夹下，在里边创建一个JS文件。然后文件命名，我就叫patient d JS，在里边引入内容，然后定义相关的方法，然后把这个快速给各位定一下，我把这部分复制过来。然后上面呢，写上一个固定的路径，路径我从这个里边复制出来API user patient。然后下面呢，在里边定义它的增删，改成方法，方法按照咱们之前的结构把它定义就可以了，那我现在把里面几个方法，我就从课件中给它直接复制过来，因为之前我们应该写过很多次类似的定义，现在把它拿过来，然后咱们一个一个来看一下啊，首先第一个我们起名叫范的例子，这个方法中我们做的适应就是查询就诊人列表的这么一个方法。

然后大家看里边return request，加上我们的路径，我们叫API name，然后咱们看一下这个名字叫also find，后面用的是get提交，这是第一个方法，得到列表，然后咱再看第二个方法，根据ID查询。那我写一下。第二个方法，根据ID查询就诊人的这个信息，那这个方法我们起名叫get，白D里边传ID，然后加上路径，加上提交方式，这个路径我到这里边来看一下，我们别写错，我们看到啊，它叫author get传一个ID用的是。

Get，提交，这是第二个方法，然后我们再看第三个方法，第三个方法我起名叫C，这个做的是添加就诊人的信息。然后在自有方法里边，我们写上这么一个结构。还是退。Request加上里面那个内容，然后咱们到接口中看一下路径，这个路径我们叫做author save，用的是post提交，并且用到了request body把这对象最后传递，然后除了这个之外，最后还有两个方法，咱们把它最终检查完成，这个方法是修改就诊人的信息。然后最后一个方法是删除就诊人的信息，我把注释写一下。就诊人信息，那我们先检查一下里面这个修改方法，然后修改方法中里边有这个ul加上路径，然后它叫author update，我们看一下这个名字，它用的也是破提交，里边传入这个对象，用这个body，最后一个叫删除。

删除里边我们看一下路径，我这里边叫做author，然后传入这个ID，它用的是比delete跳方式。所以现在我们在这个JS里边就把就诊人管理的增删改查的接口路径，咱们都完成定义，各位把这个检查一下你接口路径把它快速改出来就可以了。然后这个写完之后，下面呢，我们开始编写它的相关的页面，也就是说我现在在这里边呢，点击就诊人管理要跳转到咱那个就诊人管理的页面中，页面中的第一部分应该是先显示列表，然后里边有它的增加、修改、查询、删除等等功能，那我们现在来点击就人管理跳转到页面中，咱们看一下就诊人管理这个路径，我们创建出它的页面。

那我们来看一下啊，首先我们这个就是人员管理，应该在我们之前写这个inex.view中。然后在里边呢，有它的相关的内容，那我们来找一下啊，在里边有这个内容大家看啊，首先这位置叫身名认证，然后这个叫挂号订单这一部分叫就诊人管理，也就是里边的这个地方。在救人管理中呢，大家看我的路径啊，我们写的是杠patient，那这个路径该怎么创建页面，我们在之前讲到过，它用到是纳里边那个固定路由，也就是说它会怎么做呢？到page里边找到这个patient文件夹，然后里边默认找到一个叫in带点voe的这么一个页面，所以咱就按照结构把这页面做过创建，最终在里边写上咱的内容。

那我现在按照结构我们来创建。第一个我先创建这个文件夹叫patient，建到我们的pages这里边。然后在patient的下边呢，创建就是这么一个相关的。这么一个页面我们看一下，呃，刚才没创建出来啊，我把这个创建一下。这里，然后里边创建一个页面，我们叫index.vouee这样的话缓正创建，然后在index voe里边呢，咱们把它的具体内容给它写出来，那这个内容呢，我就从这个课件中把就直接复制过来，因为课件中我们写入了里边相关的这个内容，那我现在从里边给他就复制一下相关这个内容。

我把它直接复制到我们这个页面中来，然后把格式咱们给它稍微调整一下，我们来看一下里边啊，首先他们里就不用说了，然后下面有它这个基本的一个结构啊，都是我们之前见到的，然后在结构中有它相关的这些内容。就是里边的这么一个基本结构。包括这个格式，我们给它稍微。调整一下，然后包括里边这些给的。调整出这个详细的内容啊。这是我们的页面部分，然后除了页面部分之外，下面有咱们就是调用的一些部分啊，这个格式我也给他调整一下啊。我们先给它快速调整完成。也是，咱会具体看一下里边这些东西到底都是什么。这个调整一下。

所以现在这个格式应该我们就调整出来了，然后调整之后我们来看一下啊，这里边它显示的内容到底都是些什么东西。那大家看啊，咱从上往下看，首先在上面部分呢，就是咱们那个超链接的路径部分。比如这个路径中有咱们看到这个实名认证，挂号，订单，救人管理啊，包括等等相关的内容，都是我们那个路径部分，也就是我们左边的这个路径，然后除了这个之外，咱们往下看，在下面的这里边有我们的其他内容。那相内容中，那就是你的具体的内容部分，那各位看啊。在内容部分中呢，有咱们的就诊人管理，然后管理中首先这位置我们写了一个V杠货，其实做了一个便利，就是把你的救人那个信息列表形式在里边做一个显示，也就是一个显示的部分，它是在这个位置做个显示。

包括这里边我们看到用V杠后做的，然后下面有它的具体内容，这各位要知道啊，然后这里边就是显示的相关东西。除了这个之外，咱往下看，下面部分呢，是咱们的调用部分，那我们看这个调用，在调用中呢，首先第一部分引入了一些相关的CS文件，下面引入我们刚才建的JS文件，那我来给他引入一下，写成我们的路径，咱们是API里边的patient.gs然后下面是它的一构基本结构。那各位看这个结构中啊，首先在结构里边的第一部分，我们就先定一些初始值啊，包括就是reason里边有一个patient list这么一个集合，为了后面显示下面有一个create create里边的调用这个方法叫find patient list，然后在method中有我们这个具体的这么一个方法。

就是里边的这么一个方法，那我们看一下这个方法啊，叫find patient list，这个方法中呢，咱就直接通过patient API调用咱们刚才定义的这个方法，也就是里边的这个方法find例子，然后方法反映咱的内容，通过response.date得到咱的内容，就是patient list，因为咱们之前是通过接口把这个list集合在这做了返回，所以现在把它可以得到，就是patient list，得到patient的例子之后，上面在这位置我们用V-for，就把它做一个最终的这么一个显示。这位置就是我们最终显示的内容，便利显示出，比如说你这里边的相关的信息下面都显出来，然后除了这个之外，后面还有其他方法，比如说我们有一个A的，就是咱做添加，包括这个受，那就是显示它的详情，这咱们一会儿给它进一步完善，现在这里边结构我们都写出来了，然后除了四核之外，下面还有一段就是它的相关的样式部分，就是为了我们的效果更加的美观，里边也引入一些相关的。

四样式，所以这是关于线程中列表功能的一个快速整合，咱把它就做到了，这个过程中呢，各位同学在整合的时候，你按照我课件中的流程，把这个能给他快速做到就可以了，所以现在这个咱就完成了，然后完成之后呢，下面再来做一个测试，就看一下这个就诊人管理的列表在页面中能不能正常显示，那下面咱给再来测试一下。我们打开这个页面，在页面中呢，咱们点击就诊人管理，如果正确的话，会把当前这个登录用户里边的添加的就诊人在里边显示出来，那现在我来点击大家看，这里边应该没有显示，咱看一下是不是数据应该没有，因为之前我们没有做过添加，那我们看一下啊，首先我当前用户是这个用户，他的ID是九，然后咱们找到这个表，Patient的就是救人信息的表，然后在表里边大家看我们九的用户下边是没有救人信息，那咱给他改一下，为了能显示，比如说把这个纸啊，咱改成九。

啊，这也改成九，咱们现在在九的下边有两个就诊人信息，现在我们再进行测试，点击这个就诊人管理。然后大家看现在是不是显示两个内容，一个叫测试一，一个叫张三，包括有他的身份证号，包括有他的其他内容，现在暂时完成了，包括这个我们就把就诊人管理的列表功能前端整出来了，整合之后下面还有这个功能，第一个添加就人，第二个详情包括删除，对咱们一会儿再进行整合，目前先把列表功能咱们给他快速完成出来。