107-尚硅谷-尚医通-前台用户系统-首页显示-前端整合（3）

下面我们继续完成，首页数据显示，刚才咱们把等级、地区还有医院列表都做到了，那下面呢，我们继续来实现，下面实现什么呢？我们来做这个功能，比如现在我点击某个等级，点击某个地区，下面是不是要显示你条件查询出了内部就根据等级，根据地区，我们做一个条件查询功能，咱们把这个先做到，然后做到之后再来实现里面这个输入框的这个部分。那首先我们做这个查询。查询过程怎么做呢？咱们先看等级部分，就是现在当我点击某一个等级，咱是不是要调方法型查询啊，所以我现在呢，咱就来做一下，我们就找到这个等级的部分，我们先找一下，应该在我页面的上边。等级在我们的这个位置，然后在等级里边呢，咱现在在里边是不是要给他绑定一个事件呀，绑定事件之后是不是做操作呀，那我现在绑定一下，我们写一个艾click里边加上一个事件，而这个事件是不是要根据你点击那个名称做查询，比如我点击三级，点击二级，根据它制作的，所以在里边我可以写上一个方法，那这方法我就从这里边给大家直接就复制过来。

把它拿过来，然后咱看一下啊，比如说咱们一会儿方法，我就叫这个host type select里边传两参数，第一个参数就是你点那个值，咱叫item value item value什么意思呢？大家看一下它的实体类中，就是D的实体类中我们看到啊，在这个实体类中呢，有一个是名字是一个值，值就是咱们点的那个名称，比如我是三级二级还是什么，那咱用它可以做个查询，所以这时候我们写一个value，然后inex是它的索引，为了一会儿有它那个样式，所以现在把这个我们就写出来了。然后写完之后，咱们在下面把这个方法我们来写一下。

我给他写到就是这个位置，我们写一下这个方法。在这里，然后这个方法就实现，根据这个医院的等级做一个查询，里边我们叫house type select。然后在里边咱可以传入这么两个参数就能做到，然后把参数进来，第一个我们叫这个医院等级，咱就叫这个house type，第二个是in代词，然后在里边怎么写呢？首先第一个因为咱们查出数据最终是放到这个例子里边去，刚才写的这个地方，所以咱首先呢把例子集合先给它清空。然后清空之后，我们来设立一下那个医院的等级，放到这个叫search o BG中，最终再叫方法，我们就会实现，那我们来写一下哈，首先第一个咱先。准备一下我们的数据，数据中的第一个例子集合，我们先让它变成空，给它先清空一下。

就等于一个空。然后第二个咱把那个就是当前页，让它默认值等于一，第三个咱设一下它那个样式在里边有这么一个值叫house type active index，等于咱们这个index，如果它们相同有样式，不相同没有样式，然后最后一个就是我们这个this.search o BP里边这个叫host type，等于咱们这个。Host type这个值为了做条件查询，然后都做到之后，最后咱就通过API做调用啊，因为这个调用的时候呢，咱们等级调用，包括一会儿呢，其他地方也要调用，所以咱们把这方法单独写到外边，就是这个查询医院。列表方法，我单独写个方法，这个方法比如我叫get list。就叫这个方法啊，然后在get list中呢，咱就可以调用API中那个方法，这个实现API的方法咱刚才写过，我就快速调一下啊hospital。

A片里边这个方法应该叫这个，咱看一下啊，叫这个get配置。List里边三个参数，第一个参数当前页就是这个配置。然后第二个参数是每页的记录数limit，第三个参数是条件就是search o BG，然后写完之后，下面咱加上一个点Z，里边写一个response箭头函数，通过response把值是不是得到，然后得到之后咱可以放到这个例子中去啊，那咱还是用之前我们的方式啊，咱们把这个就是得到的数据给它做个便利，然后给它放到就是push到那个例子中去。那我来遍历一下啊，我们来一个let I in，加上这个response.date点这个content，咱之前都写过，不再重复了啊，跟之前一样，然后写一个这次点list。

点上push，在push里边呢，就加上我们里边这个最终的这么一个内容，那我们给它加一下啊，就是response，点上这个date，点上这个content，然后咱们加上一个，哎，从里边取到啊，因为content得到是一个集合嘛，咱从集合中取值给它在put到put到这个list中去。包括最后它有一个总页数给它也得到一下，就是这个配置S等于。response.data点上这个叫total配置词，这样的话这个方法就写完了，然后写完之后我们在这里边就做一个调用，调用查询医院列表的。这么一个方法来调一下啊，这点get list，所以咱们现在把这个医院等级查询就完成了，当我点击某一个医院，我们传入你的等级的名称，包括索引，索引为它做样式，然后这个等级名称咱最终调方法做查询，给他设置到这个search OB BG中，这个我们就写出来了啊，所以各位能做到，然后做到之后呢，咱们用同样的方式把这个就是里边的这个地方。

