88-尚硅谷-尚医通-后台系统-医院管理-医院列表-前端整合

各位同学大家好，我们继续来开发医院列表功能，下面呢，咱们开始完成医院列表的前端的开发功能。那咱们看前端我们该怎么开发。首先我们要做的第一部分，按照咱们之前讲到的，咱们在里边是不是要先加上一个路由，那比如说一会儿我们这么来做。咱们就在这个医院设置管理中加上一个路由，我们就医院列表，然后加上之后当我点击医院列表，那我在页面中就显示我们像内容，而做的效果就是刚才给大家画出来的这么一个结果，那下面我们就来做一下。首先第一部分我就按照课件中的流程，咱们先添加上一个路由，那路由我们来加一下啊，咱们找到我们这个潜在项目，各位应该知道咱之前加过很多次路由加到哪里。什么地方，是不是在这个router里边的inext点宅子里面，那咱找到上面有一个医院管理中，那在里边呢？比如现在我们加上一个叫医院列表，我把这部分咱们在复制一份，然后我给它拿到我们的最下边来。

就是我们的这个地方，我们给它加一个逗号，然后加上一个。静那种，就这个位置，我们叫医院列表，为了区分把这个咱他改个名字，比如叫这个hospital。例子，这是我们加的这么一个那种，然后下面给它改一下医院列表，这个位置呢，加上是医院列表的页面，那页面呢，但是放到这个views里，我现在在views中，比如说咱们再来创建文件夹，我就叫hospital。Host，然后在hospital里面呢，创建一个页面，咱们叫list点。View，一会儿咱们把内容就写到这里边，然后我这位置把路径改一下waves里边的hostsp list，这样的话咱们现在把这路由我们就快速加上了，这就是前端开发中的第一部分添加路由，各位找到文件把这个加上可以了，然后加上之后我们来看一下目前在里边是不是有这个叫做意愿列表路由是不是有了，当我们一点击到页面中进行显示。

啊，这是第一部分，然后第二部分呢，我们写页面，页面中呢，因为咱们一会儿实现过程中呢，肯定要调用接口，包括做这个相关操作，那我们下面呢，把这接口按照咱这些过程，我就在API里边咱们做一个定义，为了一会儿调用做准备，那这接口调用我就仿照其他的，比如说我现在把这D这个之前写的文件咱们再复制一份。然后给它改个名字，我就叫这个host。然后在这个hospital里边呢，在定义列种第一个就是医院列表。

然后医院列表中我给它起个名字，比如说给它起名，我就叫这个get hosp list，在医院列表中咱需要传入这么几个参数，各位应该知道，就是包含它的当前页。比如我们叫这个。哎，我就叫配置了啊，当前页，然后包含每页技术数，还有你那个条件对象，条件对象我们就叫search OC。这是我们传的这个值，然后传完值之后，下面呢，咱们写上院列表，它那个接口，这个接口呢，我就到这里边，我们来找一下医院列表接口啊，这些先关掉，咱们把医院那个打开。医院在我们这个位置这里。然后它的列表是这么一个接口路径，我把路径给各位直接复制过来，就是这个路径。

然后后面加上他的名字，他的名字叫这个list。在例后面呢，我们要传入我们的那么几个参数，第一个当前页咱们要配置。然后第二个用表达式，我们叫这个利，然后它的提交方式，咱们看是一个钙的提交，并且它需要传这个对象，但这对象呢，给各位强调啊。因为目前这个对象，这个参数传递，这里边我们用的并不是快的body，如果你用这块的body，那怎么写，各位应该记得啊，咱之前写过，咱是不是用这个date，是不是用G传递，包括你需要是一个hot交。但是目前呢是get提交，所以咱们这里边我们就不能用那个date，那咱们用什么呢？大家看我的写法啊，我们加一个叫。然后加上那个对象名称。通过这种方式最后传递。我把这个提出来。

加上这个叫search o BD。这样的话，咱们把这个接口就定义完成了，关于医院列表接口定义。那这个写完之后呢，咱再写下一个接口，就是咱们刚才写那个接口。根据D和code查询我们的所有那个。子节点，而我们在里边用的应该是查询它那个所有的省。那咱们把这个我们做个定义。首先在里边呢，我写上这个方法，我们就在这个find by第一个扣把这个拿过来。在里边有这个参数，参数我们就叫bit。在里边呢，写上它这个结构，那结构中我还是把路径给各位复制过来，这个路径呢，是咱刚才写的这个地址，我把它最后复制。这是他的。

