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

最新推荐文章于 2024-01-18 14:41:54 发布

Rsun04551

最新推荐文章于 2024-01-18 14:41:54 发布

阅读量273

点赞数

分类专栏：学成在线

本文链接：https://blog.csdn.net/yang_guang3/article/details/105917667

版权

学成在线专栏收录该内容

27 篇文章 0 订阅

订阅专栏

发布一个页面，需发布到该页面所属的每个站点服务器，其它站点服务器不发布
比如：发布一个门户的页面，需要发布到每个门户服务器上，而用户中心服务器则不需要发布
所以本项目采用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、向新建课程中添加课程计划
添加一级结点
添加二级结点

Rsun04551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
6、页面发布消费方和生产方的

发布一个页面，需发布到该页面所属的每个站点服务器，其它站点服务器不发布。比如：发布一个门户的页面，需要发布到每个门户服务器上，而用户中心服务器则不需要发布。所以本项目采用routing模式，用站点id作为routingKey，这样就可以匹配页面只发布到所属的站点服务器上。页面发布流程：1、前端请求cms执行页面发布。2、cms执行静态化程序生成html文件。3、cms将html文件存储...
复制链接

扫一扫