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

各位大家好，在刚才内容中呢，咱们完成了首页数据相关接口的准备工作，包含我们有四个接口，医院等级查询，医院地区查询，包含医院列表，还有根据名称做某查询，这接口我们都已经准备出来了，那咱们下面呢，就在我们的前端中来调用接口，最终实现数据在首页中的显示，那咱们下面就开始写这个前端代码，咱们看怎么做，我们来写一下啊，首先第一部分呢，咱们之前呢，建了一个U的这么一个文件夹，然后里边有一个蕊快的点JS文件。在这里边呢，咱们把AX iOS是做了封装了，所以咱下面也按照我们跟之前相同的方式怎么做，第一步咱们可以建一个JS文件，然后里边呢，就是编写出咱们那个调用接口的路径，然后我们在页面中引入这个文件，在里边来调用咱们的方法，最终实现功能，那我们下面咱就来这么做一下，首先第一个我在这里边我建个文件夹，比如说我叫API。

然后在API中呢，咱们创建一个JS文件，因为咱们做的是医院嘛，所以我叫这个OSp.JS，包括这里边还有咱们那个数据字典查询，所以我在里边我在创建另外一个文件，我们叫D口点JS。所以这是两个文件创建，然后创建之后咱们首先先来到这个hosp里边做我们的操作，那怎么做呢？给大家写一下，因为之前呢，我们封装的AXYS在这里边是做封装，所以首先第一步把它首先引入进来啊，所以我在里边做过引入我们来一个。Import起个名字，我叫request from。后面加上路径，咱们来一个艾斜杠，我们叫us里边这个request，这样的话把它就做了引入，然后引入之后呢，下面我们写一下里边那个具体方法定义，按照咱们之前学的写法，我们就来一个。

Export加上一个叫default。在抵扣的里边我们做定义，然后咱们写一下，在这里边呢，我们的第一个方法就是查询医院的这个列表，所以我们写个名字，比如我们叫这个get配置。List，然后在里边传入咱们列表参数列表呢是一个条件常用带分页，所以里边三个参数，第一个当前页，第二个每页记住数，第三个是在那个对象，比如我们叫这个search o BG。这样的话，咱把这个就写出来了，然后写完之后呢，在下面我们进一步来写一下，然后下面写法中咱就来一个蕊退，加上一个蕊request，然后后面加上这个括号，包括大括号，在大括号中写上这个结构之前呢都写过，里边主要有这么三个属性，第一个ul，就我们的路径，第二个叫method，就是你的提交方式，第三步是你的参数，比如我们现在我们就来一个叫para pas。

这样的话结构就写出来了，然后写完结构之后，首先在ul里边，咱们把路径先加上，但路径呢，现在我这么来写啊，我在外边来一个固定一个常量值，比如我们叫这个。API这个name，然后在里边加上一个固定的这么一个值，我们给它加上啊，这个值呢，我就从课件中啊，就是从我的这里边复制过来，因为咱们现在用的是统一都是这个路径，不管你是哪个接口，对外都是这个进行访问的，所以咱们给他写这个名字API hospital，然后写完之后呢，在U中我们写上它那个具体地址，首先把这值线取到，咱们用这个表达式的方式叫API name。

后面加上我们那个路径。咱们看一下这路径叫什么，我们叫find hospital list，然后后面传入两个参数，一个当前页。还有一个是每页的记录数利米的，这是我们写的第一个，然后第二个提交方式，咱们的提交方式是一个盖的提交，然后最后有这么一个对象，那我写一下get提交，这是第二个。然后第三个是咱那个参数就是这个4OBG。所以咱们现在把第一个方法就完成定义，查询医院列表，然后定义之后我们再写第二个方法，第二个方法就是根据医院的名称做一个。

