19-媒资与课程计划关联-查询视频信息

3.4 查询视频信息

3.4.1 需求分析

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

3.4.2 Dao

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

@Data
@ToString
public class TeachplanNode extends Teachplan {
List<TeachplanNode> children;
//媒资信息
private String mediaId;
private String mediaFileOriginalName;
}

2、修改sql语句，添加关联查询媒资信息
添加mediaId、mediaFileOriginalName

<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">
<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>

重启服务

3.4.3 页面查询视频
课程计划结点信息已包括媒资信息，可在页面获取信息后显示：

<el‐button style="font‐size: 12px;" type="text" on‐click={ () => this.querymedia(data.id) }>
{data.mediaFileOriginalname}&nbsp;&nbsp;&nbsp;&nbsp;选择视频</el‐button>

注意刚开始我也没显示，因为mediaFileOriginalname这个单词大小写问题

效果如下：

选择视频后立即刷新课程计划树，在提交成功后，添加查询课程计划代码：this.findTeachplan()，完整代码如下：

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("选择视频成功")
//查询课程计划
this.findTeachplan()
}else{
this.$message.error(res.message)
}
})
},