文章目录

一.技术方案
二.页面发布——消费方
- 1.需求分析
- 2.创建Cms Client工程
- - 1）创建maven工程
  - 2）配置文件
  - 3）启动类
- 3.RabbitmqConfig配置类
- 4.定义消息格式
- 5.PageDao
- - 1）使用CmsPageRepository 查询页面信息
  - 2）使用CmsSiteRepository查询站点信息，主要获取站点物理路径
- 6.PageService
- 7.ConsumerPostPage
三.页面发布——生产方
- 1.需求分析
- 2.RabbitMQ配置
- - 1）配置Rabbitmq的连接参数
  - 2）在pom.xml添加依赖
  - 3）RabbitMQConfig配置
- 3.Api接口
- 4.PageService
- 5.CmsPageController
四.页面发布——前端
- 1.API方法
- 2.页面
- - 1）修改page_list.vue，添加发布按钮
  - 2）添加页面发布事件
五.测试

一.技术方案

本项目使用MQ实现页面发布的技术方案如下：
在这里插入图片描述技术方案说明：
1、平台包括多个站点，页面归属不同的站点。
2、发布一个页面应将该页面发布到所属站点的服务器上。
3、每个站点服务部署cms client程序，并与交换机绑定，绑定时指定站点Id为routingKey。指定站点id为routingKey就可以实现cms client只能接收到所属站点的页面发布消息。
4、页面发布程序向MQ发布消息时指定页面所属站点Id为routingKey，将该页面发布到它所在服务器上的cms client。

路由模式分析如下：
发布一个页面，需发布到该页面所属的每个站点服务器，其它站点服务器不发布。
比如：发布一个门户的页面，需要发布到每个门户服务器上，而用户中心服务器则不需要发布。
所以本项目采用routing模式，用站点id作为routingKey，这样就可以匹配页面只发布到所属的站点服务器上。

页面发布流程图如下：
在这里插入图片描述 1、前端请求cms执行页面发布。
2、cms执行静态化程序生成html文件。
3、cms将html文件存储到GridFS中。
4、cms向MQ发送页面发布消息。
5、MQ将页面发布消息通知给Cms Client。
6、Cms Client从GridFS中下载html文件。
7、Cms Client将html保存到所在服务器指定目录。

二.页面发布——消费方

1.需求分析

功能分析：
创建Cms Client工程作为页面发布消费方，将Cms Client部署在多个服务器上，它负责接收到页面发布的消息后从GridFS中下载文件在本地保存。

需求如下：
1、将cms Client部署在服务器，配置队列名称和站点ID。
2、cms Client连接RabbitMQ并监听各自的“页面发布队列”
3、cms Client接收页面发布队列的消息
4、根据消息中的页面id从mongodb数据库下载页面到本地

调用dao查询页面信息cmspage，获取到页面的物理路径；调用dao查询站点信息，得到站点的物理路径
服务器物理路径=站点物理路径+页面物理路径+页面名称。
从GridFS查询静态文件内容，将静态文件内容保存到服务器物理路径下。

2.创建Cms Client工程

创建工程 xc-service-manage-cms-client
文件路径：xcEduService01\xc-service-manage-cms-client
在这里插入图片描述

1）创建maven工程

文件位置：xcEduService01\xc-service-manage-cms-client\pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>xc-framework-parent</artifactId><groupId>com.xuecheng</groupId><version>1.0-SNAPSHOT</version><relativePath>../xc-framework-parent/pom.xml</relativePath></parent><modelVersion>4.0.0</modelVersion><artifactId>xc-service-manage-cms-client</artifactId><dependencies><dependency><groupId>com.xuecheng</groupId><artifactId>xc-framework-model</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-io</artifactId></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId></dependency></dependencies>
</project>

2）配置文件

在resources下配置application.yml和logback-spring.xml
文件位置：xcEduService01\xc-service-manage-cms-client\src\main\resources\application.yml

server:port: 31000
spring:application:name: xc-service-manage-cms-clientdata:mongodb:uri:  mongodb://root:123@localhost:27017database: xc_cmsrabbitmq:host: 127.0.0.1port: 5672username: guestpassword: guestvirtualHost: /
xuecheng:mq:#cms客户端监控的队列名称（不同的客户端监控的队列不能重复）queue: queue_cms_postpage_01routingKey: 5a751fab6abb5044e0d19ea1	#此routingKey为门户站点ID

说明：在配置文件中配置队列的名称，每个 cms client在部署时注意队列名称不要重复

3）启动类

