黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day10(四) [打印本页]

作者: 谷粒姐姐    时间: 2019-4-26 11:13
标题: 【郑州校区】Java的新项目学成在线笔记-day10(四)
1.5.1API方法
[AppleScript] 纯文本查看 复制代码
/*发布课程*/ export const publish = id => {  
return http.requestPost(apiUrl+'/course/publish/'+id);
}

1.5.2 页面
修改 course_pub.vue
添加:

[AppleScript] 纯文本查看 复制代码
<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>

发布方法 ,发布成功重新查询课程,如果课程状态已更改则显示课程详情页面的链接。

[AppleScript] 纯文本查看 复制代码
//发布  
     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;     
      });   
    }

在钩子方法中查询课程信息:

[AppleScript] 纯文本查看 复制代码
mounted(){   
    //课程id   
   this.courseid = this.$route.params.courseid;  
     console.log("courseid=" + this.courseid)   
    //查询课程信息     
  this.getcourse()   
}






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2