Java的新项目学成在线笔记-day10（四）

1.5.1API方法

[mw_shl_code=applescript,true]/*发布课程*/ export const publish = id => {  
return http.requestPost(apiUrl+'/course/publish/'+id);
} [/mw_shl_code]

1.5.2 页面
修改 course_pub.vue
添加：

[mw_shl_code=applescript,true]<el‐card class="box‐card">  
<div slot="header" class="clearfix">   
  <span>课程发布</span>  
</div> 
  <div class="text item">  
   <div v‐if="course.status == '202001'">   
    状态：制作中<br/>    
   <el‐button type="primary"  @click.native="publish" >新课程发布</el‐button> 
    </div>    
<div v‐else‐if="course.status == '202003'"> 
      状态：已下线    
   <br/><br/>      
<span><a :href="'http://www.xuecheng.com/course/detail/'+this.courseid+'.html'"  target="_blank">点我查看课程详情页面 </a> 
</span>   
  </div> 
    <div v‐else‐if="course.status == '202002'">   
    状态：已发布<br/>   
    <el‐button type="primary"  @click.native="publish" >修改发布</el‐button>   
    <br/><br/>    
   <span><a :href="'http://www.xuecheng.com/course/detail/'+this.courseid+'.html'"  target="_blank">点我查看课程详情页面 </a> </span>  
   </div>  
</div>
</el‐card>[/mw_shl_code]
发布方法 ,发布成功重新查询课程，如果课程状态已更改则显示课程详情页面的链接。

[mw_shl_code=applescript,true]//发布  
     publish(){    
     this.$confirm('课程发布后将不允许回退，是否继续？', '提示', {}).then(() => {   
        courseApi.publish(this.courseid).then((res) => {    
         if(res.success){      
         this.$message.error('发布成功');
//查询课程信息       
        this.getcourse()      
       }else{        
       this.$message.error('发布失败');     
        }  
           });   
      });   
      },     
  //查询课程信息  
     getcourse(){   
      courseApi.getCoursebaseById(this.courseid).then((res) => {     
      console.log(res);        
   this.course = res;     
      });   
    }[/mw_shl_code]
在钩子方法中查询课程信息：

[mw_shl_code=applescript,true]mounted(){   
    //课程id    
   this.courseid = this.$route.params.courseid;  
     console.log("courseid=" + this.courseid)   
    //查询课程信息     
  this.getcourse()    
} [/mw_shl_code]