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

继续进行医院设置的开发，刚才呢，咱们把前端的Java代码已经完成了，那咱们下面先来做一个测试，看一下这个过程能不能正常调用，那咱们看怎么做。首先第一个因为咱们现在呢，要去调用咱们的接口，所以我首先呢，把接口先做个测试，看一下接口是否能正常访问，如果接口可以的话，那我们再进行前端的这么一个操作，那咱们下面我们来做一下测一下这个接口。那这接口测试之前，咱为了效果明显，我在表里边，比如说现在我先手动加上一段数据，然后咱们再方便测试，那里边加下。比如说ID，我来个一，然后咱们随便写两页，比如这个。北大国际医院。在里边我给他写一个ID，比如说100。

这个下划线二。这里边我们写一个地址。我就随便写一个，为了测试，然后这里边我们加上一个值。然后这样的话，把这个加上了，加上之后，比如说我们再加一个二，比如我叫这个。北京啊，妇产医院。在里边我也写上一个值。这个位置啊，我就为了测试，咱先随便写上这么一个。所以这样的话，大家看啊，现在在我表里边是不是一共有四条记录，然后咱通过它来做一个基本的测试，那我现在把swa打开，找到咱们那个条件查询，在分页那个接口部分，应该是它在里边我们输入它的参数，比如说当前页是一每页显示三条记录，然后在里边我点这个y it out，大家看结果这样各位看。

它返回状态嘛，是不是2万啊，就是200成功，然后它里边有这一项的值，Date中的record里边是咱的数据，然后下面有这个total size等等，当然各位发现啊，里面有个问题，你发现啊，Total值是不是等于零啊，Total什么意思，是不是你表中一共多少条记录？但是咱目前表中一共是不是有四条地图，而这值反应是不是零了，这数据是不是不对，所以咱们看到这个问题了，那咱们下面咱排查一下，看到底是哪里出现的问题。我们来看一下，首先第一个我们看啊，这接口应该是没有错，因为接口里面就是做一个最基本的条件查件带分页，这应该没有什么问题，然后咱们看啊这些咱们提到我们用MP做分页的时候，咱应该有件事情，是不是要配置一个分页的那个插件，那咱看一下这插件有没有配置。

我们来到启用类里边，这里面有，然后配置类中，咱发现这插件咱是没有配置了，所以它效果不对，到下面就把这个分页插件给它配置上，我到之前的课件中我们找一下，应该是我们第一天讲那个，哎，My base plus曾经说过，我们找到分页应该在这里。这里边是不是有个分析插件，那我现在把这分析插件就复制到我们的配置类种，引入它的依赖，这样的话，咱们现在插件就配置好了，然后配置好之后我把这服务重新启动，我们再做个测试，刚才问题是因为咱没有配置那个MP的编插件，对它效果不对，它就查出了表中这个数据。啊，咱们现在配置之后再做分页应该就正确了，那咱们来测试一下啊，比如现在在里边我再重新点次这个try it out。然后各位看结果大家看啊，前面200成功都是对的，然后你看。

Total等于几就等于四哦，就是表中一共就有CL记录，所以这样的话，咱们现在接口测试就完成了，证明接口没有错了，刚才问题是少配置插件，然后接口没有错之后，下面我们来到前端中，在前端里面因为咱们改了配置文件，改了新的内容，然后把服务重新启动一下，我点CTRLC，然后Y就是停止。我们再用这个npm ru DV把这个项目给它重新启动起来，然后启动之后我们再做个测试，因为咱们在写代码中，咱们把反应结果是不是在col里边做了输出，那咱就来看一下效果。现在我把F12点开，打开CTRL在里边点击医院设置列表，大家看效果，我们发现啊，是不是他报错了，而暴力错，我们先看控制台里边，这里边也出现了一个异常，就是它证明目前我们这里边应该是报错了。

那他报的什么错呢？大家看啊，在这里边呢，他出现了就这么一段内容，那我说一下这错误到底是什么。给各位做一个说明，展示一下这个错误啊。首先大家看啊，这里边呢，有这么一段话，我们来看一下，就是在这里。打开这里，这叫什么？叫access control alone什么意思？就是目前呢，我们这个访中，它是不允许你进行访问的，为什么不许给各位特别强调，就是咱们目前过程中就遇到了一个问题，这个问题叫什么？它叫做跨域的一个问题。跨域，什么叫跨域，给各位说一下啊，大家看啊，我们目前呢，前端项目用的这个端口号是不是95281，而我后端接口用的是什么。

是不是在那个8201啊，所以它目前的端口号是不一样的，如果端口号不一样的话，默认情况下是不允许你访问的，你需要做一些射人的访问，这个问题就叫跨域问题，但是跨域呢，不仅只有多个号，我这里给大家说的详细点，就是你有三个地方。三个地方中的任何一个不相同，它都会产生跨域，就是它不能这访问，因为他们是不一样的，那三个地方写一下，首先第一个地方就是你的。访问的协议是要访问协议，比如说我里边有HTTP，比如说我有HTPS，是不一样，如果你这么访问，那它就不能访问utp，访问S，它默认不能访问，这是第一个访问协议，然后第二个是你的访问地址，比如说我现在通过这个192.168.1.1。

