开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：生成订单前端页面整合（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11491
生成订单前端页面整合（1）
内容介绍：
一、整合生成订单的页面
1. 第一步复制订单和支付页面需要 css、js 文件
2. 第二步点击立即购买，生成订单，绑定事件，编写方法调用
一、合生成订单的页面
点立即购买，跳转到订单页面
1. 第一步复制订单和支付页面需要 css、js 文件
用 assets 复制到项目中，覆盖相关文件
将会出现一些新的，以后需要用到的静态文件
点去支付，生成二维码的接口。以及支付后，查询订单号的接口。
2.第二步点击立即购买，生成订单，绑定事件，编写方法调用
(1)在 API 中定义 js 文件
代码示例：
< script>
export default {
//生成订单
createorders( courseId) {
return request({
url: ' / eduorder/ order/ createorder/ ' +coursed
,method: 'post'
})
},
//根据订单 id 查询订单信息
getOrdersInfo( id){
return request({
url: " / eduorder/ orderl getOrderInfo/ '+id,
method: 'post'
})
}
(2)在页面中进行调用
在课程详情页面有一个立即购买按钮，绑定一个事件然后调接口，生成订单，跳转到订单页面
代码示例：
import courseApi from "@/ api/course'
import ordersApi from '@/ api/orders'
export default {
asyncData({ params，error }) {
return courseApi.getCourseInfo(params.id)
.then(response =>{
return {
courselebVo: response.data.data.coursewebvo,
chaptervideoList: response.data.data.chaptervideoList,
courseId:params.id
}
}
},
methods:{
//生成订单
createorders( ) {
ordersApi.createorders( this.courseId)
.then( response => {
//获取返回订单号
//生成订单之后，跳转订单显示页面
this.$router.push({path : ' / orders / "+response.data.data.orderId})
})
})
}
};
< / script>
首先绑定一个事件，然后调用方法，方法里就调用在 API 定义的方法，根据课程 id 生成订单，生成订单之后要返回订单号，把订单号直接传到订单页面进行相关操作。
(3)创建订单显示页面,显示生成的订单的信息
因为每个订单 id 都不一样，所以在这个页面可以使用动态路由方式创建页面。
首先 pages 里建一个文件夹 orders，orders 里面有具体的页面，页面按照动态路由的方式。首先要加上下划线，然后要加上值，这样执行时就可以跳转到指定页面。
最后在订单信息显示页面，显示相关信息。
代码示例：
Export default [
//params.id 获取路径 id 值
asyncData({ params，error }) {
return ordersApi.getordersInfo( params.oid)
.then( response => {
return {
order: response.data.data.item
}
})
}
}
代码运行后，效果如下：
(4)在 layouts 的 default.vue 页面添加如下 css 样式
import '~/ assets/css/reset.css'
import '/ assets/css/theme.css'
import '-/ assets/css/global.css'
import '~/ assets/css/web.css'
import '-/ assets/css/base.css'
import '~/ assets/css/activity_tab.css'
import '~/ assets/css/bottom_rec.css'
import '~/ assets/css/nice_select.css'
import '/ assets/css/order.css'
import '~/ assets/css/ swiper-3.3.1.min.c ss'
import "-/ assets/css/pages-weixinpay.cs’
最后检查一遍，首先在前端的第一部分，引入 css。在 order 里，先定义两个方法，一个是生成订单，一个是根据 id查询。在课程详情页面中，在立即购买位置绑定了一个时间，加了一个方法。
在方法中根据课程id生成订单，然后跳转到订单显示页面，在这里使用的是动态路由的方式,要加上下划线，就可以跳转到指定页面。跳转后在订单的显示页面中再调一次接口，通过路由取订单id，并把订单的详细信息查出来，并且在页面中做一个显示。最终启动前端，再启动接口，达到想要的效果。
