154-尚硅谷-尚医通-前台用户系统-预约挂号-预约确认功能实现

各位同学大家好，咱们继续往下开发，下面咱就实现点击剩余按钮完成的功能，那这个功能我们要做什么呢？就是现在我们要点击某个剩余数量，是不是进行预约挂号，而预约挂号之前，首先我们先进行一个叫预约确认，也就是说根据咱的排班ID获取到排班信息，在页面显示，然后这个过程中我们要选择就诊人，最终是要预约，就是选择给谁挂这个号，所以咱们做一个预约的确认。预约确认的，因为咱要做一个接口，根据我们的ID获取到我们的排班信息，所以咱们先来开发接口，然后再整合我们的前端，那这里边给各位来写下，我在这里边做个实验。咱们来到我们这个hospital API中，在hospital API中咱们来编写这个接口，这个接口做的适用就是根据排班的ID获取排班的数据，然后过程中我们给这个接口起个名字，比如我将这个get筛掉，然后传入。

筛掉ID就是排班的ID。下面呢，加上这个接口public。我们叫get，筛掉。然后在方法里边得到我们这个ID值，那我们通过这个pass这个注解把这个得到。我们叫这个。此缀筛掉ID。把这个得到。我在这里面写一下啊，就是这个名字。然后得到之后呢，咱们下面就来调用service里边的方法，根据ID把这个值给它得到，那我们来写一下啊，咱们调这个就是筛掉service里边这个方法get。

筛掉。把ID里边传入这个筛掉ID值，然后得到之后呢，最终让它返回到，是不是应该是一个筛掉这个对象，因为根据ID查询嘛，返回的肯定是一个对象，然后返回对象之后，最后咱给它加上一个对。造点OK，串入这个删掉，这样的话我们把CTRL就完成了，然后完成了CTRL之后，下面再来编写里边这个service，在service中，首先我把这方法先创建，就在咱们筛掉的service中，我们这个方法获取。排班D获取排位信息，然后这个选完之后，咱们来到它的实现类中，在实现类中实现它的具体方法，因为这个方法啊，咱要查的话，肯定要查询我们那个猫狗DB中的方法，所以咱们来调这个方法，就是里边那个筛掉。

Re，里面这个方法我们看一下啊。它叫做find by ID里边传入，筛掉ID，我们给它传一下。筛掉ID。也就是里边的这个值。然后传ID之后，最终返回的就是我们这个对象啊，但是对象返回咱之前写过啊，咱需要在调用里边的一个方法，叫这个get的方法，最终把对象，然后咱们把这对象给它做一个水退就可以了，所以这样的话呢，我们在里边就完成了这么一个接口，根据排班ID获取排班的数据，为了一会儿做这个确认功能。做准备，现在这个就写完了啊，比如我们开发一个最简单的一个小接口。然后接口写完之后，下面呢，我们来整合它的前端部分，前端部分怎么做呢？大家看啊，咱们来到页面中啊，在页面中呢，因为咱们要点击这个剩余的这个按钮，然后剩余按钮中我们调这个方法叫booking，所以咱在booking里边呢，就来调用咱们接口中的方法，然后把它做实验，比如在最后面这个方法我们找到啊就是。

这个方法中来做个调用就可以了。那下面我们就对它做这么一个调用，里边来实现我们的功能，然后大家看我的写法中啊，在这个写法中呢，首先我们是传入这个schedule ID，把你那个就剩余数量，如果它是零或者负一，那咱不能预约，如果它不是零，不是负一，我们再跳转到我这里边，让它跳转到这个booking页面中，在这页面中再来取它的值，所以下面的结构中，我就把这个页面来创业，然后在页面中咱们来做这么一个确认的这部分。那我来写一下啊，我在里边。把这个页面创建出来，就这位置。

然后页面叫booking点。不，页面中我们写入它相关的这么一个内容。那我们来看一下啊，首先还是在hospital JS里边把这个接口咱们先定义出来，就是我们刚才写的这个接口，我把它复制过来啊，我加个注释。根据排班ID获取。海边的信息这么一个接口，然后在里边我们看一下路径，别写错啊，我们叫get筛掉。里边是ID，然后这里边用的是一个概率提交啊，这应该没有问题，然后写完之后在booking里边咱们来完成页面中的最终调用，那我把这部分带什么给各位拿过来。然后咱们看一下啊，里边这么一个基本的调用过程，那我们来看一下。

