160-尚硅谷-尚医通-前台用户系统-预约挂号-预约下单功能-前端整合和测试

各位同学大家好，咱们继续来开发预约下单功能，刚才咱们把生成订单的接口已经开发完成了，并且整合了MQ进行效益发送，那咱们下面呢，开始开发它的前端，把前端页面我们给它快速整合出来，然后最终做一个完整的测试，那下面我们写一下前端，前端里边怎么做呢？就是咱们在那个确认挂号的按钮位置，就是这个位置，我们点击触发事件，然后调用submit order方法，在submit order方法中，咱就来调用我们刚才的接口把订单进行生成，所以咱们下面就来解这内容。那首先呢，我在里边先创建一个JS文件，在JS文件中定义咱们接口的路径，那我起个名字，我就叫order info，然后order info中把接口路径咱做个定义，我把路径从这里边咱们给它复制过来。

我们的名字叫做A片order order in，下面加上咱的方法，这个方法就是生成订单的方法。然后给它起个名字，比如说起名叫C。Orders，然后在里边传入两个参数，第一个参数就是schedule ID，排ID，然后第二个参数是这个patient ID，就诊人ID。这样的话把两参数它就来了，传完之后咱们复制它的路径，里边传值，它的提交方式是一个POS提交，这里给他改一下POS提交，然后里边有它的路径，最后有这么两个参数，一个是筛掉ID。一个是patient ID，把两个参数我们给它串进去，这样的话，这个路径我们就定义完成了。

然后定义之后呢，我们来到页面中，在页面中呢，先把这JS文件给它引入，然后在方法中我们完成最终调用，那咱们引入一下啊，用import，我们叫order API，然后这里边在API中的。O in for里边。这个我们做了引入，然后引用之后咱们往下来看，就写一下它的具体方法，这个方法中我们来实现，比如说这里边呢，我们做一个调用，因为咱们现在一点击这个按钮的时候，咱是不是要进行提交啊，到一点的话，比如说咱把钮名字改一个，它之前默认叫确认挂号，我们实现，当我们一点这按钮，把它变成就是正在提交，那咱给他改一下这个名字，我写一下啊，这次点沙蜜桃。ETN等于这个叫做正在提交，包括咱也做一个简单判断，就判断它是否重复提交，如果说按钮变成正在提交，咱是不是就不能再点击，如果点击的话，提示它不能重复提交，所以咱们做一个简单判断。

我在里边写一下啊，这次点sum me b TN，如果说这个值呢，它等于叫做正在提交，那如果用户这个时候还点，咱给他来个提示，我们来一个这点这个message。点上这个I，然后里边加个信息说你不能重复提交，最终我们加上一个对称。这是我们写的一个简单判断，然后下面咱就调用order API中这个方法，这个方法我们叫save orders。方法中传入两个参数，咱们来做个传递，首先第一个参数是里边这个schedule ID，那我们来写一下啊，Schedule ID应该是里边的这个值。

我把它直接复制过来，然后里边的第二个值是那个patient ID，那我们这次点这个patient的点上ID，也就是从这里边把值取到，然后调用之后，下面我们加上这么一个点Z。点在里边，咱加上response。箭头函数，然后通过response得到里边这个具体内容，就是这时候我们跟之前写法基本类似，那咱把它快速完成出来。各位看到啊，因为咱们的接口呢，最终返回的是不是这个订单ID，所以咱们在里边呢，把订单ID给他得到，咱们来一个变量，我们叫OLDID，然后通过response.date得到的是不是它返回这个订单的。

ID，然后反外D之后，比如咱们后面做个跳转，让它跳转到一个订单页面，咱们做一个订单的详情显示，我们用window.location.href让它跳转到一个路径中去，然后面来进行页面，也就我们叫O受在后面传入这个。ID。这样的话呢，咱们把这个调用就完成了，就是点在里边，比如说我们也加上一个点开，然后开里边除了一个就是异常的信息，如果说他提交过程中有异常，那比如说我们这么做，但是那个按钮还是变成确认挂号。这里写下就是确认。挂号，所以大家看现在我们通过这个过程就完成了前端的这么一个调用，在方法中调用咱的接口，最终把这功能我们做实验，所以现在我们就写完了，然后写完之后呢，最后咱们把这功能做一个完整的测试。

通过测试让各位再感受一下我们这个调用的过程，因为这个过程要稍微麻烦点，所以咱们来做测试，那怎么测试呢？给各位来说一下啊，首先第一个咱们在后端接口中呢，我们通过debug的方式进行启动，然后给它加上断点，通过断点调试，让各位同学更清楚看到里边的定行过程，那在下面启动一下啊，首先我这里边。我先把这个O。用debug方式进行启动，咱们启用起来，然后启动过程中，我在里边加上这个断点，给咱们给它加一下啊，这断点我们在CTRL里边，然后它调service，咱把它就直接我就加了这个。Service里边，然后大家看service中呢，是得到我们这些数据，然后加到数据库，在调用我们医院系统中的接口，最终返回值，然后发送消息这个过程，那我在里边给各位加上这个断点。

