48-尚硅谷-尚医通-后台系统-医院设置前端-列表（1）

各位大家好，我们继续来开发上移通项目，之前内容中呢，给大家介绍了我们在这个潜能框架中该怎么进行开发，给各位介绍了它的开发过程，那我们下面就按照一个过程，我们做一个实际的开发。那我们现在就来完成医院设置前端的开发，大家注意咱们之前呢，把这个医院设置的增删改查接口咱是不是都做过了，然后咱们现在在里边就完成它的前端部分。那下面我就按照给大家介绍的过程，再把这个功能我们最终做实现，那我们看怎么做。首先大家看第一步我们干什么？咱们是不是要加个路由啊，也就是说在这里边我们要加上类似于这种结构，我们叫医院设置管理，然后里边有医院设置添加，包括医院设置列表，所以这是我们的第一步，那我们来做一下，之前给大家介绍过这个路由我们要放到哪里呢？在我们这个框架中有一个文件夹叫src。

Src里边有个文件叫做indext.route里边的indext.JS，那咱把它打开，然后在里边大家看到里边呢有一些示例的路由，那我们可以复制一个，然后改成我们的效果，比如说咱就把这个路由，大家看里边是不是就一段Jason的数据结构，那咱们现在把第一个复制一份，然后给它改成我们的效果就可以了。那咱们来改一下，因为这个叫医院设置，所以我们起个名字叫hospital。然后下面加上我们那个名字，往下边来写一下，然后这个我们叫。医院设置。下面这个也叫。医院设置管理，然后加上之后大家往下看啊，这里边是什么意思呢？就是你显示的图标，比如大家看。

我在路由前面这个图标就是你图标的显示，我们就写一个默认的，然后下面比如第一个我们就写这个医院设置的列表功能，比如说咱们起个名字就叫例子，这里边我也改成叫。例子。然后这个名字我们叫医院设置列表下面我也叫。医院设置列表，这个位置我们要写页面，咱们一会儿完成。然后咱往下看，下面呢，我们写这个医院设置的添加，我们起个名字就叫A等。然后这里边我们给他写一个医院设置的添加。医院。设置添加这里边写它的页面，咱一块儿做修改，所以咱们现在这里边呢，就完成了一个最基本的路由，按照之前的效果，咱们快速改成我们这个内容，然后改完之后咱们到页面中刷新看一下，大家看。

我这里边的就是第一个。就这位置啊，第一个是不是就是医院设置管理，然后你看里边有医院设置列表，还有医院设置添加，所以咱们现在就完成了第一步开发关于这个路由的添加，各位把这个呢，快速做到，就是你仿照框架中自带的路由，然后能够快速改出你的效果来。这步我们就完成和解压，第一步添加医院设置的路由，然后咱们找到文件里边，就做到这么一个效果。那这个我们算之后，下面呢，我们再进入到第二步，第二步怎么做呢？给各位分析到，咱们就是设置你跳转到页面的路径，并且把页面做创建，那咱们来做个设置。首先大家看它之前的路径呢，是在这里，是在views里边，然后里边呢，有一个table里边有一个index，而咱们现在要重新建一个新的一个内容，那我来创建，比如说来一个文件夹，我就叫。

Hospital。带，然后在里边呢，我写上两个文件，一个作为列表，一个作为添加，然后它的文件来看事例中都是什么文件。是不是都是vuee的文件，那我现在就创建两文件，一个文件就叫list.vuee然后再写第二个文件，我们就叫这个A的点不有。所以现在把两文件我们做创建，然后创建之后在这里边我们做一个修改，大家看这路径啊，这路径中呢，加了一个艾特斜杠，就类似于咱之前在普通路径中写那个点杠跟那个类似，只在框架中它识别是at斜杠，然后在里边有这个wills，后面加上咱的文件夹叫hospital。

Site，然后第一个文件是list，下面跟它一样，我们是hospital site，这个名字叫A，这样的话咱们就把这个医院设置的这个路由部分，咱们就给它完成了。然后完成之后呢，我们现在呢，在页面中再加一段内容，咱们先做一个简单的测试，那内容怎么加，咱们也是仿照他之前的例子，大家看啊，在内容中呢，你看第一部分这个标签叫他里。他们里中呢，是我们显示页面中的数据，然后下面部分是不是咱们的扎贝，所以说我们在写页面的时候，你要把它小一个to姆利中，然后它们里边有个div要写到这里边，所以咱们现在把这段话我就复制过来，比如说里边我复制一下。然后加上这个杠DV，还有一个杠。里头。把这个给它加上，然后加上之后呢，在里边呢，我们写一段内容，咱们做个测试，就看一下这个路由能不能跳过去，这是第一个，我们是这个。