模糊查询，那我们写一下啊，比如我叫这个get back。House。然后在里边呢，传入这个就是医院的名称，比如我们起个名字就叫hot，下面呢写的结构跟它类似，我们用它改一下。首先路径我从里面复制，我们叫find by name。后面传入就是医院的名称。Hostname，然后它是get提交，不需要其他参数，这个咱们去掉，所以各位看，现在呢，我就在这个API里边呢，建了一个叫好点JS文件里边定义了医院相关操作的接口，这个就完成了，然后完成之后我们再来到这个第里边，再把这个数据字典相关的接口定义出来。那我就根据这个，咱们给它快速改一下结构应该都一样的，首先第一行引入这个快的文件，然后第二行加上咱的路径，然后找一下第一课里边路径，我们是这个路径啊，或者说你把这个接口可以重新再写一个，我就在里边直接用了，因为他们都是相同的接口。

把这个拿过来，然后拿过来之后在这里边呢，我们需要调的有两个接口，然后写一下啊，首先第一个接口，我们是根据这个叫递code获取你的下级节点，就是根据它可以得到我们的医院等级，然后第二个根据ID能得到里边的子数据列表，也是得到我们那个相关那个市下面的区县等等内容，那咱们先写第一个。根据第一个扣的获取下一节点，然后把这方法咱们快速给它改一下，比如说给它起个名字啊，这个名字比如我就叫这个范的范。

第一套，靠倒。在里边呢，传入这个date code这么一个参数，把这个拿过来，然后下面呢，加上它这个路径，路径我从里边复制，我们叫find by code。然后后面传入反这参数，它的提交方式就是一个get率提交，所以这是里边的第一个接口定义，然后定义之后我们再写第二个接口，第二个接口就是根据我们这个ID址获取它的下级节点，那我来写一下啊，给它起个名字，比如我叫这个饭这个。呃，By parent ID。里边传入这个就是ID值啊，比如说我们叫parent ID，然后下面呢，加上它的路径，我们的路径就是find child date。是我们起的名字，然后把这个ID传过来，最终它引一个get提交，所以现在我们在API中把里边的接口就都定义完成了，一会咱们调就可以了，所以各位把这个能快速做到，然后做到之后呢，咱们下面是不是要在页面中做调用了，也就是我们页面的中间的这个位置是不是要调一下呀？那咱们下面就来实验一下，比如说咱们一会儿先实现里边这个医院等级，再实现这个地区里边这个就是区县的这个显示，把这两部分我们先做到，那下面我们来写一下啊，咱就先写一下这个扎va部分，然后异变我们再整合。

那我来到下面啊，在下面怎么做呢？首先咱是先把这两个je文件先引入进来啊，你只有引入之后，最终是不是才能做调用啊，所以咱们首先先把它用这个import先做一个引入，那咱给它就快速写下啊。首先第一个呢，我们加一个port，这个叫hospital，比如叫A片，然后from加上路径，我们来一个at斜杠A片。

好的皮草，这是里边的第一个这么引入。然后这个引入之后呢，我们再引入第二个就是里边这个这个那我们引入啊import。A片from加上这个I斜杠A片D。这样的话引入咱就完成了，完成之后在里边呢，我们可以做一下具体这么一个调用。那咱们要怎么调用呢？给各位强调啊，其实写法呢，跟咱们之前写那个后台管理系统中的代码是一样的，但是咱们在用这个就是NAS的搭建环境，中心提到NAS是不是叫服务端渲染技术，也就是说如果你按照之前方式，那就体验不出nat这个特点了，那咱们怎么做这个叫服务端渲染技术呢？在nat中有一个特别的写法，能专注做到这个，就是我们之前提这个。

服务端渲染，也就说在你渲染这个组建之前，然后获取数据，就是咱通俗说的服务端的一个渲染，那我们现在就用这种方式，咱先做一个操作，因为各位知道我第一次进入页面，我页面中这个医院列表是不是肯定要调用进行显示啊，就是第一次要显示里面内容，所以咱们先把这个用这个就是服务端渲染来做操作，就是用服务端渲染技术来显示我们的医院的列表，移进入页面，通过方式你要做显示。那怎么显示呢，在这里边呢，有这么一个写法，大家看我的课件中啊，里面这个做法。然后它的做法就是呢，我们加上一个方法，名字就是里边的这个名字叫asy c date，然后这就表示在你的渲染组件之前，异步获取数据，就是咱们经常说那个副端渲染，然后通过它来实现我们的具体功能，那我现在把这个给各位，我就快速给他写下啊，我先把它复制过来，然后咱们把它具体做这么一个实现，我先做一个复制啊。

