黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第9天 讲义-课程预览 Eureka Feign 八 [打印本页]
作者: 我是楠楠    时间: 2019-12-18 16:20
标题: 【郑州校区】学成在线 第9天 讲义-课程预览 Eureka Feign 八
【郑州校区】学成在线 第9天 讲义-课程预览 Eureka Feign 八

5.3 CMS添加页面接口
cms服务对外提供添加页面接口，实现：如果不存在页面则添加，否则就更新页面信息。
此接口由课程管理服务在课程预览时调用。
5.3.1 Api接口
[AppleScript] 纯文本查看 复制代码
 @ApiOperation(

"

保存页面

"

)

public CmsPageResult save(CmsPage cmsPage);

5.3.2 Service
[AppleScript] 纯文本查看 复制代码
 //添加页面，如果已存在则更新页面

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

@PostMapping(

"

/save

"

)

public CmsPageResult save(@RequestBody CmsPage cmsPage) {

return pageService.save(cmsPage);

}


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

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

@ToString

@NoArgsConstructor

public class CoursePublishResult extends ResponseResult {

String previewUrl;

public CoursePublishResult(ResultCode resultCode,String previewUrl) {

super(resultCode);

this.

previewUrl =

previewUrl;

}

}

2、接口定义如下
[AppleScript] 纯文本查看 复制代码
 @ApiOperation(

"

预览课程

"

)

public CoursePublishResult preview(String id);


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

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

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

‐

publish:

siteId: 5b30cba5f58b4411fc6cb1e5

templateId: 5b345a6b94db44269cb2bfec

previewUrl: http://www.xuecheng

.com/cms/preview/

pageWebPath: /course/detail/

pagePhysicalPath: /course/detail/

dataUrlPre: http://localhost:31200/course/courseview/

2、代码如下：
[AppleScript] 纯文本查看 复制代码
 @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
[AppleScript] 纯文本查看 复制代码
 @Override

@PostMapping(

"

/preview/{id}

"

)

public CoursePublishResult preview(@PathVariable(

"

id

"

) String id) {

return courseService.

preview(id);

}


5.5 前端开发

5.5.1 api方法
[AppleScript] 纯文本查看 复制代码
 /

*

预览课程

*

/

export const preview = id

=

> {

return http

.requestPost(apiUrl+

'

/course/preview/

'

+id);

}


5.5.2 页面
创建 course_pub.vue

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

数据对象：
[AppleScript] 纯文本查看 复制代码
data() {

return {

dotype:

''

,

courseid:

''

,

course: {

"

id

"

:

""

,

"

name

"

:

""

,

"

status

"

:

""

},

previewurl:

''

}


方法 ：
[AppleScript] 纯文本查看 复制代码
//预览

preview(){

courseApi.

preview(this.courseid)

.then((res)

=

> {

if(res.success){

this.

$message.error(

'

预览页面生成成功，请点击下方预览链接

'

);

 if(res.url){

//预览url

this.

previewurl = res.url

}

}else{

this.

$message.error(res.message);

}

});

}






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