Java的新项目学成在线笔记-day9（十六）

5.5 前端开发
5.5.1 api方法

[mw_shl_code=applescript,true]/*预览课程*/ export const preview = id =>{   
return http.requestPost(apiUrl+'/course/preview/'+id);
} [/mw_shl_code]
5.5.2 页面 
创建 course_pub.vue

[mw_shl_code=applescript,true]<template>  
  <div>  
    <el‐card class="box‐card">    
    <div slot="header" class="clearfix">       
   <span>课程预览</span>  
      </div>      
  <div class="text item">   
       <el‐button type="primary"  @click.native="preview" >课程预览</el‐button>   
       <br/><br/>        
  <span v‐if="previewurl && previewurl!=''"><a :href="previewurl" target="_blank">点我查看课 程预览页面 </a> </span>  
      </div>    
  </el‐card>
    </div> 
</template>  [/mw_shl_code]
数据对象：

[mw_shl_code=applescript,true]data() {  
  return {  
    dotype:'',   
   courseid:'',   
   course: {"id":"","name":"","status":""},   
   previewurl:''  
  }  [/mw_shl_code]
方法 ：

[mw_shl_code=applescript,true]//预览
  preview(){   
courseApi.preview(this.courseid).then((res) => { 
     if(res.success){     
   this.$message.error('预览页面生成成功，请点击下方预览链接'); 
[/mw_shl_code]
[mw_shl_code=applescript,true] if(res.url){   
       //预览url      
    this.previewurl = res.url   
     } 
     }else{      
  this.$message.error(res.message);  
    }   
}); 
}   
[/mw_shl_code]