先拿过来用服务端渲染技术做到，然后这个取来之后怎么做呢？我说下这个特点，就这个方法在我们页面加载中只执行一次，但是它是一种服务端渲染技术，因为咱们第一次进入页面肯定要去加载元列表，所以我把这操作就写到这里面去，然后在这方法中呢，有两个参数。给各位特别说一下啊，第一个参数角paramo什么意思呢？它就能得到你路径中这个值，这可以得到，然后后面会有这个例子啊，大家先知道第二个叫I种能得到里面这个异常信息，比如咱们之前第一个值，我们用那个叫z.root.pid是不是能得到，而目前用p.ID可以直接得到，就是把这些代码做了简化。

然后这个写完之后，我们在里边就来做这个最终的一个调用，注意它的写法啊，在调的时候呢，首先咱要加个关键字，叫这个瑞屯，这是必须的，你不加瑞屯它不能调用，然后蕊的后面加上你调的那个就是方法，那我们找一下这个方法啊，我这个方法你看这个叫get配置。List的把它拿回来，然后里边传参数，因为它只调一次嘛，比如我们就写当前页一每页，比如显示失效记录，第三个条件目前没有，咱先来一个空，这时候我们写一个结构，然后下面加一个点z.Z里边我们加一个response箭头函数，通过response是不是能得到里面的数据哦，这跟咱们之前是一样的，而这个写完之后大家注意啊，咱们之前写法中是不是有这么一个方法叫这个date呀。

这个应该记得啊，Date中定义的是不是你一些变量和初始值，就是我们现在也能这么做date中定义，然后里边用这点这个名字等于值，但是我们在这个就是服务端渲染这个异步操作中，里边有个好处，就是里边的很多代码给咱们做了这么一个封装，咱们不需要在电子中进行定义，里边可以直接进行定义，那怎么做给大家写一下啊，咱们可以来一个这个叫铝退，然后加个大括号，比如说我们通过这个response.date点上这个叫content。咱之前用过啊，如果大家不记得，我这里可以再写一下，咱们找到这里边，这里边有一个叫hospitals。然后在里边有个方法叫get contents，得到的是一个历子集合呀，就是这个名字，通过它能得到里面的数据，所以我们现在就是点上这个叫content得到数据，但是数据之前咱是这么写的，比如data.list是不是等于它呀，但这需要定义，而目前不需要这么麻烦，咱怎么做，我来一个list的冒号，这个值它就表示你在这里边定义了一个变量叫list，然后把这值复制给例子，就这么一过程，所以它给我们做了简化，然后除了这个之外呢，里边还有一就是那个总的一个页数，然后面需要比如我们起个名字叫这个配置子。

然后加上一个response.date。点上那个配置词，那咱看一下那个名字叫什么啊，到里面看一下。就是这个hospitals，点上get，应该是这个叫total配置啊，是这么一个名字，所以咱们把这个total配置词给它拿过来，这样的话我们就完成了这么一个异步调用，也就是咱们通俗说的服务端渲染技术，当你第一次进入页面，那这数据它里边就会查出来，然后咱们一会儿在页面中做一个便利显示。

啊，这是我们的第一部分，然后这个写完之后，咱你往下走啊，就是下面做什么呢？因为在我们的首页面中，我除了这个之外，是不还需要有这个医院的等级，包括这个相关的地区这些值啊，所以这些值咱们也需要进行查询，那怎么做给各位写一下啊，比如说先把结构写出来，有一个date。然后有一个created。包括还有一个叫methods。这是我们写的一个结构，然后在date中呢，咱们需要定义它的变量和初始值，那这几个值我就从课件中给各位直接复制过来了，因为这些值是咱一会儿需要的。然后我复制之后，我们看一下啊，第一个叫测OBG是为了一会儿做那个条件查询待分页的一元列表做导，这是当前页务的记录数，然后下面有这三个值，Host name是表示你那个医院的名称。

