110-尚硅谷-尚医通-前台用户系统-医院详情-前端整合（1）

刚才内容中呢，咱们讲完了na中的路由跳转，固定路由和动态路由，那咱们下面呢，就使用路由这种跳转方式来整合医院详情的简单五分，那下面我们就来做一下。首先第一部分呢，还是按照咱们的传统方式，先在API的摘S文件中把两个接口我们先做个定义，然后定义之后页面中做调用，那咱们先做定义，首先我先找到我们API中的好的批点JS文件里边把两个接口定义一下。首先第一个接口就是根据医院的编号，查询医院的详情信息，也就是里边的这么一部分。那这个呢，我给各位直接复制过来，因为跟之前一样，然后第二个接口就是根据医院编号查询里边的科室信息，这是里边的两个接口定义，我把它复制，然后在里边加上注释。第一个。

根据医院的编号查询医院的详情信息，包含医院的基本信息，包含他的预约信息等等。然后第二部分就是根据。医院的编号。查询里边这个医院的科室信息，所以这是我们两个接口定义在里边给各位就写出来了，然后它里面用的应该都是API里边的好的披，中等好的披，然后里边加上对应的这个方法啊，包括咱们稍微查一下啊，我们看这个科室它的这个方法名字应该是这个。Department加上咱们那个科室的编号，就是医院的编号，这是一个值，我给大家复制表啊，上能会写错，然后这个是根据院编号查询详情信息，我们就要find hospital detail，把这个给它寄出来。后面可编号，所以这样的话呢，两个接口就定出来了，然后定义之后我们就往下走，因为咱们现在一点击某一个医院，或者说咱们在里边，我们一选择某一个医院，它就跳转到我们的医院中去，而这跳转过程刚才刚讲过，用到的是不是关于我们last中这个动态录由方式，所以咱们就是在我们这个。

配里边电路件夹叫hostsp，里边加上一个动态路由页面，以消线开头，加上一个参数名称，我们就叫hot code，所以这样的话，这个就完成了。然后最后呢，我们就在这个动态路由的这个页面中来编写它的页面中内容，那这内容呢，我就从课件中。给各位把这段内容复制过来，因为这段内容是页面中通过I的UI整合出来这么一个内容，我把它先给我复制，咱们先拿到这里面来。

然后拿到之后呢，下面再来编写一段Java代码，那这代码怎么做？看一下我课件中啊，首先第一部分呢，咱们需要引入两个CSS的样式文件，为了一会儿显示更加美观，这是第一部分，然后引入之后，我们再来引入我们那个JS文件，如果叫hospital。A片。然后from加上路径at斜杠A片。好的，配这样的话做了引入，引入之后呢，在里边还是加上咱们之前一直那个结构，结构先快速写出来，第一个我们加个date，然后里边加个瑞存定义变量和初始值，那变量初始值，因为咱们目前用到的应该就是查询咱们的科税信息，包括医院的详细信息，那把里面这些值我给他直接就拿过来，就是里边的这么一个结构。

这个我先复制过来，然后咱看一遍啊，我从课件中直接拿过来了第一个。意元编号，然后第二个值咱之前用过很多，就是我们做那个样式是否使用，是用它来实现，包括好披对象中我们加一个P，这边其他值，然后这是预约的相关信息，这是我们那个科室的信息，所以现在把几个初始值我们都定出来了。然后定义之后呢，下面咱们加个方法，就是这个create的方法。除了C之外，最后加上一个角。Methods method里边写上我们最终的方法，所以这是一个基本结构。然后结构写完之后，咱在ma中就写一下这个方法，因为咱们一点击里边的某个院名称啊，这没有写完，点击名称之后，我们就进入到它的详情页面中，在详情页面中要显示你点击院中的科室信息，包含医院的详情信息，所以咱们下面我们就写个方法，把这个在里面给他调接口，给他查询出来。

那在里边呢，我给它起个名字，比如就叫init，然后印尼里边咱做两个事情，第一个事情就是根据医院的编号查询它里边这个详情的信息，然后第二个根据医院的编号查询里边的科室信息，那我们先写第一个，我们就调这个hospital API里边的第一个方法就是咱们刚才定义的。这个方法我们叫这个受，也就是显示交接信息，然后在售里边呢，传入医院的这个编号，就这个hot code。我们在上面应该定义了这么一个变量，包括初始值，然后后面用V-model做个绑定，然后这个写完之后我们加上一个。点赞加上一个response。

建成函数，通过response得到里边的结果，那咱给他就得到一下啊，首先我们加上response.date这个咱之前都写过很多次这个写法啊，它返回到是不是一个map集合呀，然后map里边咱看它的结构中我们看到啊。里边有个名字叫hospital，是返回我们这个医院详情这个对象，那我们就点上一个hospital，然后给它就复制到我们这个好的披这里面去。这是它的第一个。然后里边还有第二个是他那个预约的这个信息，我们写一下，咱就来一个this，点这个叫booking。入了，然后它等于response.date点上咱们预约信息那个名称，我名称叫这个booking，入了把这个拿回来，所以这样的话，我们把第一个调用就完成了，得到了医院的抢救信息，然后得到之后我们再快速写第二个。

好的披头A片。调用里边的这个方法，咱们叫find department。啊在这里，然后同样传入咱们这个ID值，这次点。好靠。包括加上一个点赞啊，跟上面基本上是一样的。箭头函数，然后通过response最终得到结果，那我们写一下啊，就是response。点上date，然后这个值呢，就分给我们那个部门的那个列表，或者说科室列表，咱们叫department的VO list，也就是在上面定义的。这个纸，所以这样的话呢，这个方法我们就洗完了，然后洗完之后呢，最后咱们在create里边把这个方法我们做一个调用。

