90-尚硅谷-尚医通-后台系统-医院管理-医院详情-功能实现

各位同学大家好，我们继续来完成医院管理内容开发，咱们刚才完成了列表功能以及上线功能，那下面呢，在里边我们做一个详情功能，也就是说在操作位置呢，咱们可以新加一个按钮，这按钮比如说我们叫详情或者说查看。当我点查看，他就来到一个新的页面，然后把这个医院的详情信息在里边就会显示，那咱下面就来做这个讲学功能。那详情功能中呢，首先呢，咱先开发它的接口，而这个接口应该很简单了，咱们是不是就根据这个医院的ID把它的信息查出来是不是就可以了。那咱下面呢，就来写一下这个借口。那我现在来到这个CTRL里边，我们来编写一下接口。这个接口就是医院的详情信息。

然后咱们来实现一下，首先第一个我先加上一个注体，就是A片object，然后里边给它写上这个名字，医院详情信息。然后洗完之后，下面呢，我们写一下他这个提交方式，咱就用一个。Get提交，然后在里边加上他的名字，因为咱是详情嘛，所以我起个名字，比如就要这个受。耗子披头。低碳。后面传入医院那个ID。然后下面呢写方法。Public result，我们加这个名字，也就叫show hospitaltime，在里边把ID得到，然后咱们调用service里边的方法，最终做个实现，那我们给它得到一下，加上pass这个注解，我们加一个string ID，然后最后我们调用这个。Hospital service里边这个方法，比如这个方法我起个名字就叫get hospital by ID。

里边传入ID址。然后最终呢，返回是一个hospital的这么一个对象。因为他查出来的是某一条记录。这个对象反应之后，最后我们加上一个退，就是result。点上OK，里边传入好的批，这样的话我们把CTRL咱们就最终完成了，完成之后呢，下面再来编写它的service，在service中咱们通过操作one DB，然后完成里边的最终内容，那我们下面往下我们来写一下。首先这个方法我们先创建一下。Get to PI白地在service中完成方法创建，然后咱们来到它的实现类中，实现类中最终做个实现。

那咱们在里边我就快速写一下啊，这方法应该很简单了，咱就调用好PI re pottery中的一个方法，这个方法就就是根据ID做个查询，那我们就调这个泛的ID里边传入一个ID值，点上它的get的方法，最终返回的是好披这个对象。但是这个反应之后呢，其实我们现在直接把它屡退是可以的，但是现在为了一会儿呢，我们做的更加明显，就是大家看啊，我里边这么来实现，大家看我的课件中我是怎么做到的啊，咱们各位看到就是在这个过程中呢，因为咱们医院中呢，既有医院的基本信息，是不是也包含你医院中那个就是比如医院的等级信息，另外包含里边的医院的这个预约信息，所以大家看我里边写法啊，看我是怎么做的。首先你看啊，我这里返回的不是一个对象，是不是一个map集合呀，咱们通过ma克集合里边，这是第一个，我返回好P里边有它的这个B项，包含里边那个医院的等级信息，然后还有第二个这个booking入，就是他的预约信息，把约信息咱们单独拿出来，这样的话为了让它更加的直观，后面取值更加方便。

然后咱们现在比如说我也可以把它做这么一个改造，那咱们现在这就写成这种形式啊，当然你不正确也可以，我都放在对象中也没有错，只是现在我让他做的就更加明确一点，我在后面取值方便。这位置我就换成这个。外部集合。这里边我也是一个map，然后咱们造到OK中，给它这个map，把map变成一个，变成结构，然后写完之后咱们来到它的service中，Service里边把这个我们也换成map。然后来到它的实现内中，这个咱换成外。然后在过程中怎么做呢？大家看啊，就是这个过程中呢，因为咱们要得到医院的基本信息，另外是还包含你医院中这个就是等级信息，所以咱们现在就是来调一下这个方法，我们做一个封装就可以了。

那这里边我来写一下啊，我们把这去掉，然后重新写。首先我们就要用像这个方法叫这个set。好type，然后在里边那么传入里边这个就是相关，这个就是值是它传的就是一个对象，也就是里边的这么一种写法，那我们给他就写一下啊里面那个内容。比如说我们现在啊，我们这么来做啊，咱们现在在里边呢，我们先调用里边那个好的p.and ID，我们传一个ID。然后它返回里边有一个钙的方法。它返回的是一个好的批的这么一个对象。我们做返回，然后返回之后把这对象传进来，最终这位置返回的是一个好的P这个对象啊，然后它里边既包含我们的基本信息，同时也包含什么，就是你里边那个医院的等级信息在里边我们都给它包含进去，这个方法之前咱是用过是这个方法，所以咱们现在把它有进步和这碰装啊，那比如说我把这个啊给它，咱们就写到一起去，我把这个放到。