关于咱的地区做个查询方法跟刚才应该一模一样，那这个我就直接复制一下啊，首先第一个我们找到那个地区的这个地方加上一个世界，就这位置我们给他绑定一个世界。事件名字比如叫distinct select，然后写上之后我们在下面的把这个方法用同样的方式我们做一个创建，跟这个医院等级应该是一样的啊，那我们写一下啊，就这个就是根据地区查询医院。

然后这个过程中，咱们这个方法，在方法里边我们同样两个参数，第一个是你那个地区，第二个是in代词，那这个啊，我就从里边咱这些找一下啊，给它快速写一下，因为跟他都一样啊，第一个是这个distinct code，就是我们这个医院的那个区的这个值。把这个拿过来，然后拿回来之后，咱们下面啊，在里边就是还是设一些纸，然后最后调方法做实现，我把这句话就直接复制过来了，因为跟上面一样。我就不再敲一遍了啊，所以这样的话呢，咱们现在就把这个根据等级查询，还有根据这个地区查询，这个方法，咱们就最终完成的，他们肯定都是调用咱们接口中的这个方法，最终做一个实现，所以各位啊，把这些应该能给他快速的写出来，应该都是我们写到的这些基本内容。然后这个写到之后，咱们下面啊，继续往下来做，然后下面做什么呢？就做一下它那个输入框的那个部分，把那输入框的部分它最终完成一下，也就是说我们现在在我们的这个位置，当我们输入一个值，然后这个值我们要做一个搜索，或者说做个查询，咱们把这个先写完，写完之后我们最终做一个统一测试。

那这个输入框怎么做呢？给大家介绍一下啊，其实我们要做到这个效果跟百度这个效果是类似的，那我给大家演示一下啊，什么效果。比如说啊，咱们在百度的搜索框中，我们这位置是不是也搜索框，比如现在我在百度里面，我搜索一个值叫Java，大家看啊，当我输入Java之后，下面是不是显示出了很多内容，就是Java相关内容，就咱一会儿根据这个值是不是可以查数据库，把相关内容在下面显示，比如现在我点击某一个内容，是不是跳转到它的详情页面中去，所以咱们现在把输入框也这么做，当我点它，它里面就。

弹出这么一段内容，当我们选择某一个，那就进入到它的详情页面中去，这就是我们在输入框中要做的事情，如果各位不理解，你可以用百度自己来看一下，咱们做的大家效果就是一样的，这是我们要做的效果啊，那效果怎么做呢？给各位来说一下啊，这个过程呢，其实我们可能想起来很复杂，但是如果说我们用到element UI中的组件，这个过程会特别简单，那大家看啊，我这里怎么做到的？首先你看啊，我这里边呢，加上了这么一个IUI中的标签叫E凹to complete，用这个标签就能做到刚才那个效果，而它会特别方便，然后在里边怎么做，主要里边首先V-model，咱做双向绑定，主要是两部分啊，一个叫fe。就这么一个。单向绑定，还有一个叫select fight什么意思呢？就是当我们现在一点击它，它是不是下边要弹出这么一个，就是下拉部分啊，就这部分，所以我们用这个fight这部分就做到这个效果。还有一个叫select select什么意思，当我现在选择某一个就会触发，所以这是两个地方，就是第一个地方，当我点中那个框输入内容里边会用这个触发，当我选择某一个，这个会触发，所以咱用它做个实现，这是我们提到的啊，然后这两部分呢，咱就需要写两个方法，这两方法我就从课件中给各位直接拿过来，咱们来看一下，给它能快速写出来可以，因为并不复杂啊，那我们来看一下哈，这两部分。

我把方法给各位直接复制到下面来，就我们这里边，然后咱看一下啊，我这里边是怎么写的。我拿到这里首先啊，格式我们先给它调整一下啊。首先咱们看第一个方法，第一个方法我们叫Co research这个方法，这个方法什么意思呢？就是现在我们在输入框里边输入一个值，它就会弹出这么一个下拉的这么一个框里边会显示它相关的内容。

然后这过程怎么做的呢？大家看这写法啊，首先先判断它等于空，如果它等于空，直接铝退，如果它不等于空的话，我们里边就用这个做了一个调用，然后在调的过程中，大家看到啊，在这调的过程中呢，咱就调这个啊，我们应该不是这个名字改一下啊，叫hospital API里边的，刚才我们定义的这个方法，Get by hospital name，根据名称就这个query string是它名称，我们做一个我会查询，查询之后返回里边的结果，然后给我们这个，最终我们做这个就是显示，用这个显出下列表。然后显示之后，我们下一个方法，这个方法。这一方法什么意思呢？当我们在那个下拉框里边。