那我们来调一下啊，这次点init。这样的话呢，咱们现在就完成了，我们这个调用，就是一进入到详情页面中，咱就查询出来我们这个院的详情，包括我们的科室的信息，最终在页面中我们可以做一个显示。这个显示之后呢，咱们往上面看一下，看一下里边一些路径妥些值，我们来看一下啊，首先上面部分就是我们刚才看到那个详情页面图内容，第一个预约挂号就是显示我们的信息，那这里边这个路径我们应该叫hostsp啊，咱们叫hospital，我再给它改一下啊，然后包括第二部分有一个叫预院详情，这个咱一会儿把它写一个新的页面，然后第三个这个东西它叫做预约通知，后面咱来写，包括里边其他信息，后面咱们都做个实现，把路径我先改一下，然后改完之后你看下面啊，它就是显示我们刚才那个好的披里边的那种，因为咱们把信息都放到了好的披中，就里边这些值。

包括这部分是我们的预约信息啊等等这些内容，所以现在呢，我们在页面中把这信息就做显示，包括你看这位置V杠后，把我们的科室是不是做了一个便历显示，都是咱们之前说过这个内容啊，这个啊咱就完成了，然后完成之后呢，我们看一下我的课件中啊，在我课件中呢，最后还有两个方法，这两个方法我就把它直接复制过来了，给各位特别说一下啊，应该很简单，第一个方法这里边我起名叫。目Mo VE这方法什么意思呢？比如咱们刚才看到啊，在我这个页面，就是我们的左边部分是不是有很多这个超链接呀，或者说这个菜单，当我现在实现，比如往下滑的话，滑到第二个，滑到第三个，它是不是要有一个选中状态啊，所以里边这个目方法就做这个事情，让他做个选中，用这个I index，然后这个筛是我们那个真正的预约，这咱一会儿来实现，就目前先把上面部分我们先做到。

这个我先去掉啊，所以现在我们完成了一个基本结构，就是一点击详情，它就进入到我们这个页面中，然后把数据做显示。所以这个我们就做到了啊，然后做到之后呢，咱们下面把它做个测试，我先把这个服务器先重新启动一下，然后咱们在前端中。最终测试一下啊，看一下它的效果是什么样的。那我们先把它重启一下。等它重启之后，我们再打开浏览器看一下目前的效果是什么样的，因为目前这个详情页面我们已经做到了，当然在协程页面中的最后还有这么两条链接，就咱一会儿来写，刚才我们说到第一个是预约详情，第二个是预约通知啊，所以咱们一会儿根据这个路径我们创建这个页面最终实现，而这路径刚才提到用到的是不是这个NAS中的动态路由实现，都是动态路由方式做到的。

啊，现在我们的接口启动起来了，然后咱们打开浏览器，比如我先给他回来，回到咱们的首页面中，在首页面中呢，我现在点击某一个医院名称，或者在里面输入选择医院都是一样的，比如现在我点击某个院名称，进入到详情页面中，然后大家看啊，这里边提示我们是不是失败了，就目前他报错了，那我们看他报什么错啊，咱们看一下我们的那个接口部分。大家看是抛了一个异常啊，其实是一个空指针异常，那我们看一下它为什么啊控制针，比如我们这么来看啊，咱们现在的浏览器中呢，我把F12打开。

打开之后，比如我再去请求一次，大家看它是什么问题啊，我们看里边首先大家看啊，这里边的问题，我们看这位置是不是有一个nu，也就是说我们现在这个调的是咱们刚才写那个查详情的接口，但是我们调接口的时候发现后面这个ID值就是你院编号值是没有啊，它是空等于空的话，这值肯定查不到，所以目前是这个问题，也就是说这问题应该不是咱们接口的错，应该是我们的前端调的过程中有问题，那我们就看一下前端打开什么问题啊，首先大家看啊，我在查的话，是不是都用这个叫house code呀，但是hot code目前是不是等于none，这个值是没有，而这个值大家看在哪里？是不是在这个位置，所以咱是不是要把这个值取到，然后赋值给这个hot code下面是不是才能使用，所以咱们需要做一下这个事情，那怎么做，之前咱都写过，我在里边写一下啊，就是一进入页面，我们在create里边做件事情。

获取一下你路径中那个。号扣的值，那我们来得到一下啊，咱就来一个这点号扣的。然后等于这个this，点这个叫是不是那个root.para.hold code啊，那我们加上啊，这个叫root.para。点这个。Code这样的话呢，咱就通过路由把日值得到，得到之后再传过去，最终是不是就能插入数据，刚才没有传的话，这个值它等于空，所以咱们就没有取到这个内容啊，这是刚才遇到这么一个小bug，那我现在把它加上之后，咱们再重新做测试，我们重新试一下啊，比如说我们先给它回来到咱们的首页面，在首页面中选择这个院名称。然后大家看目前进入到的是不是咱们的健康页面，也就是第一个预约挂号啊，包括里边有内容，然后有内容之后，包含你看里边有这个预约规则，包括有所有的科室信息，这个咱就完成了，然后完成之后，比如现在我点击预院详情，是不是要显示详情内容，包括我点击这个就是预约通知是不显示他的下那种，那咱下面把这两个页面给它快速做到啊，都是一个简单的动态路由跳转，然后里边做个实现，在咱下面来完成这两部分。

医院详情还有预约通知，目前把这个基本结构我们已经给他做到了。