这位置。这各位应该能看懂啊，咱直接反映这个对象，然后包括里边有院等级的信息，然后除了这个之外呢，咱们下面在这里边呢，我们把它的内容放到咱的map机构中去，因为咱最终要通过一个map机合做返回，那我现在首先我先溜上一个。Map集合，我就直接把这个复制了啊，就捏一个化心map，然后咱们像蕊到里边先来放这个。医院的基本信息。

就是这个好。然后下面是这个叫。好的皮。然后除了这个之外呢，咱再放下医院里边那个预约的信息，就是里边那个get booking入的这个信息，那这部分我就把它直接复制了啊，咱单独做封装，为了它更加的直观。然后这个做完之后，最后咱就把这个result做个返回就可以了，这个位置我也加上注释就是。医院的基本信息，然后里边。包含你的医院的这个等级，这样的话，咱们把这个接口就完成了，根据医院的ID，然后得到医院的详情信息，咱们把信息分别做了碰中，包括这个医院基本信息，包含等级，我们放到外部中，然后把它这个预定信息，或者说预约信息也放到了外里面去，最终把它这个返回。所以这就是关于我们写的医院详情的接口，咱们就做到了，各位把这个接口能给他快速完成出来。

然后完成之后，我把这个接口，这个服务，咱们给它重新启动一下，然后咱们开始开发它的前端，在前端里边完成它最终的整合，也就是说点页面中的查看或者详细按钮，然后咱们进入到一个新的页面，在新的页面中把内容我们做一个解释。那下面我们写一下前端。而前端怎么做呢？给各位说一下，首先第一个咱们在页面位置是不是要加上一个新的一个按钮，也就是我们的这个位置。咱们要再加上一个按钮，那我现在把按钮给它加上，我就从课件中直接复制了啊，咱们加上一个静的按钮，就是这个按钮。然后把这按钮我就给它放到我们的这个里边来，把它给它放进来啊这个按钮。按钮名字，比如说我们叫这个查看，然后大家看啊，在我的查看按钮中呢，我是这么写的，我加一个叫route lit，然后用这种方式传ID做调整，而这种写法呢，咱们之前写的就是这个医院设置修改的时候是不是写过。

不知各位是否记得啊，当时咱做法就是是不是加上一个隐藏路由，用它跳转，所以目前我们还是这么来做，所以我下面在这个路由里边，咱就加一个隐藏路由，然后把这做到，比如这位置我们加上这么一个路由，那这隐藏路由应该就是这个东西，我把它。拿过来，然后咱们来看一遍，最终给他把这路径写完整。各位看到啊，好的，披瘦后面。冒号ID是不是要求传ID值，包括这位置我们就要查看啊，或者显示，然后这里边加上你那个显示的页面，这个显示页面包括在下面有一个叫head true是不是隐藏了，所以这个啊，我们就写出来一个路由，包括这个位置跟它路径要一致，它叫hot set，然后加上这个hot瘦。

我们看到。是不是这个路径啊，这个应该是正确的，然后写完之后，咱们把这个页面写出来，我们来到这个hosp的这个文件夹中，我们创建一个显示页面。受点vuee，这样的话，咱现在把这路由我们就加上了，就是当我一点击按钮，它就通过隐藏路由跳到这里边去，然后在里边咱们可以把ID得到最终调接口完成咱操作啊这一部分完成了，完成之后下面咱们在这JS中把我们的接口给他。创建出来就是我们这个接口的路径定义一下。我们来定义。查看医院等。香球，然后里边我给它起个名字啊，比如叫这个盖头。好的皮。ID里边传入它的ID值。

在下面呢，加上里面这个路径。我们来写路径。我的命。好的，批。然后后面给它加上我们的这个名字叫show hospital态。然后最后传入他这个ID值。它的提交方式是一个概率提交。这样的话，咱们把这个就完成了啊，比如咱来一个白地啊白D。完成之后呢，最后呢，咱们来到我们的页面中，在页面中把这个完成一下，页面中写的肯定还是用咱们的element UI中的组件，那我现在把这个组件部分给各位复制过来，然后下面的Java部分咱们给他重新去写一下，这是上面的。组件部分给他拿过来啊，包括里边就是一些最基本的一些信息，包括信息咱看一下啊，首先在里边就是它表示基本信息。

