学成在线-第10天-讲义-课程发布 三

1.4 测试CMS一键发布接口
1.4.1 配置虚拟主机 
在nginx配置课程详情页面的虚拟主机，实现访问：www.xuecheng.com/course/detail/.....html。 

#静态资源服务
upstream static_server_pool{
server 127.0.0.1:91 weight
=10;
}
server {
listen 80;
server_name www.xuecheng
.com;
ssi on;
ssi_silent_errors on;
#课程预览
location /course/detail/ {
proxy_pass http://static_server_pool;
}
}
#学成网静态资源
server {
listen 91;
server_name localhost;
#公司信息
location /static/company/ {
alias F:/develop/xuecheng/static/company/;
}
...

cms会将课程预览页面发布到服务器的F:/develop/xuecheng/static/course/detail/下，通过www.xuecheng.com/course/detail/来访问。
1.4.2 新增站点和模板 
1、新增课程详情页面的站点信息 
如果已增加课程详情页面的站点则忽略此步骤。 
向cms_site中新增如下信息 
 

{
"
_id
"
: ObjectId(
"
5b30b052f58b4411fc6cb1cf
"
),
"
_class
"
:
"
com.xuecheng
.framework.domain.cms.CmsSite
"
,
"
siteName
"
:
"
课程详情站点
"
,
"
siteDomain
"
:
"
[url]http://www.xuecheng[/url]
.com
"
,
"
sitePort
"
:
"
80
"
,
"
siteWebPath
"
:
""
,
"
siteCreateTime
"
: ISODate(
"
2018
‐
02
‐
03T02:34:19.113+0000
"
)
}

2、新增课程详情模板信息 
可直接使用前边章节制作的课程详情信息模板。 
可以GridFS的测试代码添加模板，如果已添加则不用重复添加。 
使用测试GridFS Api将模板文件存储到mongodb:

//文件存储2
@Test
public void testStore2() throws FileNotFoundException {
File file
= new File(
"
C:\\Users\\admin\\Desktop\\coursedetail_t.html
"
);
FileInputStream inputStream = new FileInputStream(file);
//保存模版文件内容
GridFSFile gridFSFile
=
gridFsTemplate.store(inputStream,
"
测试文件
"
,
""
);
String fileId
=
gridFSFile.
getId()
.toString();
System.out.
println(fileId);
}

1.4.3 单元测试 
1、启动RabbitMQ服务 
2、启动cms服务 
3、启动cms_client，注意配置routingKey和队列名称

xuecheng:
mq:
#cms客户端监控的队列名称（不同的客户端监控的队列不能重复）
queue: queue_cms_postpage_03
routingKey: 5b30b052f58b4411fc6cb1cf #此routingKey为门户站点ID

1.5 前端开发
1.5.1API方法

/[/size][/font]
[font=微软雅黑][size=3]*
发布课程
*
/
export const publish = id
=
> {
return http
.requestPost(apiUrl+
'
/course/publish/
'
+id);
}

1.5.2 页面 
修改 course_pub.vue添加

<el
‐
card class
=
"
box
‐
card
"
>
<div slot
=
"
header
"
class
=
"
clearfix
"
>
<span>课程发布</span>
</div>
<div class
=
"
text item
"
>
<div v
‐
if=
"
course.status
==
'
202001
'"
>
状态：制作中<br/>
<el
‐
button type
=
"
primary
"
@click.native
=
"
publish
"
>新课程发布</el
‐
button>
</div>
<div v
‐
else
‐
if=
"
course.status
==
'
202003
'"
>
状态：已下线
<br/><br/>
<span><a :href=
"'
[url]http://www.xuecheng[/url]
.com/course/detail/
'
+this.courseid+
'
.html
'"
target
=
"
_blank
"
>点我查看课程详情页面 </a> </span>
</div>
<div v
‐
else
‐
if=
"
course.status
==
'
202002
'"
>
状态：已发布<br/>
<el
‐
button type
=
"
primary
"
@click.native
=
"
publish
"
>修改发布</el
‐
button>
<br/><br/>
<span><a :href=
"'
[url]http://www.xuecheng[/url]
.com/course/detail/
'
+this.courseid+
'
.html
'"
target
=
"
_blank
"
>点我查看课程详情页面 </a> </span>
</div>
</div>
</el
‐
card>

发布方法 ,发布成功重新查询课程，如果课程状态已更改则显示课程详情页面的链接。

//发布
publish(){
this.
$confirm(
'
课程发布后将不允许回退，是否继续？
'
,
'
提示
'
, {})
.then(()
=
> {
courseApi.
publish(this.courseid)
.then((res)
=
> {
if(res.success){
this.
$message.error(
'
发布成功
'
);
//查询课程信息
this.
getcourse()
}else{
this.
$message.error(
'
发布失败
'
);
}
});
});
},
//查询课程信息
getcourse(){
courseApi.
getCoursebaseById(this.courseid)
.then((res)
=
> {
console.log(res);
this.course
= res;
});
}

在钩子方法中查询课程信息：

mounted(){
//课程id
this.courseid
=
this.
$route.
params.courseid;
console.log(
"
courseid
=
"
+ this.courseid)
//查询课程信息
this.
getcourse()
}