开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：生成订单前端页面整合（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11492
生成订单前端页面整合（2）
内容介绍：
一、进入页面
二、修复问题
三、修复完成
一．进入页面
前端启动之后，在下面启动接口。接口有个特点，现在 orders 接口要调 EDU、Ucenter 这两个模块中内容，这个过程中用到 nacos 实现调用。
首先启动 nacos，启动方式很简单，找到 bin 目录，双击 startup.cmd，或者另一个系统需要双击 startup.sh 即可，我们需要用到 nacos 的数据中心。
启动后通过浏览器访问页面，网址为
http://localhost:8848/nacos/，登录的默认用户名密码皆为 nacos，登录成功后页面左侧有一个服务列表，默认是没有内容的，下面把服务依次集中起来。
二、修复问题
首先启动 EduApplication，接下来是 Ucenter，最后是 Oders。把三个服务都启动，启动后到 nacos 里面查看这三个服务能否列出来，如果能，那么在前端后端做个调用。
把 edu 启动之后在浏览器页面中刷新，可以看到 service-edu，继续启动第二个 Ucenter，同理可以看到 service-ucenter，此时启动第三 个orderapplication，刷新后可以看到三个服务器都存在。
由于 oders 用了新的端口，叫8007，所以需要把 nginx 的配置检查一下，默认是没有，需要加上。
打开配置后发现名称不符，需要重新修改一遍，修改后需要将 nginx 重启一下，修改完成。
最后做云测试，包的跨域都添加完毕。
先来到项目的首页面，即 http://localhost:3000/
进入之后先登录，登录成功会显示登录的昵称和头像，点击课程，进入课程列表，点击其中的某一个课程，例如点击HTML5入门课程，进入到这门课程的详情页面，在详情中点击立即购买。在这个过程中检测接口是否正确，把 F12打开，点击立即购买，虽然弹出了页面，但是报错了。
点击立即购买时，电脑做了两件事情，第一件事情是生成了订单，第二件事情是在页面中显示订单信息。此时我们要掌握订单是否生成，信息是否显示。
首先在表里面找到订单表 t_order，在表中刷新，订单表中的数据得到了，表明订单已经生成，是显示订单信息出现的问题。
F12的信息提示是 eduorder/order/getOrderInfo 出现了问题，首先观察接口是否正确，如果接口正确，则观察前端是否调错。先打开 http://localhost:8007/swagger-ui.html，在里面找到方法，根据订单 id 查询订单信息，将 id 输入进去，点击 try it out，可以看到数据是正确的，证明接口是没有错误的，所以前端是有问题的。
在_oid 中，用得是 getOrdersInfo（id）接口，检查一下 F12的页面，当发现 Control-Allow-Origin 错误，无外乎是跨域问题或者路径问题。本案例中方法为 getOrderInfo，但用了 get 提交，而 orders 中用了 post 提交，改成 get 即可。
三、修改完成
修改完成后，在页面中刷新可以看到订单页面弹出，是想要的效果：生成了订单并有了对应的显示。
