开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-课程信息确认（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11393
课程管理-课程信息确认（前端）
页面中看到，要把信息确认，就是显示刚才插入数据，这一过程不复杂。在前端中调用刚才的接口，把数据页面中易显示可以。而他的数据指一个对象，用插值表达式，把值取到就可以。
首先来到 chapter 页面，在 chapter 页面中，点下一步到这个页面，下一步里面是一个 next 方法，把值拷进去。最终到 publish 页面，来到这个页面，做一个快速分享，因为来 chapter 页面中把课程已经传过来了，在课程确认页面中，把路由中的ID 值找到，之后调用接口把数据在页面中做个显示即可。
//修改课程信息
updateCourseInfo(courseInfo){
return request({
url: '/eduservice/course/updateCourseInfo',
method: 'post',
data: courseInfo
})
//课程确认信息显示
getPublihCourseInfo(id){
return request(
url: '/eduservice/course/getPublishCourseInfo/'+id,
method: 'get'
})
}
一个方法就是课程确认信息显示，两次就叫做 getpubliccourseInfo，里面有一个课程的 ID，下面加上课程信息确认接口方法的地址，用 get 提交，在 API 中定义。
在页面中写下，先获取路由课程 ID 值 ，根据接口方法根据课程 ID 查询。
import course from '@/api/edu/course'
export default
data(){
return{
saveBtnDisabled: false,//保存按钮是否禁用
courseId:''
created(){
//获取路由课程 id 值
if(this.route. params&&this.route. params.id){
this. courseId=this.route. params,id{
出调试控制台终端
里面有参数，并且是 ID 参数，为了方便，先写一个变量。
把 ID 通过路由取到，下面调用方法 根据 ID，数据最终查询出来。方法需要调用，先引入文件。
课程 ID 查询信息 名字叫做 getcoursepublic ，里面传入一个课程 ID 。名字叫做publishcourse，为了后面的值，上面写一个变量，在里面做一个调用，调用刚才的方法，把值获取到。
页面中显示做法如下，定义之后先把 jason 文件引入，引入之后，得到路由中的 ID值，后面肯定会有 ID 值，用之前的方法，得到值之后，调用接口中的方法，根据课程 ID 把值取到，复制到 publishcourse ，最后在 publish course 中，确定所有信息内容。
最后把内容在页面中做个显示，显示非常简单，因为对象，取里面的值，直接写上，里面有课时名称，写上 title。通过对象名字加上对应的属性，也就是 vod 中类的属性，为了样式更加美观，直接从课件中复制，前端里面方法定义了，把内容直接复制。
把页面中的段落直接复制，复制之后改一下内容，中间是显示确认信息。
为了方便，把名字换一下，第一个值是课程封面 cover，有课程的标题，课时数，下面是一级和二级分类，上面有讲师的名称和课时的价格，把值都取出来，到里面显示。
在里面有一个小问题，发布课程和返回修改目前都在el-form中，用课间中的样式时，需要把这段代码覆盖掉。如果按照这么写，会有冲突，把里面换成div，包括在章节小节页面也会有这样的问题，都换成课件中div，不要写el-form不然会有冲突。
这样数据在页面中用插值表示就可以显示出来，把样式直接复制，这样前端就完成了。
根据路由中的课程 ID 就可以把数据查出来，然后在页面中做个显示，最终测试一下效果。
点击课程添加在里面输入一个课程，0304测试课程添加，课程分类和课程讲师，价格写10，保存并下一步进入到第二步，加入章节里面有小节，第二步完成之后进入第三步，做课程信息确认，页面中课程信息已经显示出来了，
选择课程分类：前端开发-vue，课程讲师：王五，总课程时：10，课程价格：10，点击保存并下一步，添加章节，点击下一步，可能图片不太合适，效果完成。
定义 API：
getCoursePublishInfoById(1d){
return request({
url: '${api_name)/course-publi.sh-info/(id),
method: 'get'
})
publishCourse(id){
return request({
url: '$api_name }/publish-counse/{id),
method:‘put
})
定义数据模型：
data()
return{
saveBtnDisabled: false,1保存按钮是否禁用
courseId:",//所属课程
coursePublish:{}
}
完善步骤导航：
edu/course/chapter.js
previous()
console. log('previous')
this. Srouter.push({ path: '/edu/course/infol+ this. courseId
}
next()
console. log('next')
this. Srouter. push({ path: '/educourse/publish/' this.courseId )
}
获取数据方法：
init(){
if (this. Sroute. params &8 this. Sroute. params.id){
this.courseId this. Sroute.params.id
//根据 id 获取课程基本信息
this. fetchCoursePublishInfoById()
fetchCoursePublishInfoById()
course. get CoursePublishInfoById(this. courseId). then(response ->
ths. coursePublish- response.data.item
)
组件模板：
ch2 styletext-align-: center;)发布新课程c/h2
cel-steps active="" process-status"wait"align-center style="margin-bottom: 48px;">
el- step title-=“填写课程基本信息“
el -step- title--创建课程大纲“
cel -step- title=发布课程
(/el-steps>
cdiv class="ccInfo">
dimg src-"coursePublish. cover">
cdly class-"main">
ch2({ coursePublish. title }}
cp class="gray" (span{ coursePublish lessonNum )}/p>
p)span 所属分类: coursePublish. subjectLevel0- coursePublish. subjectLevelTwo/span>
