页面发布

技术方案

本项目使用MQ实现页面发布的技术方案如下：

1565871706846

技术方案说明：

1、平台包括多个站点，页面归属不同的站点。

2、发布一个页面应将该页面发布到所属站点的服务器上。

3、每个站点服务部署cms client程序，并与交换机绑定，绑定时指定站点Id为routingKey。

指定站点id为routingKey就可以实现cms client只能接收到所属站点的页面发布消息。

4、页面发布程序向MQ发布消息时指定页面所属站点Id为routingKey，将该页面发布到它所在服务器上的cms

client。

路由模式分析如下：

发布一个页面，需发布到该页面所属的每个站点服务器，其它站点服务器不发布。

比如：发布一个门户的页面，需要发布到每个门户服务器上，而用户中心服务器则不需要发布。

所以本项目采用routing模式，用站点id作为routingKey，这样就可以匹配页面只发布到所属的站点服务器上。

页面发布流程图如下：

1565871745166

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保存到所在服务器指定目录

页面发布消费方

需求分析

功能分析：

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

需求如下：

1、将cms Client部署在服务器，配置队列名称和站点ID。

2、cms Client连接RabbitMQ并监听各自的“页面发布队列”

3、cms Client接收页面发布队列的消息

4、根据消息中的页面id从mongodb数据库下载页面到本地

调用dao查询页面信息，获取到页面的物理路径，调用dao查询站点信息，得到站点的物理路径

页面物理路径=站点物理路径+页面物理路径+页面名称。

从GridFS查询静态文件内容，将静态文件内容保存到页面物理路径下。

创建Cms Client工程

1、创建maven工程

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

application.yml的内容如下：

server:
  port: 31000
spring:
  application:
    name: xc-service-manage-cms-client
  data:
    mongodb:
      uri: mongodb://root:123456@localhost:27017
      database: xc_cms
  rabbitmq:
    host: 127.0.0.1
    port: 5672
    username: guest
    password: guest
    virtual-host: /
xuecheng:
  mq:
    #cms客户端监控的队列名称(不同的客户端监控的队列不能重复)
    queue: queue_cms_postpage_01
    routingKey: 5a751fab6abb5044e0d19ea1

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

3、启动类

@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);
} 
}

RabbitmqConfifig配置类

消息队列设置如下：

1、创建“ex_cms_postpage”交换机

2、每个Cms Client创建一个队列与交换机绑定

3、每个Cms Client程序配置队列名称和routingKey，将站点ID作为routingKey

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 Hr|黄锐
 * @create 2019/8/10 17:19
 */
@Configuration
public class CmsCientConfig {
    //队列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名称
    @Value("${xuecheng.mq.routingKey}")
    public String routingKey;

    /**
     * 交换机配置
     */
    @Bean(EX_ROUTING_CMS_POSTPAGE)
    public Exchange EXCHANGE_ROUTING_INFORM() {
        return ExchangeBuilder.directExchange(EX_ROUTING_CMS_POSTPAGE).durable(true).build();
    }

    /**
     * 声明队列
     */
    @Bean(QUEUE_CMS_POSTPAGE)
    public Queue QUEUE_CMS_POSTPAGE() {
        return new Queue(queue_cms_postpage_name, true, false, false, null);
    }
    /**
     * 绑定队列
     */
    @Bean
    public Binding BINDING_QUEUE_INFORM_EXCHANGR(
            @Qualifier(QUEUE_CMS_POSTPAGE) Queue queue,
            @Qualifier(EX_ROUTING_CMS_POSTPAGE) Exchange exchange) {
        return BindingBuilder.bind(queue).to(exchange).with(routingKey).noargs();
    }

}

package com.xuecheng.manage_cms_client.config;

import com.mongodb.MongoClient;
import com.mongodb.client.MongoDatabase;
import com.mongodb.client.gridfs.GridFSBucket;
import com.mongodb.client.gridfs.GridFSBuckets;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * monggoDB的GridFS取文件所需配置类
 * 用于创建下载流对象
 * @author Hr|黄锐
 * @create 2019/8/3 16:20
 */
@Configuration
public class MongodbConfig {
//    从配置文件中取出所用数据库对象
    @Value("${spring.data.mongodb.database}")
    String db;
    @Bean
    public GridFSBucket getGridFSBucket(MongoClient mongoClient){
        MongoDatabase database = mongoClient.getDatabase(db);
        GridFSBucket bucket = GridFSBuckets.create(database);
        return bucket;
    }
}