前面部分，然后还有它的后面部分，后面部分呢，是里边的这个名字叫find by did扣的传入你的did扣。然后d code，咱用表达式把这个直接给他传回来，传回来之后往下来看，下面呢，它是一个get提交，然后不需要加参数，这单给他改一下就可以了，这时候我们写的第二个接口完成了。然后完成之后，下面呢，我们再写第三个接口，第三个接口做什么呢？因为现在我是不是要做一个二级联动啊，当我点击某一个省，是不是要显示它下面的市啊，所以咱们需要再来调度接口，根据省而查出下面的所有的市，这个接口之前我们写过，就是根据这个。值，然后ID值查询它下面那个所有的内容，那下面咱们把这个我们先找一下啊，应该也是在我们的地。这里边我们看到。

这个用的接口是不是就是它呀，根据ID查它下面的子节点的这么一个数据，那咱们把这个接口可定出来，为了一会儿做那个二级联动显示做准备。拿过来，然后咱给他起个名字，我叫find child ID。然后里边传入这么一个就是ID值。我就来一个ID。下面呢，写上他这个地址。我把这个啊，咱给他快速完成下。这些应该没有什么难点，就各位找到接口，根据你写的把接口路径直接复制可以了。我们找到这个find child date。传入你的ID。然后它的下面是一个盖子提交。所以这样的话呢，咱就在这个API里边的好的披点宅里边，把咱们一会儿需要的三个接口就定出来了，这就完成了，也就是里边前在开发中的第二步，然后这个完成之后呢，咱的第三步就开始写这个页面部分，也就是说在刚才我们写这个历vuee这一面中来完成我们最终的具体内容。

那这个过程中咱之前讲到过，因为咱们现在用这个前端的模板，它是基于这个voe加上element UI负的实现的，所以这里面我们写的应该就是这个element UI中的相关的这个代码，通过element UI能快速整合我们的因为效果，这个效果我就从课件中复制一下，然后一会儿咱重点写这个Java部分，因为页面中这个效果部分都是F中固定代码，那这个代码我就给各位分制过来，然后咱们给它详细看一遍，最终写它的Java词汇部分。那这个给各位拿过来。就是里边的这个结构拿回来之后，我们来看一下啊，这结构中是怎么写的，首先前面不用说了，就是这个to div都写在我们的这里边。

这个结构，然后这个写完之后往下看啊，首先第一部分就是我们在这位置，我叫e form，大家看啊到这里，然后yellow form里边是什么呢？其实就是我们刚才说的里边的这个地方，然后做一个条件查询部分，那个条件的输入框部分。它是一个报表单。然后在里边的结构我们来看一下啊，首先里边的第一部分我们看这个。E form item第一部分呢，我们要显示是所的省，所以里边用yellow select把省显示，然后第二个显示所有的市，包括下面有这个医院名称，而最下边我们就有这个查询按钮或者这个清库按钮，这是我们的第一部分条件部分。然后除了它之外，下面的应该是我们的一个列表部分，就这个e table列表。

包括里边显示我们的这些值啊，比如说我们看有医院的这个标志logo，包括它的名称等级等信息，这里边都存在，然后除了这个之外，下面有一外分页的组件，也是I意外中的部分，所以现在咱们把这个页面部分给它就复制过来了，然后复制之后下面呢，咱写这个Java词汇部分。把这个我们来写一下。Javascript，那Java的部分怎么写呢？给大家做一下，首先第一部分，因为咱们要调用刚才我们在hospital中定义的接口，那他首先把它是不是先引入进来了，我们叫import，比如说叫hospital。A片。From加上路径at-API。Hospital，这样的话把它就引入了，引入之后呢，在这个里边写上它的结构，首先第一个结构，再加上一个date。