医院设置的列表。然后第二个我们也写一下，在这个页面中我们写一个就是医院设置的添加，所以这样的话，咱们把路由的内容我们就写出来了，注意它要写到topic中，这里边吸引的内容，然后下面有javascript写我们的view的代码。然后洗完之后咱们快速做个测试，比如现在我先刷新，刷新之后当我把路由点开，我点第一个医院设置列表，大家看我一点是不是就显示了，包括上面是不是有显示，然后我点医院设置添加。它是可以完成了，所以这个就是我们完成的第二步，我们创建页面，然后设置它的跳转的路径，这各位能给他快速做到这步我们就完成了。

我在里边写一下。就是我们的第二步。我们创建跳转到页面，然后设置跳转的路径。第二步这步骤应该很简单，各位应该能给他快速做到，然后这个做到之后，下面我们再进入到第三步操作。第三步做什么呢？咱们之前也介绍过，因为咱们最终目的是不是调接口，把接口数据是不要进行显示，所以第三步呢，咱就把这个接口的路径做个定义，而定义规则在我们的框架中，他要求咱们要放到API里边，然后你建个JS文件自我定义，那我现在按照过程来写一下。比如现在我在API中呢，就建一个JS文件，我就仿照之前的，把之前的咱们给他快速改一下。然后给它起个名字，这个名字我就叫hospital。

Set，然后在里边呢，定义我们的路径，路径怎么定义，给各位说明，首先第一步固定的咱们需要引入里边一个工具的JS文件，就咱们之前看过，咱再看一遍，在U里边我们找到U。里边有一个request，大家看这里边呢，是把AX iOS给我们做的封装。然后咱们直接引入就可以了。引入之后呢，在下面我们定一下它的路径，这个写法咱之前说过，就是我们那个模块化的写法，就是现在你可以这么写，另外还一种写法。不知各位是否记得啊，我们加一个is po。然后加上一个叫。Foot在里边呢，写上你的方法名字和里面固径是不是可以这么做，两种写法都是一样的，比如说我们就这么来写，然后在里边呢，注意这个结构，固定的结构，咱们需要吞这个request，我就写一个，以它为例啊。

然后在里边大家看这个块的跟上面这个必须要一致，就是两个要一样，然后写完之后在里边呢，我们再定义它的固定啊，加上这种结构，然后咱把它需要想一个方法中，因为咱们的第一个方法是这个列表的方法，我写个名字。叫hospital site这个list。这是一个方法，然后方法中我们就吞这个例子，这位置你看啊，这是写上你接口路径，大家说这是什么。是不是我们的提交方式就是你是get还是post，然后这是什么，是它的参数，那咱们写一下这个路径，然后路径呢，我们到这个后端接口中咱找一下，注意啊，这路径写的其实就是。这个路径IP端口号咱之前说过，它是在里边的这个文件中做了一个配置，而咱们在里边直接写上你的路径，那这个路径我就从里边直接复制了，你在路径是这么一段路径得稍微长点，我把它直接拿过来。

我强调各位，在写这个路径的时候，你最好不要手写，最好从你的接口中直接复制，你手写的话很容易写错，比如说你多个字母，少字母，有时候这个问题很难找到，所以咱们直接复制，然后找到咱们那个接口，那个最终的名字就是这个名字。然后我把它拿过来，咱们放到这里，然后放到这里之后大家看啊，这里边是不是需要这几个参数呢？有你的什么当前页，每页记录数，然后还有什么是不是咱那个对象，所以它需要这几个值，那这几个值呢，咱就作为参数传进来，第一个就是当前页，我们叫current。然后第二个值是这个limit，米每记数数，还有你这个条件对象，比如咱起个名字，我就叫这个色纸OBBG。

这是我们的三个值，然后咱们把三个值传进来，首先前两个值是通过路径直接传，那我们怎么做呢？两种方式，第一个你可以直接拼一个字符串是可以的，但是这么拼接很麻烦，所以咱们还有一种方式。不知各位是否记得啊，我们讲那个就是voe的时候，或者说E6的时候，曾经提过这么一个东西。就加上一个反引号。这各位应该记得啊，它是一个什么，是不是叫模板字符串啊，在这里边咱通过表达式是不是能取到你这个值啊，就把它取到。那我们来取一下。第一个是当田叶。然后第二个就是每月技术数，然后这个写完之后，下面有我们的提交方式，大家看。提药方是什么？是POS所里边我写上一个post，然后写完之后是不是还要传这个值，但是这个值怎么传给各位说明啊，因为这个值呢，我们在接口中用的是request的body底。