我写一下啊，医院的名称这个house type list子什么意思啊，表示你那个医院等级的这个就是集合或者列表，然后这个叫disting例子，表示你那个地区的这么一个集合，也就是我们在页面中的这是等级，这是地区啊，所以咱们写两个集合，然后下面这两值就为了咱人之前做过类似，比如现在我点击这个叫三级医院，那三级医院我是不是选中，比如现在我点击了朝阳区，那朝阳区是不是一个选中状态，所以咱们为了后面做这个方面加了这两支。所以这是关于在data中做的一个定义，然后这些定义之后呢，咱们下面就可以调方法，把我们这个就是医院等级还有地区给他就是查出来，最终做个显示，那下面我们给它调下啊，那我把这方法我就写到这个麦里边了，比如大家起个名字我叫这个。

In啊，名字你可以随便起，然后in中，比如说我做这么两件事情，第一个查询你那个医院的。等级的列表，然后咱们再查询，就是我这个所有的地区的列表，比如我这里边查询肯定是北京市下面的哪些区域，所以咱们就这么来查询，那下面在里边我就写一下啊，我就在里面直接做了第一个查询医院等级列表。然后大家看怎么做啊，刚才我把这个是不是引入了。那有之后呢，咱就调这个DAPI里边的大家看啊，是不是咱们可以调这个方法呀，根据你的D和code来查询里边的那种。而did code是什么呢？大家看这位置是不是叫house type呀，咱通过house type就能查到里边相关的内容啊，所以现在我们就可以这么来做，通过这个我们做这么一个查询，各位看这接口之前咱们都是写过的，就是里边的这个接口。

然后根据他得到里边的对应这个内容啊，包括这接口咱可以再回顾一下啊，之前写过的，就根据你看code。得到它的对象，然后根据ID看下面的子节点，这节点就是咱说的医院的等级这个信息。所以这样的话，这个咱就。做了一个说明，下面我在里面就调一下，看一下结果啊，然后写一下DAPI，然后掉的是find by date code里边传入这个值，这个值呢，就是咱们刚才看的这个值。Have。拿过来，然后给它加上这么一个，就是点赞。里边写上一个response。建造函数，通过response可以得到里边的具体内容啊，咱可以做个操作，但是内容中呢，大家看啊，我这里边呢，有一个叫全部，后面是不是等级啊，就是这个全部，咱可以写固定的后面值便利，但是比如说我想这么做啊，我想把这个全部和等级一起给他便利显示。

我说各位是否能听懂我的意思啊，我的意思就是啊，全部你可以不便利这些写过固定值，就是它所有包括后面值，咱可以给他便利显示，但是现在我想做的稍微麻烦那么一点点，想把全部跟我的等级一起遍利出来，包括下面我也这么来做，那咱们看这代码怎么写啊，就是一个简单的简单处理，那我写一下，首先第一个我们这里边要向这里边进行显示，是不是要这个叫how type list，所以第一个呢，咱先把这个how type list给它先清空一下，因为里边可能有其他内容，所以先做个清空，就是这个。耗子太。List，先让它等一个空。然后等于空之后呢，我们下面怎么做呢？因为在里面有一个全部，所以咱们就向这个好type例子中添加上这个全部的这么一个值，为了咱一块儿做显示，那怎么加呢？我写一下啊，就是这次点上这个house type。

List的，然后在里面有个方法，这些方法叫做push，各位看这方法啊，Push表示呢，向里面加内容，然后内容中我们有一个这个name。内部的值，我们就叫这个全部，然后第二个它有一个叫这个应该叫Y6啊Y6值，比如说现在我们就给它写一个这个空。所以这样的话呢，咱们现在就把这个结构给它做出来了，但是这里边的值你需要写到一个就是数组里面，因为是往里边和内容，所以也就是说现在当我已执行的时候呢，咱们先向这个house type list中先放个全部的值，然后把其他值通过re response得到，再往里面放进去，那我们来写一下啊，就是下面操作，把我们接口返回的数据再给它添加到这个house type list中去。