然后里边加一个蕊退，就是定义它的变量和初始值，咱一会定义，然后除了这个之外，下面还有什么，是不是有一个方法叫。Create表示你页面炫示执行，也就你进入页面就做什么事情，比如说咱们一会儿一进入页面是不是要显示的少，并且把我第一页数据的列表是做过显示，所以这是我们的第二个create的方法，然后除了它之外，下面还有一部分是不是叫这个。Methods在method里边，那就定义它的具体方法，所以这是一个我们写的这么一个结构，然后结构写完之后，咱们下面来写一下第一部分在date中呢，就来定一下它的变量和初始值，比如咱做列表中那个例子，或者咱们做省市联动，包括那个条件对象的值带里边我们都可以做定义，那下面我们就定一下哈，咱看一下我的课件中，这就这些值嘛。

那这些值我就把它直接咱就对过来了啊，就是里边的这么几个。我把它拿过来。然后咱们详细看一下啊，首先第一个值呢，它叫list loading，什么值呢？也就是说你在列表的时候的这个值，这个值呢，它的值我们设置的话，比如说这个值我们设置to或者false，在你显示列表中最开始有一个转的图标，就做一个加载图标，但是这个可以没有跟我功能影响不大啊，咱们得加上，然后第二个重点，它叫list，这list是什么呢？就是咱们做那个医院。列表数据的这个粒子集合或者一个数组，然后这列有个total，识别那个总计数数配置limit用于分页，色是OBD是长景对象，包含有这两个东西。给各位说一下啊，这是什么呢。

是咱们所有的省的那个集合，火车数度，然后下一个叫cities，是你省里边的所有的市的这么一个集合啊，包括这是医院数据列表这个集合。所以这样的话呢，我们在里边把这几个初始值咱们就定出来了，然后定义之后咱们继续往下来做，因为现在呢，我们一进入页面是不是就要查询出你里边这个就是医院列表功能，最后在里边解决方法。比如说这个方法，我起名字啊，我就叫这个。Fetch，这个date。这个方法，然后这个方法咱们做的就是我们说那个医院列表，这个方法我写一下啊，医院列表。然后在方法中，咱们需要传入几个值，因为它有分页嘛，所以咱来一个配置，然后它默认值就是等于一，然后下面我们写一个这点配置等于配置，这种写法之前咱们写过啊，就是如果说你这里边传入你这个页码数，那就是这个页码数，如果你不传的话，默认就是一。

这个写完之后，咱们调用这个好的PAPI中那个列表方法。咱们来调一下啊，这个方法刚才写过，应该叫是这个名字，Get好，披头list里边传入几个参数，第一个参数。当前页第二个参数，每页记住数第三个参数是你那个条件对象就是设置OBD。包括各位看到啊，在上面这个位置是不是有四零飞机，这是少。这是是，然后这是月名称，所以咱们把对象传过来是不是就可以了，直接就调用。然后这个传来之后，下面怎么做呢？按照咱的写法啊，我们写一个点赞里边加上一个response。

箭头函数，然后咱们通过这个response什么得到里边那个数据，就是把它得到这个比较明确啊，然后这个数据咱看一下啊，在里边它如果说咱直接通过这个放点date得到，是不是这个叫配置model这个对象，而配置model中咱后得到什么，咱看下源码中，比如你看里边啊有这么些值。各位看到。一个叫get total配置。还有一个叫get，这个total elements，是不是通过这些值我们做操作啊，包括里边有一些其他的数据，那在下面把这值我们给它就直接获取一下啊，也就是里边的这么一个写法，比如你看我里写到的。例子中这个叫content，就你的例子集合，这叫total elements是在那个总记录数啊，包括这个值改成false就加载之后这值就让它不再转那个图标再显示了啊，就是这个值。或者说如果你通过这个看不出来，其实你可以这么写啊，大家看啊，我们写一个配置model。

点上get，你看里边一个名字是不是叫get content，咱通过名字叫content得到里边这个就是。粒子集合，另外里边还有一个，咱再写一个。配置model.get这个叫total elements得到是不是你那个总记录数，所以咱们用这个值把它都可以得到，那下面在里边我就给各位写一下哈，咱们这个怎么写，首先第一个就咱那个。每页数据那个。激活。它的做法就是response，点上date上，这个叫。党。然后上面我们写一个这点list。等于这个值，这是每页数据的粒子集合，然后除了这个之外，还有咱们那个就是总。记录数，咱们来一个response.date，点上刚才咱们见的这个名字。