Body什么意思呢？是不是以这个Jason形式进行传递？所以这里面我强调，当你在前端中需要用Jason形式进行传递，在我们框架中，咱需要写上一个名字叫什么date date中呢，把这个传回来的条件对象直接拿回去，而这么写的话，这行就表示它会把这对象用Dis形式传到你的接口中去，这是一个写法。就是使用。Jason形式就传递这各位知道，你写date，加上你的对象，它把对象会用deson形式就传递，如果说你不用JA形式传递，那怎么写，但加上这个参数叫大，用Jason的话，我们加一个date就传递这各位给他知道是框架中一种固定的写法，用这传递我们加一个date就可以实现。所以这样的话，我们的第三步就完成了，咱们在这个第一篇中定义了我们这个接口路径，就是咱们建立一个JS文件，然后里边把路径定义，这个定义过程按照之前的我们做了一个修改，然后各位把这个能给它快速做到。

这就是咱们的第三步，我写一下在API里面创建JS文件，然后定义。接口的路径，这个完成，我把这个拿回来，各位按照我刚才写的过程，能给它快速完成出来。然后这个完成之后，咱们现在把这接口就定义了，但是定义之后呢，咱们需要修改一下地方什么地方，就是你那个接口的IP和你的端口号需要改一下。那这怎么改，因为咱们本地用的这个端口是。8201是这个端口，所以咱需要改一下，那怎么改，咱找一个文件，这个文件。

Dv.Inv.JS大家看啊，它里边的默认用的是这个叫e Mo这个路径，但是咱们要改成我们本地的路径，所以我现在就把这一行啊，比如说我们再复制一份，这给它先注掉。然后咱们改成我们的。那我改一下啊，我写一下。就是我们写这个。HTP冒号杠杠。Local host的8201，然后这个路径就会根据这个IP端口号加上咱们刚才的这个路径，最终拼成咱们访问的接口地址，所以咱们需要给它改一下，这样的话咱们现在就完成了，就是到这个文件中，我们。做这么一个修改，各位给他要知道咱之前也提到过这个特点啊。你把它能改出来，然后改的时候呢，有一个问题各位特别注意啊，你看我写的时候呢，是不是叫HTP挂号杠杠也就这个位置，你不能加个SS表示一种加密传输，因为这种传输需要你授权之后才能操作，因为咱们目前我没有授权，所以咱们用的是HTP这种访问协议，这各位注意啊，这不要写错，HTS咱目前没这种权限访问，我们用的是HTP。

所以这样的话，我们现在第三步就完成了，然后完成之后我们进入到第四步，第四步呢，咱就可以在我们的页面中进行引入，然后最终进行调用了，那我最后来写一下页面中的代码。那我们来操作一下啊。首先我来到页面中，就是咱们这个list，或者说A，我先做list，然后list里边呢写代码，那我们写的就是一个词quick这么一个标签，然后在词汇里边怎么写，咱是参考之前的那个例子。大家看啊，在里边有个script，然后里边是不是引入你那个JA文件下面有一个isportt default，然后里边写上我们最终代码，所以咱们按照这种结构进行操作，比如说你的这代码做到小这里边，然后外边做引入。

那我们写一下第一步先引入你那个接口的那个定义的。这文件。因为咱们刚才是不是在这里定义了，所以把它先引入进来，那我做一个引入。我们加上一个，是不是起个名字。和叫hospital site，然后from加上地址，这地址注意啊，在我们框架中要求咱们默认写的是一个at斜杠，你不能写点杠，它不认识，它只认艾特斜杠，然后加上这个叫API里边这个JS文件，我们叫这个。Hospital site，这样的话就完成了，引速就跟它类似，然后写的时候大家注意啊，这后面的点JS可以省略不写，那就直接来一个hot set，这样的话就可以了。

所以咱们现在就完成了这么一个引入，把它就引进来了，然后引完之后，咱们下面的在这个port底portt里边来写下这个代码，代码中的有一个结构给各位写一下啊，首先第一个咱可以来一个date。大括号。或者说呢，你也可以这么写，我来一个date。然后里边加上一个蕊退啊，两种写法是一样的，咱就写下面这种写法，这个写法什么意思呢？我加个注释，它就表示呢，在里边定义一些变量和它的初始值，为了咱后面使用，比如说咱做列表，肯定有一个集合或则添加能有一个对象在里边做定义。然后写完这个之后，里面有第二部分，有一个方法叫create。

