6、页面发布消费方和生产方的

本文涉及的产品
云数据库 MongoDB,通用型 2核4GB
简介: 发布一个页面,需发布到该页面所属的每个站点服务器,其它站点服务器不发布比如:发布一个门户的页面,需要发布到每个门户服务器上,而用户中心服务器则不需要发布

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

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

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


创建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、pom中添加amqp、mongodb、io、fastjson依赖

2、yml文件中配置MongoDB、rabbitmq服务

3、编写RabbitmqConfig配置类

创建交换机

每个队列与交换机绑定

配置队列名称和routingKey,将站点ID作为routingKey

最重要还是这个配置类


定义消息格式:消息内容采用json格式存储数据

PageService:

保存html页面到服务器物理路径:

根据pageId查询cmsPage表获取:FileId、SiteId、PageName、PagePhysicalPath;

拼接页面的物理路径;

将页面的物理路径保存到服务器物理路径上;


ConsumerPostPage:

作为发布页面的消费客户端,监听 页面发布队列的消息,收到消息后从mongodb下载文件,保存在本地。


页面发布生产方:

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

1、yml中配置Rabbitmq的连接参数

2、pom中配置amqp

3、RabbitMQConfig配置

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

4、在PageService类中定义页面发布方法postPage、发送页面发布消息sendPostPage、保存静态页面内容saveHtml。


代码执行流程:

page_list.vue页面

<el-button size="small" type="primary" plain @click="postPage(page.row.pageId)">发布</el-button>

点击发布调用postPage方法:

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

调用page_postPage请求后端接口:

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

执行CmsPageController中方法:

该方法执行完成调用rabbitTemplate.convertAndSend方法发送消息:

Client监听到mq消息时会调用PageService中的savePageToServerPath方法进行消费

思考:

1、如果发布到服务器的页面内容不正确怎么办?

2、一个页面需要发布很多服务器,点击“发布”后如何知道详细的发布结果?

3、一个页面发布到多个服务器,其中有一个服务器发布失败时怎么办?


用户的操作流程:


1、进入我的课程

2、点击“添加课程”,进入添加课程界面

3、输入课程基本信息,点击提交

4、课程基本信息提交成功,自动进入“管理课程”界面,点击“管理课程”也可以进入“管理课程”界面

5、编辑图片 上传课程图片

6、编辑课程营销信息 营销信息主要是设置课程的收费方式及价格

7、编辑课程计划 添加课程计划


课程计划:定义了课程的章节内容, 课程计划包括两级,第一级是课程的大章节、第二级是大章节下属的小章节,每个小章节通常是一段视频,学生点击小章节在线学习

代码实现:

前端使用element-ui 的tree组件来完成,在course_plan.vue文件中添加tree组件的代码

<el-tree
      :data="teachplanList"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

数据对象:

data() {
      return {
        mediaFormVisible:false,
        teachplayFormVisible:false,//控制添加窗口是否显示
        teachplanList : [{
          id: 1,
          pname: '一级 1',
          children: [{
            id: 4,
            pname: '二级 1-1',
            children: [{
              id: 9,
              pname: '三级 1-1-1'
            }, {
              id: 10,
              pname: '三级 1-1-2'
            }]
          }]
        }],
        defaultProps:{
          children: 'children',
          label: 'pname'
        },
        teachplanRules: {
          pname: [
            {required: true, message: '请输入课程计划名称', trigger: 'blur'}
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'blur'}
          ]
        },
        teachplanActive:{},
        teachplanId:''
      }
    }

后端采用表的自连接方式进行查询,mapper.xml文件的SQL语句如下:

<select id="selectList" parameterType="java.lang.String"
            resultMap="teachplanMap">
        SELECT
        a.id one_id,
        a.pname one_pname,
        b.id two_id,
        b.pname two_pname,
        c.id three_id,
        c.pname three_pname
        FROM
        teachplan a
        LEFT JOIN teachplan b
        ON b.parentid = a.id
        LEFT JOIN teachplan c
        ON c.parentid = b.id
        WHERE a.parentid = '0'
        <if test="_parameter !=null and _parameter!=''">
            AND a.courseid = #{courseId}
        </if>
        ORDER BY a.orderby,
        b.orderby,
        c.orderby
    </select>

说明:针对输入参数为简单类型#{}中可以是任意类型,判断参数是否为空要用 _parameter(它属于mybatis的内 置参数)


添加课程计划:

上级结点说明:

不选择上级结点表示当前课程计划为该课程的一级结点。

当添加该课程在课程计划中还没有节点时要自动添加课程的根结点

添加课程计划采用弹出窗口组件Dialog

1、在course_plan.vue页面添加添加课程计划的弹出窗口代码:

<el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible">
      <el-form ref="teachplanForm" :model="teachplanActive" label-width="140px" style="width:600px;"
               :rules="teachplanRules">
        <el-form-item label="上级结点">
          <el-select v-model="teachplanActive.parentid" placeholder="不填表示根结点">
            <el-option
              v-for="item in teachplanList"
              :key="item.id"
              :label="item.pname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节/课时名称" prop="pname">
          <el-input v-model="teachplanActive.pname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="teachplanActive.ptype">
            <el-radio class="radio" label='1'>视频</el-radio>
            <el-radio class="radio" label='2'>文档</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学习时长(分钟)  请输入数字">
          <el-input type="number" v-model="teachplanActive.timelength" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序字段">
          <el-input v-model="teachplanActive.orderby" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节/课时介绍" prop="description">
          <el-input type="textarea" v-model="teachplanActive.description"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="teachplanActive.status">
            <el-radio class="radio" label="0">未发布</el-radio>
            <el-radio class="radio" label='1'>已发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="addTeachplan">提交</el-button>
          <el-button type="primary" v-on:click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

2、在数据模型中添加如下变量:

teachplayFormVisible:false,//控制添加窗口是否显示

3、后台CourseController中编写addTeachplan方法

测试流程:

1、新建一个课程

2、向新建课程中添加课程计划

添加一级结点

添加二级结点


相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。 &nbsp; 相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
目录
相关文章
|
30天前
|
消息中间件 安全 物联网
MQTT常见问题之新增自定义主题后平台侧收不到发布的数据如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
1月前
|
运维 监控 数据挖掘
应用研发平台EMAS产品常见问题之华为离线推送接收失败如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
|
1月前
|
运维 监控 开发工具
应用研发平台EMAS常见问题之OPPO离线通知发送失败如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
28 4
|
1月前
|
运维 监控 Cloud Native
应用研发平台EMAS常见问题之尝试设置小米的通道但是小米手机收不到消息如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
29 4
|
2月前
|
开发框架 小程序 物联网
社区每周丨交易组件全面升级及订单中心模板更新(6.26-6.30)
社区每周丨交易组件全面升级及订单中心模板更新(6.26-6.30)
117 0
|
2月前
|
API 开发者
【产品上新】文档中心新增订阅和消息推送功能
【产品上新】文档中心新增订阅和消息推送功能
64 0
|
3月前
|
存储 缓存 Java
9.队列-生产消费模式
9.队列-生产消费模式
31 0
|
6月前
|
运维
生产发布事件
生产发布事件
17 0
|
存储 机器学习/深度学习 缓存
个推消息中心如何实现多渠道消息智能下发?
个推爆款产品【消息中心】如何满足金融、互联网等典型行业客户的多渠道消息智能下发需求?本文介绍了消息中心的技术架构。
622 0
个推消息中心如何实现多渠道消息智能下发?
|
JSON 前端开发 JavaScript
从生产到消费,基于物料的前端开发链路
作者通过一些实际的案例,分享基于物料进行前端开发的链路,欢迎接入使用。
从生产到消费,基于物料的前端开发链路