第6天-講義頁面發(fā)布課程管理

學(xué)成第6天講義-頁面發(fā)布課程管頁面發(fā)本項(xiàng)目使用MQ實(shí)現(xiàn)頁面發(fā)布的技術(shù)方案技術(shù)方案說明、每個(gè)站點(diǎn)服務(wù)部署cscliet程序，并與交換機(jī)綁定，綁定時(shí)指定站點(diǎn)d為otinKy。指定站點(diǎn)id為otinKy就可以實(shí)現(xiàn)cscliet只能接收到所屬站點(diǎn)的頁面發(fā)布消息。路由模式分析如頁面發(fā)布流程圖如下5、MQ將頁面發(fā)布消息通知給CmsClient6、CmsClient從GridFS中html文件7、CmsClient將html保存到所在服務(wù)器需求分功能分析創(chuàng)建CmsClient工程作為頁面發(fā)布消費(fèi)方，將CmsClient部署在多個(gè)服務(wù)器上，它負(fù)責(zé)接收到頁面發(fā)布的消息后需求如下1、將cmsClient部署在服務(wù)器，配置隊(duì)列名稱和站點(diǎn)ID。2、cmsClient連接RabbitMQ并各自的“頁面發(fā)布隊(duì)列”3、cmsClient接收頁面發(fā)布隊(duì)列的消息調(diào)用a查詢頁面信息，獲取到頁面的物理路徑，調(diào)用da查詢站點(diǎn)信息，得到站點(diǎn)的物理路徑頁面物理路徑站點(diǎn)物理路徑頁面物理路徑頁面名稱。創(chuàng)建CmsClient工<?xml<?xmlversion="1.0"<projectinstance""‐<relativePath>../xc‐framework‐parent/pom.xml</rlative<artifactId>xc‐service‐manage‐cms‐clien<versio<artifatId>spring 2、配置文在resources下配置application.yml和logback-spring.xmlport:port:31000name:uri:mongodb://root:123@localhost:27017database:xc_cmshost:port:5672username:guestpassword:guestvirtualHost:/#cms客戶 的隊(duì)列名稱（不同的客戶 的隊(duì)列不能重復(fù)queue:queue_cms_postroutingKey: #此routingKey為門戶站點(diǎn)說明：在配置文件中配置隊(duì)列的名稱，每個(gè)cmsclient在部署時(shí)注意隊(duì)列名稱不要重復(fù).cms")//掃描實(shí)體@ComponentScan(basePackages={"com.xuecheng.framework"})掃 mon下的所有publicclassManageCmsClientApplication{publicstaticvoidmain(String[]args){ }}RabbitmqCon?g消息隊(duì)列設(shè)置如2、每個(gè)CmsClient創(chuàng)建一個(gè)隊(duì)列與 packagecom.xuecheng.manage_cms_client.config;importorg.springframework.amqp.core.*;importorg.springframework.beans.factory.annotation.Qualifier;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.context.annotation.Bean;import@author@versionpublicclassRabbitmqConfig//隊(duì)列beanpublicstaticfinalStringQUEUE_CMS_POSTPAGE="queuecms_p//交換機(jī)的名publicstaticfinalStringEX_ROUTING_CMSPOSTPGE="http://隊(duì)列的名 uepublicStringqueue_cms_pstpa//routingKey即站點(diǎn)Id@Value("${xuecheng.mqoutingKey}")publicStringroutingKey;交換機(jī)配置使用direct類@return publicExchangeEXCHAGE_TOPICS_INFORM()return} 隊(duì)publicQueueQUEUE_CMS_POSTPAGE()Queuequeue=newQueue(queue_cms_postpage_name);returnqueue;}綁定隊(duì)列到交換@param the@paramexchangethe**@returnthepublicBindingBINDING_QUEUE_INFORM_SMS(@Qualifier(QUEUE_CMS_POSTPAGE)Queuequeue,@Qualifier(EX_ROUTING_CMS_POSTPAGE)Exchangeexchange){return}}定義消息格{{}1、使用CmsPageRepository查詢頁面publicpublicinterfaceCmsPageRepositoryextendsMongRepository<CmsPage,String>｝ publicpublicinterfacCmsSiteRepositryextendsMongoRepository<CmsSite,String>}packagepackageimportcom.mongodb.client.gridfs.GridFSBucket;importcom.mongodb.client.gridfs.GridFSDownloadStream;importcom.mongodb.client.gridfs.model.GridFSFile;importcom.xuecheng.framework. importcom.xuecheng.framework. importcom.xuecheng.framework. importcom.xuecheng.framework.exception.ExceptionCast;importcom.xuecheng.manage_cms_client.dao.CmsPageRepository;import importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.data.mongodb.core.query.Criteria;importorg.springframework.data.mongodb.core.query.Query;importorg.springframework.data.mongodb.gridfs.GridFsResource;importorg.springframework.data.mongodb.gridfs.GridFsTemplate;importorg.springframework.stereotype.Service;importimport@author@versionpublicclassPageServiceCmsPageRepositorycmsPageRepository;CmsSiteRepositoryGridFsTemplategridFsTemplate;GridFSBucket//將頁面html保存到頁面物理publicvoidsavePageToServerPath(StringOptional<CmsPage>optional ExceptinCast}//取出頁面物理路CmsPagecmsPage=//頁面所屬站CmsSitecmsSie=//頁面物理路StringpagePath=msSite.getSitePhysicalPath()+cmsPage.getPagePhysicalPath()+//查詢頁面靜態(tài)文StringhtmlFileId=cmsPage.getHtmlFileId();InputStreaminputStream=this.getFileById(htmlFileId);if(inputStream==null){}FileOutputStreamfileOutputStream=null;try{fileOutputStream=newFileOutputStream(new//將文件內(nèi)容保存到服務(wù)物理路}catch(Exceptione)}finallytry}catch(IOException{}try}catch(IOException{}}}//根據(jù)文件id獲取文件內(nèi)publicInputStreamgetFileById(StringfileId){try{GridFSFilegridFSFile= GridFSDownloadStreamgridFSDownloadStream= GridFsResourcegridFsResource=neGridFsRsource(gridFSFile,gridFSDownloadStream);returngridFsResource.getInputStream();}catch(IOException{}return}//根據(jù)站點(diǎn)id得到站publicCmsSiteetCmsSiteById(StringOptional<CmsSite>optional=cmsSiteRepository.findById(siteId);if(optonalisPresent()){CmsSitecmsSite=optional.get();returcmsSite;}return}}在cscliet工程的m包下創(chuàng)建CsrPstP類，CsrPstP作為發(fā)布頁面的消費(fèi)客戶端，頁面發(fā)布隊(duì)列的消息，收到消息后從mongodb文件，保存在本地。packagepackageimportimport importcom.xuecheng.manage_cms_client.dao.CmsPageRepository;importcom.xuecheng.manage_cms_client.service.PageService;importorg.slf4j.Logger;importimportorg.springframework.amqp.rabbit.annotation.RabbitListener;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframew importjava.util.Map;importjava.util.Optional;@author@versionpublicclassConsumerPostPageprivatestaticfinalLoggerLOGGER=LoggerFactory.getLogger(CnsumePostPge.class);CmsPageRepositorycmsPageRepository;PageService publicvoidpostPage(Stringmsg){//解析消Mapmap=JSON.parseObject(msgMap.class);LOGGER.info("receivecmspostpage:{}",msg.toString());//取出頁面StringpageId=(String)ma//查詢頁面信Optional<CmPage>optional=cmsPageRepository.findById(pageId);LOGER.error("receecmspostpage,cmsPageisnull:{}",msg.toString());return;}//將頁面保存到服務(wù)器物理路pageService.sav}}需求分管理員通過cms系統(tǒng)發(fā)布“頁面發(fā)布”的消費(fèi)，cms系統(tǒng)作為頁面發(fā)布的生產(chǎn)需求如下2、cms頁面發(fā)布接口執(zhí)行頁面靜態(tài)化，并將靜態(tài)化頁面至GridFS中RabbitMQ在application.ymlhost:port:5672username:guestpassword:guestvirtualHost:/2、在pom.xml<groupId>org.spri<artifactIdspring‐3、RabbitMQCon?g配置由于cm配置交換機(jī)即可。在cms工程只配置交換機(jī)名稱即可packagepackageimportimportorg.springframework.beans.factory.annotation.Qualifier;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.context.annotation.Bean;import.3Apipackageimportimportorg.springframework.beans.factory.annotation.Qualifier;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.context.annotation.Bean;importpublicclassRabbitmqConfig//publicstaticfinalString交換機(jī)配置使用direct@returnthepublicExchangeEXCHANGE_TOPICS_INFORM()return}}@ApiOperation("@ApiOperation("發(fā)布頁面publicResponseResultpost(Stringp1.3.4 代碼如下////頁面發(fā)publicResponseResultpostPage(String//執(zhí)行靜態(tài)StringpageHtml=this.getPageHtml(pageId);}//保存靜態(tài)化CmsPagecmsPage=saveHtml(pageId,//returnnew}//發(fā)送頁面發(fā)布消privatevoidsendPostPage(StringCmsPagecmsPage=this.getById(pageId);if(cmsPage==null){CmsPagecmsPage=this.getById(pageId);if(cmsPage==null){}Map<String,String>msgMap=newHashMap<>();//Stringmsg=//獲取站點(diǎn)id作為StringsiteId=this.rabbitTemplate.convertAndSend(RabbitmqConfig.EX_ROUTING_CMS_POSTPAGE,siteId,}//privateCmsPagesaveHtml(StringpageId,String//Optional<CmsPage>optional=cmsPageRepository.findById(pageId)}CmsPagecmsPage= StringhtmlFileId=cmsPage.getHtmlFileId(); }//保存html文件到InputStreaminputStream=IOUtilstoInputStream(conteObjectIdobjectId=gridFsTemplate.sore(inputStream,//文件StringfileId=objectId.toStri cmsPageRepositorysave(cmsPage);returncmsage;}1.3.5 publicResponseResultpost(@PathVariable("pageId")String{return}用戶操作流程2、點(diǎn)擊“發(fā)布”請求服務(wù)端接口，發(fā)布API在cms前端添加api/*/*發(fā)布頁面exportconstpage_postPage=id=>return}頁<el‐table‐column<el‐table‐columnlabel="發(fā)布"<templatesize="small"type="primary"pain@click="p geId)">發(fā)添加頁面發(fā)布事postPagepostPage(id)this.$confirm('確認(rèn)發(fā)布該頁面嗎?','提示',{}).then((){cmsApi.page_postPage(id).then((res)=>{console.log('發(fā)布頁面this.$message.success('發(fā)布成功，請稍后查看結(jié)果this.$message.error('發(fā)布失敗}}).catch(()=>2、執(zhí)行頁面預(yù)課程管教育平臺(tái)的課程信息相當(dāng)于平臺(tái)的商品。課程管理是管理功能中最重要的模塊。本項(xiàng)目為教學(xué)機(jī)構(gòu)提1、分類管2、新增課3、修改課4、預(yù)覽課5、發(fā)布課用戶的操作流程如下1、進(jìn)入課2、點(diǎn)擊“添加課程”5、編上傳課程信息主要是設(shè)置課程的方式及價(jià)格7、編輯課程計(jì)添加課程計(jì)劃下：1、前后端工程導(dǎo)課程管理服務(wù)端工程采用SpringBoot技術(shù)構(gòu)建，技術(shù)層技術(shù)使用SpringdataJpa（與SpringdataMongodb類2、課程計(jì)劃功課程計(jì)劃功能采用全程教課程、新增課程、修改課程、課程四個(gè)功能采用實(shí)戰(zhàn)方式，課堂上會(huì)講解每個(gè)功能的需求及，講完成學(xué)生開始實(shí)戰(zhàn)，由導(dǎo)師進(jìn)行技術(shù)指導(dǎo)。4、參考文實(shí)戰(zhàn)結(jié)束提供每個(gè)功能的開檔，學(xué)生參考文檔并修正功能缺陷搭建數(shù)據(jù)庫環(huán)創(chuàng)建數(shù)據(jù)數(shù)據(jù)表介數(shù)據(jù)表結(jié)構(gòu)如下導(dǎo)入課程管理服務(wù)工持久層技術(shù)介紹課程管理服務(wù)使用MySQL數(shù)據(jù)庫課程信息，持久層技術(shù)如下1、springdatajpa：用于表的基本CRUD。3、druid：使用阿里巴巴提供的springboot整合druid包druid-spring-boot-starterdruid-spring-boot-starter地址 /alibaba/druid/tree/master/druid-spring-boot-導(dǎo)入導(dǎo)入課程管理前端工課程管理屬于教學(xué)管理子系統(tǒng)的功能，使用用戶為教學(xué)機(jī)構(gòu)的管理和老師，為保證系統(tǒng)的可性，單獨(dú)創(chuàng)建一個(gè)教學(xué)管理前端工程。教學(xué)管理前端工程與系統(tǒng)管理前端的工程結(jié)構(gòu)一樣，也采用vuejs框架來實(shí)現(xiàn)。從課程資料 拷貝c-i-pcteach.zip到工程，使用webom打開，動(dòng)工：效果圖如下：課程計(jì)什么是課程計(jì)劃課程計(jì)劃包括兩級，第一級是課程的大章節(jié)、第二級是大章節(jié)下屬的小章節(jié)，每個(gè)小章節(jié)通常是一段，學(xué)生擊小章節(jié)學(xué)習(xí)。教學(xué)管理對課程計(jì)劃如何管理需求分頁面原tree組件介本功能使用element-ui的tree1、組:data="data"show‐checkboxnode‐key="id"default‐:expand‐on‐clic:render‐ontent=renderC2、數(shù)據(jù)對letletid=export{data(){{dataid:label一級1',[{id:label:'二級[{id:9,},},id:label:'三級}}}JSX是Javascript和XML結(jié)合的一種格式，它是React的組成部分，JSX和XML語法類似，可以定義屬性以素。唯一特殊的是可以用大括號來加入JavaScript表達(dá)式。遇到HTML（以<開頭），就用HTML規(guī)則解析；遇到代碼塊（以{開頭），就用JavaScrit規(guī)則解析。下面是的一個(gè)例子設(shè)置方法如下：1、Javascriptversion選擇ReactJSX（如果沒有就選擇JSX2、HTML類型文件中增加preferences->Editor->FileTypes中找到上邊框中HTML在下邊加一個(gè)如果已經(jīng)在vuetemplate中已存在.vue則把它改為.vue2(因?yàn)橐贖tml中添加API課程計(jì)劃為樹型結(jié)構(gòu)，由樹根（課程）和樹枝（章節(jié)）組成，為了保證系統(tǒng)的可擴(kuò)展性，在系統(tǒng)設(shè)計(jì)時(shí)將課程計(jì)劃設(shè)置為樹型結(jié)構(gòu)。@GenericGenerator(name="jpa‐uuid",strategy="uuid")publicclassTeachplanimplementsSerializable{privatestaticfinallongserialVersionUID=@GeneratedValue(generator=@Column(length=32)privateStringid;privateStringpname;privateStringparentid;privateStringgrade;privateStringptype;privateStringdescription;privateStringcourseid;privateStringstatus;privateIntegerorderby;privateDoubletimelength;privateString}id:label一級1',[{id:label:二級publicclassTeachplanNodeextends{List<TeachplanNode>}根據(jù)課程i查詢課程的計(jì)劃接口如下，在ai工程創(chuàng)建cors包，創(chuàng)建CoursCotllerAi接口類并定義接口方法如下：publicpublicinterface{@ApiOperation("課程計(jì)劃查詢publicTeachplanNodefindTeachplanList(String}課程管理服a.idone_id,a.pnameone_pname,b.idtwo_id,b.pnametwo_pname,c.idthree_id,c.pnamethree_pnameteachplanLEFTJOINteachplanbONa.id=b.parentidLEFTJOINteachplancONb.id=c.parentidWHEREa.parentid=ANDa.courseid='402885816243d2dd0162ORDERBYa.orderby,1)mapperpublicinterfaceTeachplanMapperpublicTeachplanNodeselectList(String}2）mapper文<resultMap<resultMap<idproperty="id".course.ext.TeachplanNode"id="teachplanMap"<resultproperty="pname"<collection<idproperty="id"<resultproperty="pname"<collectionproperty="children" <idproperty="id"<resultproperty="pname"<selectid="selectList"resultMap="teachplanMap"parameterType="java.lang.String">a.idone_id,a.pnameone_name,b.idtwo_id,b.pnametwo_name,c.idthree_id,c.pnameEFTJOINteachplanONa.id=LEFTJOINteachplancONb.id=c.parentidWHEREa.parentid=<iftest="_parameter!=nulland_paramter!=''">anda.courseid=#{courseId}ORDERBYa.orderby,說明：針對輸入?yún)?shù)為簡單類型}中可以是任意類型，判斷參數(shù)是否為空要用_paameter（它屬于mybtis置參數(shù)）publicclass{TeachplanMapper//查詢課程計(jì)publicTeachplanNodefindTeachplanList(StringTeachplanNodeteachplanNode=teachplanMapper.selectList(courseId);returnteachplanNode;}} publicclassCourseControllerimplements{CourseService publicTeachplanNodefindTeachplanList(String{return}}Get請求：前端頁Api方/*/*查詢課程計(jì)劃exportconstfindTeachplanList=courseid=>return}Api調(diào)1、在mounted鉤子方法中查詢課程計(jì)定義查詢課程計(jì)劃的方法，賦值給數(shù)據(jù)對象findTeachplan(){courseApi.findTeachplanList(this.courseid).then((res)=>{findTeachplan(){courseApi.findTeachplanList(this.courseid).then((res)=>{this.teachplanList=[];//this.teachplanList=res.children;}在mounted//課程this.courseid=//}修改樹結(jié)點(diǎn)的屬defaultProps:defaultProps:children:'children',label:'pname'}需求分用戶操作流程1、進(jìn)入課程計(jì)劃頁面，點(diǎn)擊“添加課程計(jì)劃不選擇結(jié)點(diǎn)表示當(dāng)前課程計(jì)劃為該課程的一級結(jié)1、視圖部<el‐dialog<el‐dialogtitle="添加課程計(jì)劃":visible.sync="teachplayFormVisible<el‐formref="teachplayForm":model="teachplanActive"style="width:600px;":rules="teachplanRules"<el‐form‐item 結(jié)點(diǎn)"><el‐selectv‐model="teachplanActive.parentid"placeholder="不填表示根結(jié)點(diǎn)v‐for="itemin<el‐form‐itemlabel="章節(jié) 名稱"<el‐input<el‐inputv‐model="teachplanActive.pname"<el‐form‐itemlabel="課程類型<el‐radio‐group<el‐radioclass="radio" <el‐radioclass="radio"label='2'>文檔<el‐form‐itemlabel="學(xué)習(xí)時(shí)長（分鐘）請輸入數(shù)字"><el‐inputtype="number"v‐model="teachplanActive.timelength"auto‐complete="off"<el‐form‐itemlabel="排序字段<el‐inputv‐model="teachplanActive.orderby"auto‐complete="off"<el‐form‐itemlabel="章節(jié) 介紹"<el‐inputtype="textarea"v‐model="teachplanActive.description"<el‐form‐itemlabel="狀態(tài)"<el‐radio‐groupv‐model="teachplanActive.statu"<el‐radioclass="radio"label="0未發(fā)布<el‐radioclass="radio"label='1'>已發(fā)布</el<el‐form‐item<el‐buttontype="primary"v‐on:click="addTacplan">提交<el‐buttontype="primary"v‐n:click="resetForm重置2、數(shù)據(jù)模teachplanRules:{pname:{required:true,message:'請輸入課程計(jì)劃名稱',trigger:status:{required:true,message:'請選擇狀態(tài)',trigger:']3<el‐button<el‐buttontype="primary"@click="teachplayFormVisible=true">添加課程計(jì)劃////提交課程計(jì)//this.teachplanActive={}API1）添加課程計(jì)@ApiOperation("@ApiOperation("添加課程計(jì)劃publicResponseResultaddTeachplan(Teacplan課程管理服publicpublicinterfaceeachplanepositoryextendsJpaRepository<Teachplan,String>//定義方法根據(jù)課程id和父結(jié)點(diǎn)id查詢出結(jié)點(diǎn)列表，可以使用此方法實(shí)現(xiàn)查publicList<Teachpla>findByCourseidAndParentid(Stringcou