选择就是某一个。这么一个内容，然后它会执行下面这个方法，而这个方法我们要做什么呢？比如现在在里边我选择某一个是不是要跳转到一个详情页面中做个显示啊，所以咱们先写一个路径，这详情页面一会儿咱来实现，目前先把结构写出来，就是它会平下应方法，然后跳转到一个详情的页面中去，所以现在咱就把这一部分我们就最终写出来了。就是里边的这么一个结构啊，所以各位把这个按照我这个结构能给它做到，另外除了这个之外呢，里边还有一个地方，就是现在这个地方，当我现在啊，一会我重启，当我现在选择就是某一个名字的时候，它是不是也会做到这个效果，就咱把这个也做一下啊，那这部分因为比之前简单很多，咱就快速找一下啊。我们找到那个医院的名称、位置。

医院名称应该是在下面的这个位置，在里边呢，咱们也是绑定一个事件，就是当我点击名字，让他也做一个跳转。啊，那我们找一下啊，找到那个医院名字啊，医院名字应该是在这个便利的。这个位置。就现在里边我给他绑定事件，然后事件中加个方法传入这个就是你的这个host code编号，这个方法当我们一点，它也会进入到我们的详情页面中做个显示啊，就是里边的这个地方。咱给他快速写出来，然后咱们重启做一下最终测试。这个啊，我先拿过来，这是刚才这两个方法，然后还有最后这个方法。这个方法做的事情就是，当我们点击某个医院的名称，那它就跳转到这个详情的页面中，显示你的。

最终内容。所以咱们现在我就把这个首页数据的显示，我们现在应该就最终完成了，就是里边的这么一个效果。然后完成之后，我现在啊，把这服务给它重启一下，因为里面加了很多内容，重启之后咱们最终做个测试，看一下最后这个显示的效果到底是怎么样的，那我们先等待它重启起来，然后咱们测试。好，现在服务已经启动了，然后咱们来到页面中，比如现在我们刷新，大家看有这么一个结构，比如我们现在啊，点击全部是不是显示出来了，我点击三级甲等就是它，比如点个三级综合是不是就没有那种，因为它是三级甲等，比如现在我点击区县，点击一个中城区没有继城区是不是有这个数据，所以现在把这个做到了，包括做到之后这里边有个小bug啊，如果想实现点击某一个是不是要是一个选中状态啊，目前是没有，那我们看一下为什么没有啊，他就没有选中，这是为什么？

咱找一下就是我们这个位置，咱发现啊，选中的时候是不是这个样式要生调，就是样式部分咱要做一个判断嘛，当你的样式值就是它这个索引跟它一样，我们样式生效。如果不一样就不生效，所以这个样式呢，这部分我就从里边给大家直接拿过来啊，就是你看我这个位置做了一个三元表达式的判断，如果你所值相同，用到select体的样式，如果不相同，那它只就会等于空，所以这个咱需要做一个简单的判断啊，这个写出来了，然后除了这个之外，下面还有这个地区部分跟它应该是一模一样的，我把这个给各位也是复制过来。就是里边的这个样式，所以现在这个小bug我们就处理出来了，处理之后我们最后测试一下哈，比如现在我到里边重新做个测试。

啊，咱重新试一下啊呃，有个样式的错乱啊，那我们看一下啊，样式中应该是少了点问题啊，咱给他稍微调整一下啊，样式有点问题。那咱看一下啊，应该是样式中的，我们少了这个部分，然后把它也是拿过来啊，先改这个地区的部分啊，先改这个等级的部分，在等级的盘里边把这加上，然后咱们再改这个地区的部分，在盘里边把这部分加上，然后下面就专门判断这个selected的，刚才我是把这个都去掉了啊，咱应该只去一部分就好了，所现在那就加回来了，加回来之后，最后我们来测试一下啊。然后大家看目前要式对了，你看我第一次记录全部是不是选中，比如现在我选择三级甲等是不是选中，三级综合是不是选中，我选择西城区，包括东城区是不是选中，这样的话咱就完成了啊，完成之后呢，我们再试一下这个下拉框，比如在里边呢，我输一个医院，咱就来一个协和医院，你看是不是弹出了一个下拉框，当我点击协和医院是不是进入到详情医院中去啊，这页面因为咱没有写到啊，一会儿咱们会给它完善出来。

但是目前这个效果应该就出来了，所以这就是关于我们里边这个首页数据的这么一个显示，包括咱们通过调用接口，把这个过程我们就最终实现出来了，各位按照我刚才的开发流程，把这个能给他最终实现出来。