学成在线 第9天 讲义-课程预览 Eureka Feign 八

5.3 CMS添加页面接口 
cms服务对外提供添加页面接口，实现：如果不存在页面则添加，否则就更新页面信息。 
此接口由课程管理服务在课程预览时调用。 
5.3.1 Api接口

@ApiOperation(
"
保存页面
"
)
public CmsPageResult save(CmsPage cmsPage);

5.3.2 Service

//添加页面，如果已存在则更新页面
public CmsPageResult save(CmsPage cmsPage){
//校验页面是否存在，根据页面名称、站点Id、页面webpath查询
CmsPage cmsPage1 =
cmsPageRepository
.findByPageNameAndSiteIdAndPageWebPath(cmsPage.
getPageName(),
cmsPage.
getSiteId(), cmsPage.
getPageWebPath());
if(cmsPage1 !
=null){
//更新
return this.update(cmsPage1.
getPageId(),cmsPage);
}else{
//添加
return this.add(cmsPage);
}
}

5.3.3 Controller

@Override
@PostMapping(
"
/save
"
)
public CmsPageResult save(@RequestBody CmsPage cmsPage) {
return pageService.save(cmsPage);
}

5.4 课程预览服务端 
5.4.1 Api定义 
此Api是课程管理前端请求服务端进行课程预览的Api 
请求：课程Id 
响应：课程预览Url 
1、定义响应类型 
 

@Data
@ToString
@NoArgsConstructor
public class CoursePublishResult extends ResponseResult {
String previewUrl;
public CoursePublishResult(ResultCode resultCode,String previewUrl) {
super(resultCode);
this.
previewUrl =
previewUrl;
}
}

2、接口定义如下

@ApiOperation(
"
预览课程
"
)
public CoursePublishResult preview(String id);

5.4.2 创建 Feign Client 
在课程管理工程创建CMS服务的Feign Client，通过此Client远程请求cms添加页面。

@FeignClient(value
= XcServiceList.XC_SERVICE_MANAGE_CMS)
public interface CmsPageClient{
//保存页面
@PostMapping(
"
/cms/page/save
"
)
public CmsPageResult save(@RequestBody CmsPage cmsPage);
}

5.4.3 Service 
1、配置添加页面参数信息 
在application.yml中配置：

course
‐
publish:
siteId: 5b30cba5f58b4411fc6cb1e5
templateId: 5b345a6b94db44269cb2bfec
previewUrl: [url]http://www.xuecheng[/url]
.com/cms/preview/
pageWebPath: /course/detail/
pagePhysicalPath: /course/detail/
dataUrlPre: http://localhost:31200/course/courseview/

2、代码如下：

@Value(
"
${course
‐
publish.dataUrlPre}
"
)
private String publish_dataUrlPre;
@Value(
"
${course
‐
publish.
pagePhysicalPath}
"
)
private String publish_page_physicalpath;
@Value(
"
${course
‐
publish.
pageWebPath}
"
)
private String publish_page_webpath;
@Value(
"
${course
‐
publish.siteId}
"
)
private String publish_siteId;
@Value(
"
${course
‐
publish.templateId}
"
)
private String publish_templateId;
@Value(
"
${course
‐
publish.
previewUrl}
"
)
private String previewUrl;
//根据id查询课程基本信息
public CourseBase findCourseBaseById(String courseId){
Optional<CourseBase> baseOptional =
courseBaseRepository
.findById(courseId);
if(baseOptional.isPresent()){
CourseBase courseBase
=
baseOptional.
get();
return courseBase;
}
ExceptionCast.cast(CourseCode.COURSE_GET_NOTEXISTS);
return null;
}
//课程预览
public CoursePublishResult preview(String courseId){
CourseBase one
=
this.findCourseBaseById(courseId);
//发布课程预览页面
CmsPage cmsPage
= new CmsPage();
//站点
cmsPage.setSiteId(publish_siteId);//课程预览站点
//模板
cmsPage.setTemplateId(publish_templateId);
//页面名称
cmsPage.setPageName(courseId+
"
.html
"
);
//页面别名
cmsPage.setPageAliase(one.
getName());
//页面访问路径
cmsPage.setPageWebPath(publish_page_webpath);
//页面存储路径
cmsPage.setPagePhysicalPath(publish_page_physicalpath);
//数据url
cmsPage.setDataUrl(publish_dataUrlPre+courseId);
//远程请求cms保存页面信息
CmsPageResult cmsPageResult
=
cmsPageClient.save(cmsPage);
if(!cmsPageResult.isSuccess()){
return new CoursePublishResult(CommonCode.FAIL,null);
}
//页面id
String pageId
=
cmsPageResult.
getCmsPage()
.
getPageId();
//页面url
String pageUrl =
previewUrl+pageId;
return new CoursePublishResult(CommonCode.SUCCESS,pageUrl);
}

5.4.4 Controller

@Override
@PostMapping(
"
/preview/{id}
"
)
public CoursePublishResult preview(@PathVariable(
"
id
"
) String id) {
return courseService.
preview(id);
}

5.5 前端开发

5.5.1 api方法

/
*
预览课程
*
/
export const preview = id
=
> {
return http
.requestPost(apiUrl+
'
/course/preview/
'
+id);
}

5.5.2 页面 
创建 course_pub.vue

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

数据对象：

data() {
return {
dotype:
''
,
courseid:
''
,
course: {
"
id
"
:
""
,
"
name
"
:
""
,
"
status
"
:
""
},
previewurl:
''
}

方法 ：

//预览[/size][/font]
[font=微软雅黑][size=3]preview(){
courseApi.
preview(this.courseid)
.then((res)
=
> {
if(res.success){
this.
$message.error(
'
预览页面生成成功，请点击下方预览链接
'
);[/size][/font]
 if(res.url){
//预览url
this.
previewurl = res.url
}
}else{
this.
$message.error(res.message);
}
});
}