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

各位大家好，下面呢，我们继续的完成首页数据显示，在之前内容中呢，咱们把这个接口已经完成的调用数据都已经得到了，那我们下面呢，在页面中就把数据电力做个显示，首先呢，我们先做第一部分就是里边的医院等级显示，那下面我们来做一下。咱们看到医院等级的集合名字叫house type list，那我们找到这个医院等级的位置，把它来显示一下，咱们往上边找一下。大家看医院等级是不是在里边的这个位置，那这个位置中等，咱现在把它电力就可以了，那下面给大家写一下，我就保留一个，其他的也都去掉。就保留一个，然后在这里边我们怎么遍历呢？咱们之前讲过，在voe中呢，有一个指令，这指令名字是不是叫V杠后，咱们通过V-for把这个集合或者说数组做遍历，然后咱们遍历一下，比如说我给它起个名字，我就叫这个item。

包括它的索引。然后加个in，把它遍历，遍历之后给这个标签加上一个K，就是它的V标识，咱们用这个index，所以这样的话呢，就完成电力。电历之后呢，我们可以显示里边的内容，那我们加上一个差值表示叫这个item，点上name，就是我们这个医院等级名称，所以这样的话呢，咱们通过这段代码就完成了它的这么一个便利显示，这个我们就做到了，然后做到之后咱们继续往下写，除了这个之外呢，大家看这位置是不是咱们那个地区的地方，那这个地区我们也需要给它做一个分力显示。

那地区的名字我们从下面给它复制，就是里边的这个名字distinct list，咱把它拿到上面，用同样的方式把它也是这个便利。那我来写一下，同样我保留一个，其他的把它都删掉，然后在这一个里边，我们同样用这个V-four。遍历名字叫list，在里边我们加一个item，包括它的索引，然后加上一个in，后面呢，加一个冒号K，它的为标识。加上一个index，然后这里边呢，加上咱们那个地区的名称，就是里边这个item点上应该是那名字也是一个叫name。所以这样的话呢，咱们现在就把里面那个医院等级和地区，咱们通过便利最终在页面中做了一个显示，然后做到之后咱下面我把这服务给它重启一下，因为刚才加了新的接口，让它重新启动一下，启动之后到页面中我们看一下最终的效果到底是什么样的。

我们等他先启动。然后启动之后，我们最后做个测试。各位看啊，目前已经行起来了，然后咱们来到一面中，比如现在我一刷新，大家看一面中这个位置，你看啊，这部分是医院等级，下面部分是不是第七啊，医院等级包含里面这些值，咱看一下我们的数据库中是这几个值，三级甲等，三级综合二级甲，二级综合一级甲等等等，包括里边这些地区，现在在地面中都完成显示。所以咱们现在把这一部分我们就做到了等级和地区，然后显示之后呢，下面还有这部分就关于我们的医院的列表信息，那咱们把它也是用同样的方式的就显示出来，那咱们来写一下啊。

医院的这个列表信息，咱们看下它的名字，我们叫这个。是list的，所以咱们把list似的在上面变绿就可以了，而医院列表部分呢，应该是在中间的里边的这个位置啊，咱看下这个数据种啊，应该是在我们的这个地方，都是这个叫V-cut这个地方，那咱怎么做呢？同样的方式咱们保留一个，其他的给他都删掉。所以我们就保留里边的这个啊，这些都给它先拿掉。给删掉，我们现在是有多个，下面这个给它也是。删除掉。然后保留这一个之后呢，在里边咱们用这个V杠后，把它就做一个便利，那我在里边写一下。

V杠。它的这个里边的名字叫list。然后再前面加上它那个，比如我们起个名字就叫这个item in desk口里边加个in，后面加上一个冒号K它这个。唯一标识，这样的话呢，咱就把这个做了一个遍历，遍历之后在下面把它的内容我们做个显示，也就是里边这些值跟前面应该都一样啊，那我下面我就从课件中给各位快速复制一下啊，刚才写的是这个位置。然后它的具体值，首先第一个就是我们这个医院名称，我们叫host name，然后把这个拿回来，这个位置改成差值表达式，取这个值，然后下面有一个叫医院的等级，也就是里边的。这个地方我把它这附过来，医院等级咱是放到这个P里边的这个纸中，这个给它拿过来啊，医院等级。

里边的这个值。然后除了医院等级之外，下面还有它那个就是相关的一个规则，我把这个预约规则放到下面来，就是里边的。这个位置就每天几点放号，然后除了这个之外，最后呢，就是有医院这个图标，但是这个图标呢，给各位特别说明啊，咱之前提到过这个图标或者图片呢，咱是把它呢做了一个BASE64之后，然后给它存到了咱们的数据库中，所以咱们要显示的时候呢，里边需要加一个特别的处理，就是加上这个名字。Date冒号emit加上BASE64，所以现在呢，把这部分咱就改成这种情况啊，就用一个图片就显示，但是图片呢，咱是做了被64处理，所以你需要加一些特别标识，就是date冒号image。

贝推64，这样的话才能完成最终一个显示。所以说咱们现在写到这里为止，就把这个医院的列表信息在页面中完成了显示，就是告后便利最终显示出来，这样的话我们就完成了啊，完成之后我们到页面中来看一下，所以大家看啊，因为目前我们只加了一条数据，你可以加多条，然后在数据中是不是有医院信息，包括名称、等级，几点放号，还有它这个相关的图标，所以现在大家看啊。我们的首页数据部分是不是就完成显示，这个咱就做到了啊，然后做到之后呢，下面做什么呢？大家注意，比如现在我点击全部是不是显示所有一元，我点击三甲，点击三级综合，或者点击某个区，是不是显示里边这个条件查询功能啊，所以咱们一块儿把这完成，或者说我现在输入某一个医院，然后才能进入到医院的详情信息中，做一个医院的这么信息的模糊查询功能，这个咱们由来实现，目前呢，是把首页数据的等级，地区，还有医院列表，咱们完成了最终的这么一个显示。