首先啊，我在前面的这部分，比如给它加到位置加个断点，然后这个过程中就是做这个添加，添加之后呢，它要调医院这边接口，我在医院这端加个断点，然后最终有它的返回数据，咱们通过返应数据最终发送这个消息，这一行就是发送消息，所以现在这里边加了断点，然后加完断点之后，下面我再把这个就是。医院那个系统用第八个启动，因为咱们一会儿要调用医院系统中的接口，把这做到，那我找到医院系统中，在里边也给它加上断点，就是为了让各位看的更明显。医院系统中应该是在我们里边的，就是。这个位置hospital CTR，然后里边这个位置加个点啊，就是里边的这个位置，它要调用这个方法，然后这个方法中。

里边就是这么一个过程啊，里边我这断点给各位都加上了啊，所以大家一块儿把它执行，然后除了这个之外，因为咱们要发送消息嘛，咱发送两个地方，一个是好的披，一个是发送短信的，所以我在这两里边也给它把断点加上，咱们先来到这个好的皮特里边。在hospital中呢，我们有一个叫receive接收咱们发送消息，那我在这位置加上断点，然后接收完消息之后，它又调用我们发送短信，这部分就是这个send message调用短信，所以在短信里边应该有我们相关的接收端，然后把这个短信也是第八个启动啊，也就说现在呢，我把四个服务用第八个启动，分别是我们的O。医院系统hospital，还有这个短信的这个服务，都用断点调试启动，为了方便我们进行这个查看这个过程，然后我在短信里边这个receive中给他也是加上断点，最终我们会做一个短信的发送。

就是他最终会到我们的。这个地方啊，进行这么一个发送，所以现在这断点应该我们都加上了，就是里边的这个过程啊，包括其他服我这里边也都启动了。这里边的这些咱们也都完成启动，然后这些都启动之后呢，咱们下面啊，这里边我把前端项目也启动起来，最终我们来测试。那这个。启动一下啊。Npm ru DV，咱们等它启动起来。现在服务器已经停起来了，那咱们来到页面中，在页面中我先选择某一个医院，然后选择某一个医院之后咱们点击科室，进入到排班的相关信息，那我们选择某一个日期，咱进行这个挂号，比如现在我选择这个挂号，咱们点击剩余，然后他就会到咱们的这个。

确认的页面中，在确认页面中我们能选择救人信息，包括里边的挂号信息，包括用户的联系方式等等，最后咱们点确认挂号是不是就能实现到的功能啊，这是我们的MQ这么一个界面。然后现在我点确认挂号，咱们看它的过程啊。我这里边应该加了断点，然后大家看，首先到咱们的O这里边，在O中咱们先得到就诊人的信息，它远程调用里边这个接口，得到就诊人的信息，那咱给他看一下，让他进用一下第一个信息，得到第二个得到我们的排班的交换信息，然后下面做这个判断，再得到加的信息，得到信息之后，最后调方法，把这做添加，那我们直接往下执行，把它到这一步，然后这些调用之后呢，我们这里边设置了参数调用医院那边接口，那咱来调一下啊，在医院这端我们来调用这个方法，方法中来这样操作，当然这个操作中呢，咱是一个模拟系统，最后默认就查这个一的这个相关的筛掉，然后最终把数据这里边做一个返回啊，包括它就返回了相关内容。

咱们等它返回，然后返回之后我们在这里边得到了它返回的数据。你看啊，这里边我们做了一个判断，如果返回的数据中这个result，咱从这里看一下result code的值是不是200呀，如果是200的话，那我们继续往下执行，那比如说我们执行的过程中把它做更新，然后进行消息的发送，这一行就是进行交易发送，那咱来发送一下，大家看我们一发送，首先医院里边是不是要更新，这个就是相关的排班信息啊，他接听到了就能接收到，在receive中进行接收，接收之后在里边我们进行这么一个update，然后update之后大家看下面做什么，是不是要发送短信啊，所以咱们调用发送短信的消息，然后在短信这端就接收到咱的内容，是不是接收到了，接收之后我们进行这么一个发送，最终完成短信的这么一个发送，你看现在它会调方法，最终进行执行。

所以咱们现在就完成了里边那个关于订单的这么一个过程，咱把它就做到了。各位把这过程能实现，只是说里边啊有一个小问题啊，因为咱们就是我当时在注册这个短信的时候呢，我这里边只能发生验证码，它不能发送其他的，所以各位自己做个测试可以了，实际的公司里边，你公司中可以用公司这个账号注册一个可以发送其他消息这么一个短信服务，我这个只能发送验证码，所以他提示我说这个不是一个有效的数字啊，因为他只能发送验证码。

当然我们这个消息队列这里边应该已经进行了调用，通过MQ实现这么一个消息发送，这样的话咱们把这个就最终完成了里面的过程，最终它会返回这个定的ID，然后到地面中会做一个显示。所以咱们现在完成了里边的这么一个流程，各位把这个能给他最终做到。然后这个做到之后呢，我们来看一下啊，就是在我们这个MQ的这个控制台里边的这个地方，咱就看这个队列中，你看啊，这是我们的短信的，这是我们的订单，那个更新排班的是不是进行了发送，这里边也都能看到，所以现在咱们就完成了生成订单的接口前端，包括最终测试，测试过程中，我这里边通过底bug方式给大家演示里面的一个过程。

然后各位同学呢，在自己测试中，你也可以用debug把这过程自己给他好好去整理一遍，知道里边的执行流程到底是怎么样的，所以现在这个功能我们就开发完成了。