首先啊，大家看啊，在这里边呢，咱直接看Java代码。我们先引入相关的JS文件，第一个就是这个hospital，然后第二个有一个叫首先我们看里边的切法啊，咱们先定义基本值。然后下面呢，我们在哲学里边得到传过来这个筛掉ID，刚才咱们看到用它传过来，传来之后调用阴力的方法，阴力的里边呢掉了两方法，第一个get筛掉，第二个find patient list，我们先看get筛掉，调用刚才写的这个方法，里边传入值，然后这个值通过接口反映数据复制给渗头对象。第二个叫这个patient的就是我们的就诊人信息，因为咱们在预约的时话，是不是要选择你的就诊人药，所以里边把这得到咱们调用patient的API中的这个方法。那这方法咱看一下啊，别写错，叫饭的利的。

这个方法得到的是不是你的就诊人的列表信息啊，包括里边得到它里面那个对应的值，包括我们选择某个就诊人为了做那个加力宝的选择，然后包括这里边我们就是加的功能。这是一个添加救人的这个信息，所以咱们现在把这个前端部分也完成了整合，这是我们编写的这部分，也就是。预约挂号详情，还有预约确认，然后这个写完之后，咱们下面把这个代码我们来做个测试，看一下目前的效果到底是怎么样的，那咱们打开浏览器，我们来测试一下。在浏览器中呢，咱们测试，那这里边呢，因为刚才我们开发了接口，所以咱把这个接口给它也是重启一下，重启之后我们再进行最终测试。我们等他重启完成，然后咱看一下我们这个预约确认功能，就是先显示详情信息，然后确认之后我们再进行最终的挂号。

那咱们先看它启动。现在这个已经行起来了，然后咱们来到页面中，在页面中比如说点击有号的这个日期，在里边选择剩余这个按钮，到一点的话，我们看效果，它直接提示我们说里边的这个值没有定义啊，那我们看一下它的问题到底在哪里，为什么没有定义，那没有定义的话呢，这过程中应该是咱们的接口可能有问题，那我们先排查一下问题在哪里啊，首先我们找到这个页面。在页面中大家看到啊，这里边我们的值它叫做。第一个of week说这个值没有，那这个值呢，应该是从我们的筛对象中取出来的，也就是说在我们里边的这个位置得到咱们接口返回对象，然后从对象值摆值取到。

但是取值的时候你注意啊，里边除了筛中的基本值之外，在拍目中是不是其他值啊，比如说你这个星期医院的名称，部门名称等等，所以咱看一下接口可能是没有写完整，咱们把接口排查一下，看一下问题是不是出现在这里，那咱们来看一下啊。我们打开接口，然后接口里边，首先我们先看CTRL了，CTRL里边返回这个对象，呃，大家看到第一个问题啊，我这里是不是写错了，OK中应该传这个筛对象吧，我这里传的是一个ID，所以这肯定不对。然后咱们再看service里边，在service中我们通过ID查出数据，但是查出数据中并没有拍里面那个信息吧，而的信息咱之前应该写过一个方法，是不是这个方法package筛掉里边传对象项里边是放这些数据啊，所以咱们需要用到这个方法，那这个方法给它稍微改一下啊，让它返回一个对象吧，为了咱们方便使用，那我吞这个筛掉。

然后在上面咱就来调用这个方法，那我来调一下啊，这次点package筛传入筛对象里边会封装咱们需要的值，我把这个写到这里边，直接做一个对退，所以刚才问题是咱的接口出现的问题，现在把它做了改造，然后改造之后我把这接口给它再重启一下，最终我们再做个测试。那咱给它启动前端不需要做什么修改，因为前端多多调用，主要是接口出现问题，刚才反就改了一下这个接口，那我们等它重新启动，然后咱们再做最终的这么一个测试。咱们等待一下。

现在已经启动了，然后启动之后咱先回到我们的这个页面，在页面中点击这个日期，这里边是不是有一个剩余，咱点按钮，大家看，当我一点按钮里边是不是显示了我们的内容，然后大家看内容中啊，首先第一部分是你的就诊人，咱目前有两个，一个叫测试机，一个叫张三，比如我选择是不是他有不同内容。当然你可以添加新的就诊人，咱目前有这么两个，然后下面这部分就是咱们要挂号信息，在这里显示说这个日期周三上午，这个医院科室医生名称，职称包括专长，包括你的医师服务费。还有你的就诊人的手机号，最终点确认，咱是不是就要确认挂号，所以目前咱把这个预约确认的这个页面就完成了显示，各位能把这个做到，而这里边特别注意，刚才我们遇到这个问题，就是咱们在根据排班ID查询排班数据的时候，除了里边的基本数据之外，还需要一些其他数据，而其他数据咱就调用这个方法中，像排里边设置你的医院编号，就医院名称，部门科室名称，还有你的星期，最终咱在测试就完成了这个页面的这么一个显示，所以现在这个功能我们就开发完成了，然后完成之后呢，咱后面做的那就是这个确认挂号，做挂号的真正的下单功能，那咱后面把这功能做个实现。