然后下面这个位置呢，我们这加上一个叫table，就是里边的这个结构，在table里边呢，有它的基本内容啊，包括啊把这结构稍微调整一下。啊，这么一个。基本的结构。黄的这么一个内容啊，然后包括里边咱们看啊，它的信息大家看，第一个包含这个医院的名称，我们写的就是好披name，然后包含这个医院的logo。啊，就是这个啊，包含这个就是图标嘛，然后除了这个之外，有这个医院的编码，包括医院的地址，也就是里边的这部分。然后除了他之外，还有一个就是你医院这个路线，比如医院在什么地方，另外就是医院这个简介。这些我们在里边应该都做的显示，然后最后有他这个预约的规则，就是写到了这个贴里边啊，就是我们之前这种普通的写法，没有什么特别的地方啊，所以各位把这给它复制，然后改成你的自己那个具体的效果就可以了，我把格式啊，咱快的比如这个预约周期啊，包括什么时间。

咱把它快速。调整一下啊。有这么一个结构。所以现在呢，咱就把里边的这部分，我们就把页面部分给它就整出来了，然后整了之后，咱们下面来编写里边这个Java词汇部分，给它编写出来，那我来写一下啊。下面我们写一下它的调用部分，咱们首先创建一个扎va这么一个结构，然后在里边，因为咱们要调用接口中的一个方法，咱们的路径在hospital里边已经做了定义，所以咱们把这个文件先给它引入进来，我们加上一个import hospital API from加上我们的路径。API好的。

然后影之后呢，下面咱们把它的结构先写一下，首先里边的第一部分。是不是一个date，在date中呢？咱们定义是它的变量，还有一些相关的初始值。这是第一个，然后第二个呢，加上一个叫created。Create里边在页面渲染之前执行。这是第二部分。然后第三个呢，我们加上一个叫methods，里边就定义我们的具体方法，所以这是一个基本结构，然后结构写完之后，第一个在date中呢，咱们把它的变量初始值先做个定义，因为目前我们操作中应该需要有这个院的啊，那个预定的咱是分别做了封装嘛，所以咱们现在把这两个先定义两个初始值。这个我就直接。复过来了，这两个，一个是医院的这个基本信息，一个是他这个预约或者说预定的信息，我后面加上注释。这是医院的那个信息。

然后下面是我们说那个预约或者说预定的信息。这个就定义出来了，然后定义之后呢，咱们继续往下走啊，下面怎么做呢？大家注意啊，因为咱们刚才在我们的这个位置，咱通过是隐藏这个路由，然后在这里边咱是不是要把ID值通过路由传过去，也就是通过路径传递，而我在这个受的一面中，咱们把ID是不是得到，得到之后咱们再调方法是不到数据，所以咱们下面就来把路径这个中的ID得到，然后再调方法，那这里边我写一下。首先我们做法就是。获取到你路由里边的。ID值。那怎么获取呢？咱之前说过啊，我们通过这么一种方式，这次点这个叫p pam，点上ID，得到的是不是里边那个ID值，比如我们来一个CAS ID。然后得到ID之后，咱们下面就可以调用方法，然后根据ID查询你医院的这个。

相学信息，所以我下面把这方法我就写到这位置来写这方法根据ID查询医院的相向信息，那这方法起个名字也叫这个fech。Hospital这个碳。然后在里边呢，我们比如说传一个ID，然后下面咱要这个方法就是hospital A片点上里边咱们刚才定义的这个方法，Get hospital摆地，然后这个我们调用之后，里边传这个ID，最后加上一个点Z，然后里边写上一个。Response。就是我们一个推用结构，然后写完之后，咱们把这里边的值得到第一个就是医院的基本信息，咱通过response.data点上这个名字，注意这个名字啊，要跟你接口中的名字保持一致，咱们刚才医院信息是不是这个和批，所以你把它复制小D位置。

我强调啊，这个名字各位最好复制，你自己写的话很容易写错，比如说你多个字母少个字母，那就只取不到，最终没有效果，所以你通过你的接口中看你接口中是什么，那就把这个值复制过来，这是第一个啊医院信息，然后里边第二个是我们说那个预定或者说预约信息。咱们来一个response.data点这个booking rule了这么一个名字，这样的话这个就完成了，完成之后咱们在create里边做一个调用，这次点这个fight。然后里边传这ID，这样的话呢，咱们现在把这个详情页面就完成了，然后咱再看一遍啊这个做法，它的做法就是现在我们在这里边第一次进入页面，先得到路由中的ID值，然后得到ID值之后呢，咱下面根据ID调一下这个方法就查出了医院的详情信息，把详情信息在页面中做个显示就可以了，就是里边的这些值。

