黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第14天-讲义-媒资管理 六 [打印本页]

---

作者: 我是楠楠    时间: 2019-12-31 16:19
标题: 【郑州校区】学成在线-第14天-讲义-媒资管理 六

【郑州校区】学成在线-第14天-讲义-媒资管理 六

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

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

[AppleScript] 纯文本查看 复制代码

 @Data

@ToString

public class TeachplanNode extends Teachplan {

List<TeachplanNode> children;

//媒资信息

private String mediaId;

private String mediaFileOriginalName;

} 

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

[AppleScript] 纯文本查看 复制代码

 <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 页面查询视频
课程计划结点信息已包括媒资信息，可在页面获取信息后显示：

[AppleScript] 纯文本查看 复制代码

<el‐button style="font‐size: 12px;" type="text" on‐click={ () => this.querymedia(data.id) }>

{data.mediaFileOriginalName}    选择视频</el‐button>

效果如下：


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

[AppleScript] 纯文本查看 复制代码

 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)

}

})

},

---

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

黑马程序员IT技术论坛 X3.2