文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\ManageCmsClientApplication.java

package com.xuecheng.manage_cms_client;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.ComponentScan;@SpringBootApplication
@EntityScan("com.xuecheng.framework.domain.cms")//扫描实体类
@ComponentScan(basePackages={"com.xuecheng.framework"})//扫描common包下的类
@ComponentScan(basePackages={"com.xuecheng.manage_cms_client"})//扫描本项目下的所有类
public class ManageCmsClientApplication {public static void main(String[] args) {SpringApplication.run(ManageCmsClientApplication.class,args);}
}

3.RabbitmqConfig配置类

文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\config\RabbitmqConfig.java

package com.xuecheng.manage_cms_client.config;import org.springframework.amqp.core.*;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @author Administrator* @version 1.0**/
@Configuration
public class RabbitmqConfig {//队列bean的名称public static final String QUEUE_CMS_POSTPAGE = "queue_cms_postpage";//交换机的名称public static final String EX_ROUTING_CMS_POSTPAGE="ex_routing_cms_postpage";//队列的名称@Value("${xuecheng.mq.queue}")public  String queue_cms_postpage_name;//routingKey 即站点Id@Value("${xuecheng.mq.routingKey}")public  String routingKey;/*** 交换机配置使用direct类型* @return the exchange*/@Bean(EX_ROUTING_CMS_POSTPAGE)public Exchange EXCHANGE_TOPICS_INFORM() {return ExchangeBuilder.directExchange(EX_ROUTING_CMS_POSTPAGE).durable(true).build();}//声明队列@Bean(QUEUE_CMS_POSTPAGE)public Queue QUEUE_CMS_POSTPAGE() {Queue queue = new Queue(queue_cms_postpage_name);return queue;}/*** 绑定队列到交换机** @param queue    the queue* @param exchange the exchange* @return the binding*/@Beanpublic Binding BINDING_QUEUE_INFORM_SMS(@Qualifier(QUEUE_CMS_POSTPAGE) Queue queue, @Qualifier(EX_ROUTING_CMS_POSTPAGE) Exchange exchange) {return BindingBuilder.bind(queue).to(exchange).with(routingKey).noargs();}}

4.定义消息格式

消息内容采用json格式存储数据，如下：
页面id：发布页面的id

{
"pageId":""
}

5.PageDao

1）使用CmsPageRepository 查询页面信息

文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\dao\CmsPageRepository.java

package com.xuecheng.manage_cms_client.dao;import com.xuecheng.framework.domain.cms.CmsPage;
import org.springframework.data.mongodb.repository.MongoRepository;public interface CmsPageRepository extends MongoRepository<CmsPage,String> {//根据页面名称查询CmsPage findByPageName(String pageName);//根据页面名称、站点Id、页面webpath查询CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName, String siteId, String pageWebPath);
}

2）使用CmsSiteRepository查询站点信息，主要获取站点物理路径

文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\dao\CmsSiteRepository.java

package com.xuecheng.manage_cms_client.dao;import com.xuecheng.framework.domain.cms.CmsSite;
import org.springframework.data.mongodb.repository.MongoRepository;public interface CmsSiteRepository extends MongoRepository<CmsSite,String> {
}

6.PageService

在Service中定义保存页面静态文件到服务器物理路径方法：
文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\service\PageService.java

package com.xuecheng.manage_cms_client.service;import com.mongodb.client.gridfs.GridFSBucket;
import com.mongodb.client.gridfs.GridFSDownloadStream;
import com.mongodb.client.gridfs.model.GridFSFile;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.CmsSite;
import com.xuecheng.manage_cms_client.dao.CmsPageRepository;
import com.xuecheng.manage_cms_client.dao.CmsSiteRepository;
import org.apache.commons.io.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.gridfs.GridFsResource;
import org.springframework.data.mongodb.gridfs.GridFsTemplate;
import org.springframework.stereotype.Service;import java.io.*;
import java.util.Optional;/*** @author Administrator* @version 1.0**/
@Service
public class PageService {private static  final Logger LOGGER = LoggerFactory.getLogger(PageService.class);@AutowiredGridFsTemplate gridFsTemplate;@AutowiredGridFSBucket gridFSBucket;@AutowiredCmsPageRepository cmsPageRepository;@AutowiredCmsSiteRepository cmsSiteRepository;//保存html页面到服务器物理路径public void savePageToServerPath(String pageId){//根据pageId查询cmsPageCmsPage cmsPage = this.findCmsPageById(pageId);//得到html的文件id，从cmsPage中获取htmlFileId内容String htmlFileId = cmsPage.getHtmlFileId();//从gridFS中查询html文件InputStream inputStream = this.getFileById(htmlFileId);if(inputStream == null){LOGGER.error("getFileById InputStream is null ,htmlFileId:{}",htmlFileId);return ;}//得到站点idString siteId = cmsPage.getSiteId();//得到站点的信息CmsSite cmsSite = this.findCmsSiteById(siteId);//得到站点的物理路径String sitePhysicalPath = cmsSite.getSitePhysicalPath();//得到页面的物理路径String pagePath = sitePhysicalPath + cmsPage.getPagePhysicalPath() + cmsPage.getPageName();//将html文件保存到服务器物理路径上FileOutputStream fileOutputStream = null;try {fileOutputStream = new FileOutputStream(new File(pagePath));IOUtils.copy(inputStream,fileOutputStream);} catch (Exception e) {e.printStackTrace();}finally {try {inputStream.close();} catch (IOException e) {e.printStackTrace();}try {fileOutputStream.close();} catch (IOException e) {e.printStackTrace();}}}//根据文件id从GridFS中查询文件内容public InputStream getFileById(String fileId){//文件对象GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(fileId)));//打开下载流GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId());//定义GridFsResourceGridFsResource gridFsResource = new GridFsResource(gridFSFile,gridFSDownloadStream);try {return gridFsResource.getInputStream();} catch (IOException e) {e.printStackTrace();}return null;}//根据页面id查询页面信息public CmsPage findCmsPageById(String pageId){Optional<CmsPage> optional = cmsPageRepository.findById(pageId);if(optional.isPresent()){return optional.get();}return null;}//根据站点id查询站点信息public CmsSite findCmsSiteById(String siteId){Optional<CmsSite> optional = cmsSiteRepository.findById(siteId);if(optional.isPresent()){return optional.get();}return null;}
}

7.ConsumerPostPage

在cms client工程的mq包下创建ConsumerPostPage类，ConsumerPostPage作为发布页面的消费客户端，监听
页面发布队列的消息，收到消息后从mongodb下载文件，保存在本地。

文件位置：xcEduService01\xc-service-manage-cms-client\src\main\java\com\xuecheng\manage_cms_client\mq\ConsumerPostPage.java

package com.xuecheng.manage_cms_client.mq;import com.alibaba.fastjson.JSON;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.manage_cms_client.service.PageService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.amqp.rabbit.annotation.RabbitListener;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;import java.util.Map;/*** 监听MQ，接收页面发布消息* @author Administrator* @version 1.0**/
@Component
public class ConsumerPostPage {private static  final Logger LOGGER = LoggerFactory.getLogger(ConsumerPostPage.class);@AutowiredPageService pageService;@RabbitListener(queues = {"${xuecheng.mq.queue}"})public void postPage(String msg){//解析消息Map map = JSON.parseObject(msg, Map.class);//得到消息中的页面idString pageId = (String) map.get("pageId");//校验页面是否合法CmsPage cmsPage = pageService.findCmsPageById(pageId);if(cmsPage == null){LOGGER.error("receive postpage msg,cmsPage is null,pageId:{}",pageId);return ;}//调用service方法将页面从GridFs中下载到服务器pageService.savePageToServerPath(pageId);}
}

三.页面发布——生产方

1.需求分析

管理员通过 cms系统发布“页面发布”的消费，cms系统作为页面发布的生产方。
需求如下：
1、管理员进入管理界面点击“页面发布”，前端请求cms页面发布接口。
2、cms页面发布接口执行页面静态化，并将静态化页面存储至GridFS中。
3、静态化成功后，向消息队列发送页面发布的消息。
1）获取页面的信息及页面所属站点ID。
2）设置消息内容为页面ID。（采用json格式，方便日后扩展）
3）发送消息给ex_cms_postpage交换机，并将站点ID作为routingKey。

工程位置：xcEduService01\xc-service-manage-cms

2.RabbitMQ配置

1）配置Rabbitmq的连接参数

在application.yml添加如下配置：

server:port: 31001
spring:application:name: xc-service-manage-cmsdata:mongodb:uri:  mongodb://root:123@localhost:27017database: xc_cmsrabbitmq:host: 127.0.0.1port: 5672username: guestpassword: guestvirtualHost: /freemarker:cache: false  #关闭模板缓存，方便测试settings:template_update_delay: 0

2）在pom.xml添加依赖

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>

3）RabbitMQConfig配置

由于cms作为页面发布方要面对很多不同站点的服务器，面对很多页面发布队列，所以这里不再配置队列，只需要
配置交换机即可。
文件位置：xcEduService01\xc-service-manage-cms\src\main\java\com\xuecheng\manage_cms\config\RabbitmqConfig.java

package com.xuecheng.manage_cms.config;import org.springframework.amqp.core.Exchange;
import org.springframework.amqp.core.ExchangeBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @author Administrator* @version 1.0**/
@Configuration
public class RabbitmqConfig {//交换机的名称public static final String EX_ROUTING_CMS_POSTPAGE="ex_routing_cms_postpage";/*** 交换机配置使用direct类型* @return the exchange*/@Bean(EX_ROUTING_CMS_POSTPAGE)public Exchange EXCHANGE_TOPICS_INFORM() {return ExchangeBuilder.directExchange(EX_ROUTING_CMS_POSTPAGE).durable(true).build();}}

3.Api接口

在api工程定义页面发布接口：
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\cms\CmsPageControllerApi.java