Total element。把这个给各位拿过来，然后咱们写一个这次点。应该这个叫。Total。等于我们里边的这个值，这是它那个总记录数，然后除了这个之外，咱们把这个例子load顶给它设置成false，就是让它不显示啊，就是我们那个加载到图标不。显示，因为你数据显示之后，图标就不需要显示了，给咱们来一个post，这样的话，我们现在就把这个医院列表的调部分就完成了啊各位知道这个特点啊，如果这个你记不住，你通过这个代码里边能看到它的值到底是什么，里边都有这个结果。然后这个写完之后，咱现在把这个最基本的部分应该就完成了，完成之后，因为我们一进入页面，这方法是不是要调用啊，你调的过程中才能得到你那个数据列表，C单板方法怎么做，在咱可里边是不是调一下。

然后写一下哈。调用一元列表这个方法，我们写一个这点FA date是不是就可以了啊，当然你可以传个一啊，你不传一默认值也是一啊，这就不需要传了，这样的话咱们就把这个做大了，就能实现出我们这个医院列表不能显示。啊，这是我们做的第一部分，然后这个显示之后呢，咱功能并没有做完，咱继续往下做。下面做什么呢？其实就是上面的这个条件部分，也就是说我们的定位置。然后这里做什么呢？因为咱们第一次用页面，我所有的省份是不是要显示，所以现在我就需要把那个所有的省份给他查出来，为了这里边能做个显示，为了一会儿做那个联动，咱做准备，那我现在就把那个所有咱给他就快速查下啊，看这个怎么来做。

那我就来写一下啊。给各位写到这里啊，就是find o，我们叫province。啊。然后在里边怎么查呢？我先加个注释啊。查询。做的少。然后这里边咱就调一下方法就可以了，好，A片里边这个方法，就刚才我们写到这个方法叫find by code。然后在里边呢，我们给它传入一个参数，这参数就是数据库中的这个参数叫province。把它拿回来，然后咱们加上一个这么一个点字。里边写上一个response建头函数，通过response能得到里面那个内容，比如说咱们看到在这里边返回到就date里边是不是就一个历次集合，那物里的放点date的是不是这个集合，然后咱们把它就放到我们那个就是省的那个D到变量中去就可以了啊，也就是里边的这么一个结构，那这里边快速写一下啊。

我们就写一个this，点这个叫pro list是咱们在上面定义的这个变量，然后咱们就让它等于这个response.date。是不是就可以了，这样的话就完成了，完成之后把这方法同样在这里边，咱们调用一下，您为了第一次显示。爬行。所有省的办法，咱们来一个这点，Find o province。完成了啊，然后这个完成之后呢，咱们就是在这个proce list中有咱的数据，而这数据大家看在我页面中的这个位置。来看这个代码啊，首先yellow at下列表option中V-four，把它遍历，在遍历过程中，咱取它的key，取它里面的label显示名字，取Y中就是它的ID值，这样的话，这位置中是不是就能完成这么一个显示。

所以现在咱就把这个最基本的结构应该就做到了啊，当然后面还有细节咱马上来做，就是目前大部分部分应该都已经给他完成了啊，所以各位啊，把这过程应该能给他快速写出来，跟咱之前写的这些功能应该说都差不多。那这个写完之后呢，咱再看下面一个操作啊，大家看啊，就是目前这个条件查询，包括分页部分，我们大部分应该写完了，但是里边还有这么两个细节问题，第一个细节就咱说这联动，还有第二个是里边这个分页，那咱们先把这个联动先写完，然后再写这分页。那联动怎么写，各位看到啊，就是目前呢，在我这里边来看手的这个位置。因为我第一次就页面所有省是不是显示了，刚才咱们调用了，但我所有市第一次是等于空了，而我实验的话，当我就是选择这个某个省的话，是不是要直接显示省里边的市哦，最后在省里边我这位置各位看到绑定一个世界就称职，那下面咱就把这方法实现，当我点击某一个省来显示里边对应那个市的这个内容，包括这个位置，咱选择某一个就把这值放到这个。