这咱们之前说过，这个方法什么意思？各位同学还有印象吗？当时咱们讲VE时候不必提到过。在vuee中呢，是不是有它的生命周期，有里边有很多方法，其中一个很重要的方法叫垂体的，这些方法什么特点，是不是在我们的页面渲染之前执行了，比如你数据在显之前先就用这个方法，这个方法中咱们做什么事情的？给大家写一下，它一般都是去调用咱们那个methods。里边定义的方法，然后得到我们的数据，一般都是做这个事情，所以在页面渲染之前，我们有一个方法，然后有这个之后，下面有这个就叫method method里边呢，我们可以定义咱们的具体方法。定义方法，然后进行这个请求接口的这么一个调用，这是关于咱们代码的一个进结构，包括咱们后面写代面都是按照这种结构进行这么一个开发，在这个我们做这个说明，然后说完之后，咱们下面来写一下，首先第一个在date中我们是不是要定义变量和初始值。

那大家说咱们目前啊，做这个医院设置列表功能，大家想一下咱们可以有哪些变量需要，或者说哪些值咱需要需要。大家说需要哪些？各位注意啊，首先第一个你看啊，我的方法中是不是有三个参数，这三个咱是不是都需要包含你的当前页。每页计数数，还有你的条件、对象，这些咱是不是都需要，所以在里边我做定义，比如第一个我就来一个叫current。代表咱的当前页，比如说默认值，我就来一个一。当前液，然后第二个我叫低米特，也就是你这里边的。每页显示的记住数，比如说咱先来一个默认的值，先来个三，不合适咱再改，然后除了这个之外，下面还有一个值，就是你做那个条件的封装对象，比如咱起名就叫色OBG。

这个比如说我来一个空啊。它就代表咱那个。条件封装的对象就这些值，然后除了这个之外，肯定还有，因为咱们每页是不是需要一些数据啊，数据是不是一个集合呀，所以我就写一个例子，比如咱来一个。集合它就代表咱那个。每页数据那个集合，或者说一个数组，所以咱们先写这么几个值啊，当然肯定还需要一些加值，然后后面需要我们再往里加，所以现在是里面一个基本定义，然后定义之后呢，咱们在method中就可以写那个具体方法。然后写一下。医院设置。

列表的方法在里边，我们起个名字，我就叫盖头。例子。然后在get list中呢，咱们要怎么做是吧，要去调它的接口，而调接口过程各位说怎么做？首先你看啊，我这个文件是不是在里边引入了，那咱们调这个方法是不是就可以了，那怎么调，你引的名字叫hospital set，那我们就通过hospital set点上那个方法是可以了，那点那方法就是它。我把这个给各位拿过来。然后拿回来之后，大家还记得这怎么写吗？咱们调方法，方法中可以传参数，咱目前三个参数，第一个current，第二个limit，第三个色是OBD，那咱把它串进去，我就加一个这点current。这点limit，还有这个search OB BD，然后加上之后下面呢有两个方法，一个叫Z。

一个叫K。咱之前说过啊，这什么意思。这什么意思啊，是不是就表示我们请求成功之后调用，然后开始表示什么，是不是请求失败调用，然后在这里边呢，咱可以加上一个变量，比如我们叫response。加上一个箭头函数。Response得到就是咱们的接口返回的数据。我写一下it的棒子，就是你接口返回的数据，当然这个名字不一定是你的棒子啊，比如写个WW，也可以是咱们一般写的有点实际意义，我们就叫response。这样的话，咱们把这个结构写出来了，然后在catch里边呢，表示就是它里边呢有这个错误信息，比如我们起个名字叫这个I，也是加一个。箭头函数挨着就是它返回到那个透气机。

所以这样的话，咱们现在把这个结构就完成了，在这结构中，咱们现在方法中就可以调用我们的接口，最终的response就是我们接口反数据。那现在咱们可以把这个response做个输出，比如咱们看一下它的效果是什么样的，包括这个A，我也给它做个输出。有异常，咱们应该也能看到。所以这是关于咱们这个定位的结构，然后写完之后大家看啊，Method中呢，咱们把方法定义了，但是这个方法默认不能执行吧，咱是需要调一下怎么调，就这句话。在create里边，一般我们都是调MY中的方法得到数据，那里边我做调用，怎么调用呢？这次点get。This做调用，注意别调错啊，这次表示当前你这we这么一个。

范围，然后在里边可以用它调用，而你这次肯定调不到里边的这个方法，它只能调当前VE中的方法，包括你看啊，我这几个变量通过这次是不是都可以得到。所以这就是我们完成的一个代码的基本结构，通过这个结构，比如咱一会儿我一访问我这个页面，然后它create先执行，执行的时候就会发送阿里的请求，得到我们接口反应数据，这数据我在里边也做了一个输出。所以这是关于咱们这个就是。前端的一个变换过程，我就按照刚才我给大家总结这四步，把这个代码咱们应该现在已经出完成了，然后咱们马上进行测试，再往下继续开发。