系統(tǒng)頁面管理-94.開發(fā)cmsv

學成第3天講義-CMS頁面管理開自定義條件使使用CmsPageRepository中的findAll(Example<S>var1,Pageablevar2)方法publicvoidtestFindAll()//條件匹配ExampleMatcherexampleMatcher=ExampleMatcher.matching();exampleMatcher=exampleMatcher.withMatcher("pageAliase",//頁面別名模糊查詢，需要自定義字符串的匹配器實 包//ExampleMatcher.GenericPropertyMatchers.startsWith()//開頭匹//條件CmsPagecmsPage=new cmsPage.setPageAliase("分類導航//創(chuàng)建條件實Example<CmsPage>example=Example.of(cmsPage,PageablePageablepageable=newPageRequest(0,Page<CmsPage>all=cmsPageRepository.findAll(example,pageable);}頁面列表分頁查@parampage當前頁@paramsize頁面顯示個@paramqueryPageRequest查詢條@return頁面列publicQueryResponseResultfindList(intpage,intsize,QueryPageRequest//條件匹配ExampleMatcherexampleMatcher=ExampleMatcher.matching().withMatcher("pageAliase",//條件CmsPagecmsPage=new}//}//創(chuàng)建條件實Example<CmsPage>example=Example.of(cmsPage,//page=//分頁對Pageablepageable=newPageRequest(page,//分頁查Page<CmsPage>all=cmsPageRepository.findAll(example,pageable);QueryResult<CmsPage>cmsPageQueryResult=newQueryResult<CmsPage>();//返回結(jié)returnnew}無需測頁1、增加查詢表<!‐‐<!‐‐查詢表單<el‐form<el‐selectv‐model="params.siteId"placeholder="請選擇站點v‐for="itemin 頁面別名：<el‐inputv‐model="params.pageAliase"style="width:<el‐buttontype="primary"v‐on:click="query"size="small">查詢2、數(shù)據(jù)模型對增加 ist、pageAliase、siteId，如下data()data()returnreturn page:1,//size:2//}}}3、在鉤子方法中構建siist站點列mounted()mounted() ist=[{{}]}Api調(diào)1、向服務端傳遞查詢條件，修改cms.js，如下importhttpfrom'./../../../base/api/public'importquerystringfrom'querystring'letsysConfig=require('@/../config/sysConfig')letapiUrl=sysConfig.xcApiUrlPre;exportconstpage_list=(page,size,params)=>//將json對象轉(zhuǎn)成key/valueletquery=return}query:functionthis.total=res.queryResult.totalthis.list=res.queryResult.list}測試如下新增頁1、定義響應模publicclassCmsPageResultextends{CmsPagepublicCmsPageResult(ResultCoderesultCode,CmsPagecmsPage){this.cmsPage=}}2、定義添加在api工程中添加接口@ApiOperation("@ApiOperation("添加頁面publicCmsPageResultadd(CmsPage頁面唯一索publicpublicinterfaceCmsPageRepositoryextendsMongoRepository<CmsPage,String>//根據(jù)頁面名稱、站點id、頁 路徑查CmsPagefindByPageNameAndSiteIdAndPageW th(StringpageName,StringsiteId,String 。。2、使用CmsPageRepository提供的save方法////添加頁publicCmsPageResultadd(CmsPage CmsPagecmsPage1= cmsPage.getSiteId(),cmsPage.getPageW cmsPage.setPageId(null);//添加頁面主鍵由springdata自動//返回結(jié)CmsPageResultcmsPageResult=newCmsPageResult(CommonCode.SUCCESS,cmsPage);returncmsPageResult;}returnnew}////添加 publicCmsPageResultadd(@RequestBodyCmsPage{return}接口測使用postmanpost請求：{"dataUrl":"string","htmlFileId":"string","pageAliase":{"dataUrl":"string","htmlFileId":"string","pageAliase":"pageCreateTime":"pageHtml":"pageName測試頁面","pageParameter":"string","pagePhysicalPath":"string","pageStatus":"string","pageTemplate":"string","pageType":"string", th":"string","siteId":"string","templateId":"string"}成功響應結(jié)果失敗響應結(jié)果新增頁編寫page_add.vue頁{path:'/cms/page/add',name:'{path:'/cms/page/add',name:'新增頁面',component:注意：由于添加頁面不需要顯示為一個菜單，這里ide設置為re測試，在瀏覽器地址欄輸入<router‐link<router‐linkclass="mui‐tab‐item"<el‐buttontype="primary"size="small">新增頁面to：目標路由地址 :model="pageForm"label‐width="80px"<el‐form‐itemlabel="所屬站點"<el‐selectv‐model="pageForm.siteId"placeholder="請選擇站點v‐for="itemin <el‐form‐itemlabel="選擇模版"<el‐selectv‐model="pageForm.templateId"placeholder="請選擇v‐for="itemin <el‐form‐itemlabel="頁面名稱"<el‐inputv‐model="pageForm.pageName"auto‐complete="off"<el‐form‐itemlabel="別名"<el‐inputv‐model="pageForm.pageAliase"auto‐complete="off"<el‐form‐item 路徑" <el‐input th"auto‐complete="off"<el‐form‐itemlabel="物理路徑"<el‐inputv‐model="pageForm.pagePhysicalPath"auto‐complete="off"<el‐form‐itemlabel="類型<el‐radio‐group<el‐radioclass="radio"label="0">靜態(tài)<el‐radioclass="radio"label="1">動態(tài)<el‐form‐itemlabel="創(chuàng)建時間<el‐date‐pickertype="datetime"placeholder="創(chuàng)建時間"<divslot="footer"<el‐buttontype="primary"@click="addSubmit提交FormAttributes說明：model表單數(shù)據(jù)對象rules表單驗證規(guī)則Form-ItemAttributesprop表單域model字段，在使用validate、resetFields方法的情況下，該屬性是必填的label文詳情屬性及事件參考/component/formreturn{// //模版列 pageForm:{pageName:'',pageAliase:'', th:'',pageCreateTime:new}}alert("提交}}//初始化站點 ist={{siteName:'siteName:'測試站}] ist={{}]}新增頁面按鈕新增頁面表單進入新增頁面后只能通過菜單再次進入頁面列表，可以在新增頁面添加返回按鈕，點擊返回按鈕返回到頁面列表。1)新增頁面按鈕帶上<router‐link<router‐linkitem":to="{path:'/cms/page/add/',query:{page:this.params.page,siteId:this.params.siteId}}"><el‐buttontype="primary"size="small">新增頁面<el‐button<el‐buttontype="primary"@click="go_back返回path:'/cms/page/list',{page:this.$route.query.page,}}說明 aa、通過在路由上添加key/value串使用this.$route.query來取參數(shù)，例如可以通過this.$route.query.id獲取參數(shù)idb、通過將參數(shù)作為路由一部分進行傳參數(shù)使用this.$route.params來獲取，例如：定義的路由為/router1/:id，請求/router1/123時可以通過this.$route.params.id來獲取，此種情況用this.$route.query.id是拿不到的。查詢列表支持回url例子created()created()//從路由上獲取參this.params.page=Number.parseInt(this.$route.query.page||1);this.params.siteId=this.$route.query.siteId||'';小技巧：使用||返回第一個有效emen-I的Form組件提供表單校驗的方法：在fom屬性上配置rls（表單驗證規(guī)則） :model="pageForm":rules="pageFormRules"label‐width="80px"{{required:true,message:'請選擇站點',trigger:'{required:true,message:'請選擇模版',trigger:'pageName:{required:true,message:'請輸入頁面名稱',trigger: th:{required:true,message:'請輸 路徑',trigger:pagePhysicalPath:{required:true,message:'請輸入物理路徑',trigger:]}的校驗規(guī)則參考/component/form中“表單驗證”的例子2、點擊提交按鈕觸發(fā)校1)在form表單上添 :model="pageForm":rules="pageFormRules"label‐width="80px"this.$refs.pageForm.validate((valid)this.$refs.pageForm.validate((valid){if(valid)alert('提交}elsereturnfalse;}Api調(diào)/*/*頁面添加exportconstpage_add=params=>return}this.$confirm('this.$confirm('確認提交嗎？','提示',{}).then(()=>2、使用message組件提示操作結(jié)果（message提交成功',type:'success'完整的代碼如下this.$refs.pageForm.validate((valid)=>{if(valid)this.$confirm('確認提交嗎？','提示',{}).then(()=>{cmsApi.page_add(this.pageForm).then((res)=>{console.log(res);if(res.success){message提交成功type:type:this.$message.error('提交失敗}}}1、進入頁面列表頁3、輸入頁面信息點擊“提交修改頁修改頁面用戶操publicCmsPagefindById(Stringid);@ApiOperation("修改頁面publicCmsPageResultedit(Stringid,CmsPage說明：提交數(shù)據(jù)使用post、pu都可以，只是根據(jù)tt方法的規(guī)范，put方法是對服務器指定資源進行修改，所以這里使用pu方法對頁面修改進行修改。使用SpringData提供的?ndById方法完成根據(jù)主鍵查詢。使用SpringData提供的save方法完成數(shù)據(jù)保存。////根據(jù)id查詢頁publicCmsPagegetById(StringOptional<CmsPage>optional=cmsPageRepository.findById(id);return}returnnull;}//更新頁面信publicCmsPageResultupdate(Stringid,CmsPagecmsPage)//根據(jù)id查詢頁面信CmsPageone=this.getById(id);if(one!=null){//更新模板//////更 路////CmsPagesave=cmsPageRepository.save(one);if(save!=null){//CmsPageResultcmsPageResult=newCmsPageResult(CommonCode.SUCCESS,save);returncmsPageResult;}}//returnnew} publicCmsPagefindById(@PathVariable("id")String{return}2、保存頁面信 ("/edit/{id}")//這里使用put方法 方法中put表示更publicCmsPageResultedit(@PathVariable("id")Stringid,@RequestBodyCmsPage{return}頁面處理流頁面的處理流程如下修改頁編寫page_edit頁下邊編寫頁面內(nèi)1、編寫頁面布局同添加頁面，略進入修改頁面?zhèn)魅雐mportimportpage_editfrom{path:'/cms/page/edit/:pageId',name:'修改頁面',component:<el‐table‐column<el‐table‐columnlabel="操作"<template@click="edit(page.row.pageId)">編編寫edit////edit:function(pageId){this.$router.push({path:'/cms/page/edit/'+pageId,query:{page:this.params.page,siteId:this.params.siteId}})}/*/*頁面查詢exportconstpage_get=id=>return}2、定義數(shù)據(jù)對return}}3、在created鉤子方法中查詢頁面created:created:function()cmsApi.page_get(this.pageId).then((res{console.log(res);this.pageForm=}}7、預覽頁面回顯效Api調(diào)/*/*頁面修改，采用put方法exportconstpage_edit=(id,params)=>return}2、提交按鈕方添加提交按鈕事<el‐button<el‐buttontype="primary"@click="editSubmit提交this.$refs.pageForm.validate((valid)=>{if(valid)this.$confirm('確認提交嗎？','提示',{}).then(()=>{cmsApi.page_edit(this.pageId,this.pageForm).then((res{console.log(res);if(res.success){message修改成功',type:'success'//this.$message.error('修改失敗}}}修改頁面信息，點擊提交刪除頁用戶操作流程@ApiOperation("@ApiOperation("通過ID刪除頁面publicResponseResultdelete(String使用SpringData提供的deleteById方法完成刪除操作。////刪除頁publicResponseResultdelete(Stringid){CmsPageone=this.getById(id);if(one!=null){returnnew}returnnew} ("/del/{id}")//使用http的delete方法完成崗位操作publicResponseResultdelete(@PathVariable("id")Stringid){return}Api方/*/*頁面刪除exportconstpage_del=id=>return}編寫頁<el‐table‐column<el‐table‐columnlabel="操作"<template@click="edit(page.row.pageId)">////del:function(pageId)this.$confirm('確認刪除此頁面嗎?','提示',{}).then((){cmsApi.page_del(pageId).then((res)=>{if(res.success){thtype:'success',message:'刪除成功//this.$message({type:'error',message刪除失敗}}異常處////添加頁publicCmsPageResultadd(CmsPage//校驗頁面是否存在，根據(jù)頁面名稱、站點Id、頁面 th查CmsPagecmsPage1 cmsPage.getSiteId(),cmsPage.getPageW cmsPage.setPageId(null);//添加頁面主鍵由springdata//CmsPageResultcmsPageResult=newCmsPageResult(CommonCode.SUCCESS,cmsPage);returncmsPageResult;}returnnew}問題、上邊的代碼只要操作不成功僅向用戶返回“錯誤代碼：，失敗信息：操作失敗，無法區(qū)別具體的錯誤信息。解決方案、在evi方法中的編碼順序是先校驗判斷，有問題則拋出具體的異常信息，最后執(zhí)行具體的業(yè)務操作，返回成功信息。、在統(tǒng)一異常處理類中去捕獲異常，無需ontl捕獲異常，向用戶返回統(tǒng)一規(guī)范的響應信息。代碼模板如下：////添加頁publicCmsPageResultadd(CmsPageif(cmsPagenull){//拋出異常 請}CmsPagecmsPage1= cmsPage.getSiteId(),cmsPage.getPageW //校驗頁面是否存在，已if(cmsPage1//拋出異常，已存在相同}cmsPage.setPageId(null);//添加頁面主鍵由springdata自動CmsPagesave=//返回結(jié)CmsPageResultcmsPageResult=newCmsPageResult(CommonCode.SUCCESS,save);returncmsPageResult;}1、自定義異常類型2、自定義錯誤代碼及錯誤信息齊全，程序員在拋出時會指定錯誤代碼及錯誤信息，獲取異常信息也比較方便。RuntimeException類型（運行時異常）、可預知的異常及不可預知的運行時異常最終會采用統(tǒng)一的信息格式（錯誤代碼+錯誤信息）來表示，最終也會隨請求響應給客戶端。異常拋出及處理流程、捕獲到非自定義異常類型首先從Ma中找該異常類型是否對應具體的錯誤代碼，如果有則取出錯誤代碼和錯誤信息并響應給用戶，如果從Ma中找不到異常類型所對應的錯誤代碼則統(tǒng)一為9錯誤代碼并響應給用戶。自定義異常packagepackageimportcom.xuecheng.framework.model.response.ResultCode;publicclassCustomExceptionextendsRuntimeException{privateResultCodepublicCustomException(ResultCoderesultCode)//異常信息為錯誤代碼+異常this.resultCode=resultCode;}publicResultCodegetResultCode(){return}}異常拋出packagepackageimportcom.xuecheng.framework.model.response.ResultCode;publicclassExceptionCast{//使用此靜態(tài)方法拋出自publicstaticvoidcast(ResultCoderesultCode){thrownew}異常捕獲使用@ControllerAdvice和@ExceptionHandler注解來捕packagepackageimportcom.xuecheng.framework.model.response.ResponseResult;importcom.xuecheng.framework.model.response.ResultCode;importorg.slf4j.Logger;importimportorg.springframework.web.bind.annotation.ControllerAdvice;importorg.springframework.web.bind.annotation.ExceptionHandler;importorg.springframework.web.bind.annotation.ResponseBody;publicclassExceptionCatchprivatestaticfinalLoggerLOGGER=//捕獲CustomException異常publicResponseResultcustomException(CustomException{LOGGER.error("catchexception:{}\r\nexception:e);ResultCoderesultCode=ResponseResultresponseResult=newreturn}}異常處理測每個業(yè)務操作的異常使用異packagepackageimportimportpublicenumCmsCodeimplements{CMS_ADDPAGE_EXISTS(false,24001,"頁面已存在//操作結(jié)booleanbooleanintStringmessage;privateCmsCode(booleansuccess,intcode,Stringmessage){this.success=success;this.code=code;this.message=message;}publicboolean{return}publicint{return}publicString{return}}在controller、service、dao中都可以拋出異常。 CmsPagecmsPage1= cmsPage.getSiteId(),cmsPage.getPageW if(cmsPage1//校驗頁面是否存在，已存在則拋出異}在springBoot@ComponentScan(basePackages="com.xuecheng.framework")@ComponentScan(basePackages="com.xuecheng.framework")掃 mon工程下的服務端響應信息頁面提取異常處this.$refs.pageForm.validate((valid)=>{if(valid)this.$confirm('確認提交嗎？','提示',{}).then(()=>{cmsApi.page_add(this.pageForm).then((res)=>{console.log(res);if(res.success){message提交成功',type:'success'if(res.message){this.$message.error(res.mesthis.$message.error('提交失敗}}定義異常捕獲方此異常是springMVC在進行參數(shù)轉(zhuǎn) 的錯誤具體的響應的信息為{{"timestamp":"status":"error":"Bad"exception":"org.springframework.http.converter.HttpMessageNotReadableException","message":"Requiredrequestbodyismissing:public "path":}publicResponseResultexception(Exception//記錄日LOGGER.error("catchreturn}針對上邊的問題其解決方案1、我們在map中配置HttpMessageNotReadableException、在異常捕獲類中對Excepion異常進行捕獲，并從map中獲取異常類型對應的錯誤代碼，如果存在錯誤代碼則返回此錯誤，否則統(tǒng)一返回錯誤。具體的開發(fā)實現(xiàn)如下 2、在異常捕獲類中配置HttpMessageNotReadableException為參數(shù)異常。packagepackageimportcom.xuecheng.framework. importcom.x