    //页面发布@ApiOperation("页面发布")public ResponseResult post(String pageId);

4.PageService

在PageService中定义页面发布方法，代码如下：
文件位置：xcEduService01\xc-service-manage-cms\src\main\java\com\xuecheng\manage_cms\service\PageService.java

    //页面发布public ResponseResult post(String pageId){//执行页面静态化String pageHtml = this.getPageHtml(pageId);//将页面静态化文件存储到GridFs中CmsPage cmsPage = saveHtml(pageId, pageHtml);//向MQ发消息sendPostPage(pageId);return new ResponseResult(CommonCode.SUCCESS);}//向mq 发送消息private void sendPostPage(String pageId){//得到页面信息CmsPage cmsPage = this.getById(pageId);if(cmsPage == null){ExceptionCast.cast(CommonCode.INVALID_PARAM);}//创建消息对象Map<String,String> msg = new HashMap<>();msg.put("pageId",pageId);//转成json串String jsonString = JSON.toJSONString(msg);//发送给mq//站点idString siteId = cmsPage.getSiteId();rabbitTemplate.convertAndSend(RabbitmqConfig.EX_ROUTING_CMS_POSTPAGE,siteId,jsonString);}//保存html到GridFSprivate CmsPage saveHtml(String pageId,String htmlContent){//先得到页面信息CmsPage cmsPage = this.getById(pageId);if(cmsPage == null){ExceptionCast.cast(CommonCode.INVALID_PARAM);}ObjectId objectId = null;try {//将htmlContent内容转成输入流InputStream inputStream = IOUtils.toInputStream(htmlContent, "utf-8");//将html文件内容保存到GridFSobjectId = gridFsTemplate.store(inputStream, cmsPage.getPageName());} catch (IOException e) {e.printStackTrace();}//将html文件id更新到cmsPage中cmsPage.setHtmlFileId(objectId.toHexString());cmsPageRepository.save(cmsPage);return cmsPage;}

5.CmsPageController

编写Controller实现api接口，接收页面请求，调用service执行页面发布
文件位置：xcEduService01\xc-service-manage-cms\src\main\java\com\xuecheng\manage_cms\controller\CmsPageController.java

@Override
@PostMapping("/postPage/{pageId}")
public ResponseResult post(@PathVariable("pageId") String pageId) {return pageService.post(pageId);
}

四.页面发布——前端

用户操作流程：
1、用户进入cms页面列表。
2、点击“发布”请求服务端接口，发布页面。
3、提示“发布成功”，或发布失败。

1.API方法

在 cms前端添加 api方法
文件位置：xc-ui-pc-sysmanage\src\module\cms\api\cms.js

/*发布页面*/
export const page_postPage= id => {
return http.requestPost(apiUrl+'/cms/page/postPage/'+id)
}

2.页面

文件位置：xc-ui-pc-sysmanage\src\module\cms\page\page_list.vue

1）修改page_list.vue，添加发布按钮

<el‐table‐column label="发布" width="80">
<template slot‐scope="scope">
<el‐button
size="small" type="primary" plain @click="postPage(scope.row.pageId)">发布
</el‐button>
</template>
</el‐table‐column>

2）添加页面发布事件

postPage (id) {
this.$confirm('确认发布该页面吗?', '提示', {
}).then(() => {
cmsApi.page_postPage(id).then((res) => {
if(res.success){
console.log('发布页面id='+id);
this.$message.success('发布成功，请稍后查看结果');
}else{
this.$message.error('发布失败');
}
});
}).catch(() => {
});
},