3.3.4 前端开发 3.3.4.1 API方法 定义api方法，调用课程管理服务保存媒资信息接口 [mw_shl_code=applescript,true]/保存媒资信息/ export const savemedia = teachplanMedia => {
return http.requestPost(apiUrl+'/course/savemedia',teachplanMedia); } [/mw_shl_code] 3.3.4.2 API调用 在课程视频方法中调用api：

[mw_shl_code=applescript,true]choosemedia(mediaId,fileOriginalName,mediaUrl){
this.mediaFormVisible = false; //保存课程计划与视频对应关系 let teachplanMedia = {}; teachplanMedia.teachplanId = this.activeTeachplanId;
teachplanMedia.mediaId = mediaId;
teachplanMedia.mediaFileOriginalName = fileOriginalName; teachplanMedia.mediaUrl = mediaUrl; teachplanMedia.courseId = this.courseid; //保存媒资信息到课程数据库
courseApi.savemedia(teachplanMedia).then(res=>{
if(res.success){
this.$message.success("选择视频成功")
}else{
this.$message.error(res.message)
} }) },[/mw_shl_code] 3.3.4测试 1、向叶子结点课程计划保存媒资信息 操作结果：保存成功 2、向非叶子结点课程计划保存媒资信息 操作结果：保存失败

3.4 查询视频信息 3.4.1 需求分析 课程计划的视频信息保存后在页面无法查看，本节解决课程计划页面显示相关联的媒资信息。 解决方案： 在获取课程计划树结点信息时将关联的媒资信息一并查询，并在前端显示，下图说明了课程计划显示的区域。

3.4.2 Dao 修改课程计划查询的Dao: 1、修改模型 在课程计划结果信息中添加媒资信息


[mw_shl_code=applescript,true]@Data
  @ToString  public class TeachplanNode extends Teachplan {     
   List<TeachplanNode> children;     
   //媒资信息    
  private String mediaId;   
   private String mediaFileOriginalName; 
}[/mw_shl_code]
2、修改sql语句，添加关联查询媒资信息
添加mediaId、mediaFileOriginalName

[mw_shl_code=applescript,true]<resultMap type="com.xuecheng.framework.domain.course.ext.TeachplanNode" id="teachplanMap" >      <id property="id" column="one_id"/>     
<result property="pname" column="one_name"/>    
  <result property="grade" column="one_grade"/>  
      <collection property="children"  ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode"> 
[/mw_shl_code]
[mw_shl_code=applescript,true]<id property="id" column="two_id"/>    
      <result property="pname" column="two_name"/>    
      <result property="grade" column="two_grade"/>  
        <collection property="children"  ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode">   
           <id property="id" column="three_id"/>     
         <result property="pname" column="three_name"/>      
        <result property="grade" column="three_grade"/>    
          <result property="mediaId" column="mediaId"/>     
         <result property="mediaFileOriginalName" column="mediaFileOriginalName"/>   
       </collection>  
    </collection>
  </resultMap> 
<select id="selectList" resultMap="teachplanMap" parameterType="java.lang.String" >  
    SELECT  
    a.id one_id,    
  a.pname one_name,   
   a.grade one_grade,   
   a.orderby one_orderby,   
   b.id two_id,    
  b.pname two_name,    
  b.grade two_grade,    
  b.orderby two_orderby,   
   c.id three_id,   
   c.pname three_name,  
    c.grade three_grade,   
   c.orderby three_orderby,   
   media.media_id mediaId,    
  media.media_fileoriginalname mediaFileOriginalName 
     FROM      teachplan a LEFT JOIN teachplan b  
    ON a.id = b.parentid     
LEFT JOIN teachplan c    
  ON b.id = c.parentid 
     LEFT JOIN teachplan_media media   
   ON c.id = media.teachplan_id     
WHERE  a.parentid = '0'   
   <if test="_parameter!=null and _parameter!=''">   
       and a.courseid=#{courseId}    
  </if>   
     ORDER BY a.orderby, 
     b.orderby,    
  c.orderby 
</select> 
[/mw_shl_code]