那怎么做呢？各位看啊，我们接口返回数据应该是一个数组形式嘛，所以咱把它呢，就可以做一个便利，然后往里边放那种啊，那咱给他就。便利下啊。我来写一下，哎，我们就来一个这个来一个YI等于零，I小于这个就是response，点上it，点上一个叫是不是这个叫。认识啊，因为它返回的是一个复组形式嘛，咱们把它值得到，然后这个得到之后，咱后面再写一个叫爱加加啊，这是我们写的这么一个基本结构，因为它是这么一个返回，包括各位看这个数据中。你看啊，返回的是不是就是一个。

List集合，所以它是一个数组形式嘛，咱用类得的长度，然后得到之后呢，咱们可以得到里边的每一个值，然后写一下啊response.date。这是一个数组，那数组里边咱们再加上一个这个I。是不是就可以了，就得到每一个值，然后得到每一个值之后，咱们把里边的每一个值是不是可以给它放到我们这个就是house type list中去，那我给他就直接放下啊，点上一个叫push，然后向里边放入咱们那个那种。啊，包括按照上面这个结构啊，咱们把这个直接放进去就可以了啊，就是这个结构啊，这个它放进去。所以大家看啊，就是目前呢，咱就可以说通过这段代码就完成了里边这个最终这个操作啊，把这个我们应该就初步给他做到了。然后这过程给各位再说一遍啊，它要稍微麻烦一点点，就在过程中呢，咱们的做法就是首先在里边我们调用接口，然后调用接口之后得到我们这个所有的这个医院等级信息，通过这个data code的经行查询，而在医院等级信息中，比如像里边我想放个全部一个显示，所以用push往里放个全部，放完全部之后，把这个接口返回的数字给它，便利得到里边的每一个值，把每一个值再放到咱这个house type例子中去，用push方法得到，所以这是我们写的就是里边的第一部分。

我们现在就把医院等级这个数据就查出来了，然后查出这个数据之后呢，咱再查下一个。就是查询你的那个地区的数据，那咱们写一下啊，跟上面写法应该说差不多，咱就快速做一下，我们写一个地A片。点上里边的是这个方法，就是这个find把这个啊，这是查ID，其实现在用的应该应该还是这个方法啊，因为咱要查那个北京市下边哪些这个区县，所以里边加上这个叫Co。

那我们来找一下啊，就里边这个值。大家看啊，它的值是不是就叫北京就这个啊，所以咱根据它这个查询就可以了，然后查询之后下面的写法跟上面基本上是一样的，那咱就快速写一下啊，Response。箭头函数，然后写的过程中，首先咱先把那个地区的这个集合就让它变成空，然后变成空之后向地区的这里边放入，还是我们那个说的那个全部的这个值，我们加上一个叫push。然后push里边呢，加上你那个全部，我就把这部分直接复制过来。然后加上之后呢，咱下面做法就是把response反映数据，是不是也是给他做个便利，便利之后我们就可以做一个显示，那这便历我们写一下啊，就是用上面方式变历是完全可以的，但是咱可以把变历再换一种写法，比如这么写啊，我来一个light I是不是来一个in，是不是也能变利，然后加上一个response.date跟上面一样，然后变利之后，咱们像这个distinct list里边用push。

放它的值啊，就是写一个response.date。加上这么一个I。所以这样的话呢，咱们现在就把这个。里边的两个接口调用就完成了，第一个就是查询医院等级，第二是查询我们的地区的这个数据，所以这个我们就做到了，各位把它能快速写出来，也都是我们之前。一直用的这些写法，然后写完之后大家注意这个方法，所以说是不是要调用一下呀，所以咱在里边就调用一下this.init1进入页面，咱就把这个医院等级、地区，包括里边这个医院列表都查出来，然后在页面中做显示。

所以目前咱就把这个最基本的三个调用就写出来了，然后写出来之后呢，最后做的是不是在页面中。咱们把它做一个便利显示，那咱们马上做个实现。