黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第10天-讲义-课程发布 三 [打印本页]
作者: 我是楠楠    时间: 2019-12-25 10:49
标题: 【郑州校区】学成在线-第10天-讲义-课程发布 三
【郑州校区】学成在线-第10天-讲义-课程发布 三

1.4 测试CMS一键发布接口
1.4.1 配置虚拟主机
在nginx配置课程详情页面的虚拟主机，实现访问：www.xuecheng.com/course/detail/.....html。
[AppleScript] 纯文本查看 复制代码
#静态资源服务

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中新增如下信息

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

"

_id

"

: ObjectId(

"

5b30b052f58b4411fc6cb1cf

"

),

"

_class

"

:

"

com.xuecheng

.framework.domain.cms.CmsSite

"

,

"

siteName

"

:

"

课程详情站点

"

,

"

siteDomain

"

:

"

http://www.xuecheng

.com

"

,

"

sitePort

"

:

"

80

"

,

"

siteWebPath

"

:

""

,

"

siteCreateTime

"

: ISODate(

"

2018

‐

02

‐

03T02:34:19.113+0000

"

)

}

2、新增课程详情模板信息
可直接使用前边章节制作的课程详情信息模板。
可以GridFS的测试代码添加模板，如果已添加则不用重复添加。
使用测试GridFS Api将模板文件存储到mongodb:
[AppleScript] 纯文本查看 复制代码
 //文件存储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和队列名称

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

mq:

#cms客户端监控的队列名称（不同的客户端监控的队列不能重复）

queue: queue_cms_postpage_03

routingKey: 5b30b052f58b4411fc6cb1cf #此routingKey为门户站点ID

1.5 前端开发
1.5.1API方法
[AppleScript] 纯文本查看 复制代码
/

*

发布课程

*

/

export const publish = id

=

> {

return http

.requestPost(apiUrl+

'

/course/publish/

'

+id);

}

1.5.2 页面
修改 course_pub.vue添加

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

"'

http://www.xuecheng

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

"'

http://www.xuecheng

.com/course/detail/

'

+this.courseid+

'

.html

'"

target

=

"

_blank

"

>点我查看课程详情页面 </a> </span>

</div>

</div>

</el

‐

card>

发布方法 ,发布成功重新查询课程，如果课程状态已更改则显示课程详情页面的链接。
[AppleScript] 纯文本查看 复制代码
 //发布

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;

});

}


在钩子方法中查询课程信息：
[AppleScript] 纯文本查看 复制代码
 mounted(){

//课程id

this.courseid

=

this.

$route.

params.courseid;

console.log(

"

courseid

=

"

+ this.courseid)

//查询课程信息

this.

getcourse()

}







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