定义消息格式

消息内容采用json格式存储数据，如下：

页面id：发布页面的id

{ 
    "pageId":"" 
}

PageDao

1、使用CmsPageRepository 查询页面信息

public interface CmsPageRepository extends MongoRepository<CmsPage,String> { 
}

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

public interface CmsSiteRepository extends MongoRepository<CmsSite,String> { 
}

PageService

在Service中定义保存页面静态文件到服务器物理路径方法：

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 Hr|黄锐
 * @create 2019/8/10 17:38
 */
@Service
public class PageService {
    private static final Logger LOGGER = LoggerFactory.getLogger(PageService.class);
    @Autowired
    CmsPageRepository cmsPageRepository;

    @Autowired
    GridFsTemplate gridFsTemplate;
    @Autowired
    GridFSBucket gridFSBucket;
    @Autowired
    CmsSiteRepository cmsSiteRepository;


//保存页面到服务器物理路径
    public void savePageToServerPath(String pageId) {
        //根据pageid查询page
        CmsPage cmsPage = this.findCmspageById(pageId);
        //得到html文件id,从cms_page中查询
        /**
         * htmlFileId是将来页面发布程序,将页面静态化后的文件存在gridFS之后产生的文件id
         */
        String htmlFileId = cmsPage.getHtmlFileId();
        //从gridfs中查询文件
        InputStream inputStream = this.getFileById(htmlFileId);
        if (inputStream == null) {
            LOGGER.error("getFindById InputStream is null ,htmlFileId:{}",htmlFileId);
            return;
        }
        //得到站点信息
        CmsSite cmsSite = this.findSiteById(cmsPage.getSiteId());
        //站点物理路径
            String sitePhysicalPath = cmsSite.getSitePhysicalPath();
        //页面物理路径
            String pagePath = sitePhysicalPath + cmsPage.getPagePhysicalPath() + cmsPage.getPageName();
        //将文件保存在服务器路径
        FileOutputStream outputStream = null;
        try {
            outputStream = new FileOutputStream(new File(pagePath));
            //工具类方法,能将inputStream内容写到outputStream中
          IOUtils.copy(inputStream, outputStream);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            try {
              outputStream.close();
                inputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    //根据文件id查询文件内容
    public InputStream getFileById(String fileId) {
        //文件对象
        GridFSFile fsFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(fileId)));
        GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(fsFile.getObjectId());
        GridFsResource gridFsResource = new GridFsResource(fsFile, gridFSDownloadStream);
        try {
            return gridFsResource.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

    //根据id,查询html文件id
    public CmsPage findCmspageById(String pageId) {
        Optional<CmsPage> optional = cmsPageRepository.findById(pageId);
        if (optional.isPresent()) {
            return optional.get();
        }
        return null;
    }

    //根据站点id,查询站点信息
    public CmsSite findSiteById(String siteId) {
        Optional<CmsSite> optional = cmsSiteRepository.findById(siteId);
        if (optional.isPresent()) {
            return optional.get();
        }
        return null;
    }
}

ConsumerPostPage

在cms client工程的mq包下创建ConsumerPostPage类，ConsumerPostPage作为发布页面的消费客户端，监听

页面发布队列的消息，收到消息后从mongodb下载文件，保存在本地。

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 Hr|黄锐
 * @create 2019/8/10 18:13
 */
@Component
public class ConsumerPostPage {
    @Autowired
    PageService pageService;
    private static final Logger LOGGER = LoggerFactory.getLogger(PageService.class);
    /**
     * 发布页面
     */
    @RabbitListener(queues = {"${xuecheng.mq.queue}"})
    public void postPage(String msg) {
        //解析消息
        Map map = JSON.parseObject(msg, Map.class);
        String 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);
    }
}

页面发布生产方

需求分析

管理员通过 cms系统发布“页面发布”的消费，cms系统作为页面发布的生产方。

需求如下：

1、管理员进入管理界面点击“页面发布”，前端请求cms页面发布接口。

2、cms页面发布接口执行页面静态化，并将静态化页面存储至GridFS中。

3、静态化成功后，向消息队列发送页面发布的消息。

1）获取页面的信息及页面所属站点ID。

2）设置消息内容为页面ID。（采用json格式，方便日后扩展）

3）发送消息给ex_cms_postpage交换机，并将站点ID作为routingKey。

RabbitMQ配置

1、配置Rabbitmq的连接参数

在application.yml添加如下配置：

 rabbitmq:
    host: 127.0.0.1
    port: 5672
    username: guest
    password: guest
    virtual-host: /

2、在pom.xml添加依赖

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

3、RabbitMQConfifig配置

由于cms作为页面发布方要面对很多不同站点的服务器，面对很多页面发布队列，所以这里不再配置队列，只需要

配置交换机即可。

在cms工程只配置交换机名称即可。

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 Hr|黄锐
 * @create 2019/8/10 17:19
 */
@Configuration
public class CmsCientConfig {
    /**
     * 这里只用配交换机,因为队列在消费方已经绑定了交换机,这里不能再在yml文件中硬编码配置
     * 队列,因为使用routing模式,未来会有各种生产者请求消息,要通过代码获取站点id指定为路由
     * key,在消费方会根据路由key判断是否匹配.
     */
    //交换机名称
    public static final String EX_ROUTING_CMS_POSTPAGE = "ex_routing_cms_postpage";

    /**
     * 交换机配置
     */
    @Bean(EX_ROUTING_CMS_POSTPAGE)
    public Exchange EXCHANGE_ROUTING_INFORM() {
        return ExchangeBuilder.directExchange(EX_ROUTING_CMS_POSTPAGE).durable(true).build();
    }
}

Api接口

在api工程定义页面发布接口：

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

PageService

在PageService中定义页面发布方法，代码如下：

/**
     * 页面发布
     * @param pageId
     * @return
     */
    public ResponseResult postPage(String pageId) {
        //执行静态化
        String pageHtml = this.getPageHtml(pageId);
        //将静态化文件存储到GridFS中
        CmsPage cmsPage = saveHtml(pageId, pageHtml);
        //向MQ发送消息
        sendPostPage(pageId);
        return new ResponseResult(CommonCode.SUCCESS);
    }

    /**
     * 保存静态页面内容到Gridfs
     */
    public CmsPage saveHtml(String pageId,String content) {
        //先得到页面信息
        CmsPage cmsPage = this.findPageById(pageId);
        if (cmsPage == null) {
            ExceptionCast.cast(CommonCode.INVALID_PARAM);
        }
        ObjectId objectId = null;
        //将content内容转为输入流
        try {
            InputStream inputStream = IOUtils.toInputStream(content, "utf-8");
        //将文件内容保存到gridfs
             objectId = gridFsTemplate.store(inputStream, cmsPage.getPageName());
        } catch (IOException e) {
            e.printStackTrace();
        }
        //将html文件id更新到cmspage中
            cmsPage.setHtmlFileId(objectId.toHexString());
        cmsPageRepository.save(cmsPage);
        return cmsPage;
    }

    /**
     * 向mq发送消息
     */
    public void sendPostPage(String pageId) {
        //先得到页面信息
        CmsPage cmsPage = this.findPageById(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);
        //站点id
        String siteId = cmsPage.getSiteId();
        rabbitTemplate.convertAndSend(CmsCientConfig.EX_ROUTING_CMS_POSTPAGE, siteId, jsonString);
    }

CmsPageController

编写Controller实现api接口，接收页面请求，调用service执行页面发布。

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

页面发布前端

用户操作流程：

1、用户进入cms页面列表。

2、点击“发布”请求服务端接口，发布页面。

3、提示“发布成功”，或发布失败。

API方法

在 cms前端添加 api方法。

/*发布页面*/ 

export const page_postPage= id => { 

return http.requestPost(apiUrl+'/cms/page/postPage/'+id) 

}

页面

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

添加页面发布事件：

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(() => { 
    }); 
},

测试

这里测试轮播图页面修改、发布的流程：

1、修改轮播图页面模板或修改轮播图地址

注意：先修改页面原型，页面原型调试正常后再修改页面模板。

2、执行页面预览

3、执行页面发布，查看页面是否写到网站目录

4、刷新门户首页并观察轮播图是否变化。

Menu

页面发布功能

页面发布

技术方案

页面发布消费方

创建Cms Client工程

RabbitmqConfifig配置类

定义消息格式

PageDao

PageService

ConsumerPostPage

页面发布生产方

需求分析

RabbitMQ配置

Api接口

PageService

CmsPageController

页面发布前端

API方法

页面

添加页面发布事件：

测试