为这一点，Province课中，下面我们来写这个方法。做这联动，然后写到这个位置啊。这里。点击。某个省。显示里边的那个是的这个内容也就经常说那个联动的一个效果。那咱们实现啊，我写上这个方法，Pronce趁着的，那这方法怎么做呢？其实咱做法是不是还是去调用，我们就是定义那个方法，最终实现是不可以了，也是调这方法直接写就可以了啊，没有什么特别的，那写之前我这里边啊，先做一些初始化操作，比如把这个了，我就直接复制过来啊。

就是直接做个复制。大家看到啊，就首先先。初始化的你那个值值里边这两个，第一个就是里边那个CT，例子咱那个城式的即口先等为空，清空一下，然后第二个CD Co也要等于空，然后这个写完之后，下面单调调一下我们的方法。啊，我们掉。调用方法，根据你的省的ID。查询它下面那个子节点，就是它里面那个是吗？就是子节点嘛。我们写一个hospital A片点上刚才的应该是是这个方法，Find child ID。然后里边传这个值就是this.search od.proce这个。ID哎，我到上面复制一下啊，应该是里边的这个值。Province code就是他。

这个拿过来，呃，在这里。然后洗完之后，咱们加上一个点字。Response。箭头函数。通过response把这数据得到啊，就是response。点上date，把它复制给这个叫c list。这样的话是不是可以了，咱就做出来一个省市联动，当我点击某一个省，它就显示里边对应那个智那种这个完成了啊，然后完成之后呢，这里边应该还有最后一部分，就是里面那个分页部分，也就是里边的大家看啊这个位置。你看啊，就是目前我这里边加了一个方法叫size change，比如说你做那个页码的变化，它会做到啊，这是我们那个方法叫by date。是这个应该是调用了我们这个列表啊，就是第一次当你后面做密码切换，应该调这个叫change size，所以咱把这个给他弄一下啊。

这是最后一个方法到这里。就是我们做这个分页里边那个。页码的一个。切换我们叫change size，也就是说你当前选的第一页，第二页或者上一页下一页里边会有一个页码的变化，然后做操作啊，那我这个给各位就直接复制一下啊，就是里边这个内容。然后内容是什么呢？我强调啊，这里变化其实指的是这个利米，比如我现在啊，我当前显示就是每页显示五条记录，每页显示十条记录，然后里边你做个选择，也就是说我们的这个位置，比如选择五，每页显示五条，显示十，每页显示十条，然后它里边会把厘米做个变化，而你分页不需要，因为分页中它自动帮你传你是哪一页，咱们做的是每页显示多少条记录变化。比如说每页显示五条，包括每页显示词十条，每页显示20条，那它分成几页是不一定了，所以这里边啊，用这个自我操作，包括你看这个位置，我们调这个叫by date方法，最终传入你的页码数自我查询啊，这是那个耶码数的那个变化。

啊，具体说应该是一个变化。所以咱们现在啊，通过这些代码把这功能应该就初步做到了，那做到之后呢，咱下面来做个测试，看目前这个过程中，我们的这个医院列表功能最终能不能做到，那咱们下面我们给他就看一下啊最终效果。下面呢，我们打开这个页面，在页面中我们最终测试一下啊，首先我点击医院列表，各位看数据输出来了啊，当然我们只有一条，你可以加多条啊，然后刚才我提到在里边我们首先有一个条件查询，比如说咱们随便选一个条件，比如北京市，然后你看是不是它的区啊，当然这个市辖区，但是你可以加多层啊，包括这位置有名称点查询插入数据。

比如现在我直接根据名称查。比如写一个协和医院点查询数据是不是有了，比如现在我们可以再换一个条件啊，假如咱们选一个别的省。比如选一个河北省，我点查询是没有数据，因为咱们只是这里边有数据，所以现在这个效果应该可以了，包括你看这位置啊，比如现在你大家看这里现在B是什么呢？刚才我说那个分页那个变化，页码的变化，当我选择五，表示每页显示五条记录，当我选择十，表示每页显示十条记录，所以现在咱们就完成了一个条件查询带分页医院列表的前端功能显示，把这个功能我们就最终做到了。所以各位按照我这个开发流程，能完成医院列表的接口部分，包括它的前端的整合部分。