去访问这个幺七二点幺幺点。1.1大家看IP地址是不一样的，默认就不能访问，然后里边还有第三个就是你的访问的端口号，比如我现在通过咱刚才这个9528。我去访问这个8201是不一样，不能访问，所以这样的话都会产生跨域，也就是说你的访问协议，访问地址，端口号有任何一个不一样，默认都是不能访问的，咱们只有做相应设置之后才能进行访问，这个就叫跨域，各位把这知道，而我们现在产生的问题，那就是这个。跨移问题，那跨移问题怎么解决？给各位强调一下啊，多种实验方式，而咱目前用一种比较简单的方式，也是我们比较常见的，我们的做法就是来到我们的CTRL中，在CTRL类上边咱们给它加上一个注解，这注解就是C注解。

当这个注解加上之后，它就允许跨域访问。这就是一种最简的解决方案，在我们的CTRL类上面加上一个这个触体就可以了，这不解就是C，它就允许跨域访问。给各位解一下。在。CTRL上边我们添加上一个注解，就可以跨域访问。这个就是我们的跨域的这个方案，所以我们现在把这就加上了，加上之后我们再冲洗项目，可以做这个测试，这是。我们提到的昏迷问题，然后这个做到之后给各位强调，其实咱们目前在访问过程中还未有问题。是问题呢，就跟这个文件有关。我把这文件打开啊，就是这个快这个文件刚才说的里边给咱们封装了，是不是AXLX，就是它这个阿里的操作，但是大家注意咱目前接口如果成功的话，大家看咱们返回的状态码是多少。

是不是200啊，但是你看这里边啊，他判断的时候，判断的值不是200。大家看是多少，是不是2万，就是他表示啊，如果你是2万，那我就成功，如果你不是2万就失败，所以这个判断就不对了，那咱怎么做？第一种方案，你可以把我接口的状态嘛，改成2万，或者说把前端这个位置改成200，那我就直接改下前端，把前端的这个改成200，然后咱们再做这个测试。这个各位给他特别注意把这需要改一下，要让他访问肯定也是不对的。这给各位拿过来，就是把这个改成200，所以咱们现在把这个就改完了，然后改完之后我把这个前三项目再给它重启一下，我们做一下最终的测试，给我看一下最终结果。我再重复一遍，然后咱们测试啊，第一个接口里边别忘记配置分页插件，然后里面加上cross注解表示跨域，咱们后面都用那个加上，然后加上之后在前端里边别忘记把蕊块中的状态码改成2万，因为咱们现在接口返回成功是200，而不是2万，这个需要改一下，改完之后我们再测试应该就正确了。

那咱们下面最终。做这么一个测试。我把F12点开，点开之后，比如现在我点击里边的医院设置，大家看在console中是不是有一个值的返回啊，这个值就是咱们输出这个response，也就是把这个输出了，然后咱们看一下response里边是不是有数据啊，状态码是200。然后date中有不同的值。比如咱们看当年是一。总页数是二，包括里边这个total是四，S是三，还有一个叫recall，是不是咱们的具体数据，而这样做的话，就把这数据最终在页面中显示是不是可以了，就是这个record中的这个内容。

所以咱们现在把这个接口就测试成功了，这就是咱们的调过程，然后调用之后，比如大家看啊，我这里边呢，有一个例子的是美的集合呀，也就是里面这个recall，所以咱给他来一个赋值操作。然后写一下。就是在里边，我们把这个返回。那个集合赋值给这个。List，那咱复制一下，我就写一个这点list。然后等于这个response，大家看怎么写啊，咱之前说过，你看里边啊，Response是整体部分，里边是一个date，那我们就点上一个date。然后再点上里边那个相应的名称，咱们看这个集合部分的名称是什么，是这个records，那我们就写上那个record，就在里边写一下response.data.record这样的话，这个list中就有咱们最终返回到金额的数据，然后咱最后把它在里边做显示。

当然过程中呢，咱们后面做分页的时候，你就需要那个总页，或者说总记录数，咱就来一个total。就是我们这个。总记录数。然后把这个值咱们也是自我赋值。就是那个总。记录数就是你表中多条记录，咱们来一个这个点total等于response.date点上咱们那个名字，那我们看一下他那名字是不是就叫total，那我们就点上一个头。这样的话，咱们现在把前端的Java代码部分就完成了，有咱们需要的集合，包括总计数，然后面就把数据在页面中的这位置做显示。所以现在前段部分我们就先做到这里，大家把我刚才的过程，按照我编写的流程能给他准确他出来，包括咱们刚才遇到这个跨域问题，大家要知道跨域问题是什么，包括它的解决方案。