包含你的基本信息，包含我们的预约信息等等，所以这个咱就完成了啊，但是这里边还有一个按钮，就是返按钮，咱们点返回可以返回到咱的列表页面中啊，这各位去完善一下应该很简单，通过路由跳转把它就可以返回去。啊，所以咱们先把基本结构做到，哎，那这个方法我也快速写一下啊，因为很简单，就是一个返回的方法，所以说写到最后之前咱应该都写过。写一下啊，返回到我们的列表移面，这个方法是一个叫bag方法，然后返回方式，咱们通过路由跳转是不是能回去了，就是这次点入点push，用这种方式，咱给他做个返回，然后把它直接就拿过来啊，这里边这个路径拿给它快速改一下，找到咱们这里边，我们叫这个咱看一下啊，我这里叫hospital。

再等。改过来。然后后面加上这个名字，它叫做好list，就是里边的这个名字，通过它路由跳转返回到咱们的医院。列表出去。所以说到这里为止呢，咱就完成了医院详情功能的这么一个。写法这个总体部分就完成了，完成之后呢，最后咱们把它做个测试，看一下咱们的最终效果对不对，这个服务器刚才我都重启了，那我们来测试啊，首先大家看啊，在我们的列表页面中的这个位置，是不是有一个叫查看按钮，包括之前的一个上限按钮，比如现在我点上线，包括下线咱都测试过了啊，当我现在点查看，大家看是不是它就到了一个新的页面，然后在新的页面中我们要做个显示啊，但是各位发现目前这个值没有显示，那我们看一下是什么问题造成的啊，看到是我哪里写的不对。

咱们来做一个简单的调试，看是哪里的错误。那这里边呢，怎么调试呢？咱们把F12打开，然后大家看啊，这里边是不是有一些错误信息啊，那我们看什么信息啊，首先咱们看啊，这里边提示我们说这个ID没有定义，里边的ID没有。那我们就看一下ID啊，看是不是哪里我写的不对，那我们看到ID呢，咱用应该是在这里，这是取值啊，下面是不是调用啊，但是各位看到啊，我这个写法写的好像不对吧，咱应该不是这么写。刚才写着急了啊，应该是什么？这次点这应该叫是不是这个route，然后里边点上这个para ID啊，是不是应该是里边的这个写法，这点root.tid，所以这个值咱刚才写错了，因为这个值你取不到，所以下面这个调用肯定就不对了，所咱们把它快速改出来啊，这点root.term的ID，刚才是这位置写的不对啊，就是获取路由中的ID值写错了，现在给它改过来之后，转到里边再做个测试，我们再看效果啊，比如说咱们重新测试。

在里边我点击查看，然后大家看里边是不是有它的基本信息啊。包括你看里边啊，有这个名称logo，包括它的预约信息等等都存在，然后咱们现在点返回，又回到了咱们的这个页面中。所以现在这个详情功能我们就完成了，这是我们做到的啊，然后详情功能做完之后呢，大家发现这里边的样式稍微难看点，所以咱把钥匙啊这个样式稍微整理一下，怎么整理呢？Com的课件中，在课件中呢，我这里边给大家写好了一段CSS文件，咱把这文件在里边引入给它弄一下就可以了啊，就给它改一下样就可以了，那这文件呢，我在这资料中给大家应该都听出来了啊，然后我是要把它放到我的这里边就是。

Src里边的styles里边，那咱看一下啊，我已经提前复制过来了，在src里边的style里边有一个文件，就这个受点CSS，那咱把它引入进来就可以了，怎么引入呢？咱们找到里面一个文件叫问点JS，在问点GS里边把样式引入可以了，引入方式咱们看一下，跟这一行应该差不多，那咱用它改一下啊，咱们加上一个。引爆的。然后加上这个叫艾特斜杠。Styles。后面加一个叫受点CS，这样的话就完成了这么一个样式文件引入，然后引入之后这里边我们就能看到它有一个就是更美观一下的效果。所以这个啊，是我们做一个调整啊，但是不做调整，这里边效果已经出来了，那现在我把这服务给它重启一下啊，因为咱们加了新的内容，重启之后我们再做一个最终测试，就看一下这个页面的这么一个。

美化之后的一个效果。我们等它先行起来。现在启动，启动之后我们记住啊，点击这个医院列表，然后医院列表中点击查看。大家看效果是稍微美观一点啊，有一个表格自己编的就是更合适一点啊，包括有医院的信息我们都做到了啊，所以现在呢，咱就完成了医院管理中的医院列表功能，医院状态的上限下限功能，以及医院的查看消息功能。