CMS網站頁面管理系統開發匯總

• • 流程
  • 功能
  • 技術
  • 工程結構
  • • 基礎結構
    • api工程
    • 業務工程目錄基本結構
  • 業務模型
  • • 頁面信息
    • 站點信息
    • 模板信息
  • 功能實現
  • 頁面發布
  • • 流程
    • 步驟
  • 頁面預覽

CMS （Content Management System）即內容管理系統，不同的項目對CMS的定位不同。
每個公司對每個項目的CMS定位不同，CMS基本上分為：針對后臺數據內容的管理、針對前端頁面的管理、針對樣式風格的管理等 。
比如：一個給企業做網站的公司，其CMS系統主要是網站頁面管理及樣式風格的管理。

流程

（1）創建站點
一個網站有很多子站點，比如：學成在線有主門戶、學習中心、問答系統等子站點。具體的哪個頁面是歸屬于具體的站點，所以要管理頁面，先要管理頁面所屬的站點。
（2）創建模板
如電商網站的商品詳情頁面，每個頁面的內容布局、板式是相同的，不同的只是內容，這個頁面的布局、板式就是頁面模板，模板+數據就組成一個完整的頁面，最終要創建一個頁面文件需要先定義此頁面的模板，最終拿到頁面的數據再結合模板就拼裝成一個完整的頁面。
（3）創建頁面
指填寫頁面的基本信息，如：頁面的名稱、頁面的url地址等。
（4）頁面預覽
頁面發布前的一項工作，頁面預覽使用靜態化技術根據頁面模板和數據生成頁面內容，并通過瀏覽器預覽頁面。頁面發布前進行頁面預覽的目是為了保證頁面發布后的正確性。
（5）頁面發布
將頁面發送到頁面所在站點的服務器，頁面發布成功就可以通過瀏覽器來訪問了。

功能

1）頁面管理
管理員在后臺添加、修改、刪除頁面信息
2）頁面預覽
管理員通過頁面預覽功能預覽頁面發布后的效果。
3）頁面發布
管理員通過頁面發布功能將頁面發布到遠程門戶服務器。
頁面發布成功，用戶即可在瀏覽器瀏覽到最新發布的頁面，整個頁面添加、發布的過程由于軟件自動執行，無需人工登錄服務器操作。

技術

數據庫：網站管理對事物要求不是很嚴格，故使用nosql數據庫mongodb，提升操作效率。
消息隊列：RabbitMQ
框架：SpringBoot

工程結構

基礎結構

parent工程：父工程，提供依賴管理，如下所有工程必須依賴該工程
model工程：模型工程，提供統一的模型類管理
utils工程：工具類工程，提供本項目所使用的工具類
api工程：接口工程，統一管理本項目的服務接口swagger，依賴model
face工程：服務接口工程，統一管理本項目的服務接口(可選，拓展dubbo技術)，依賴model
common工程：通用工程，提供各層封裝，依賴utils
cms工程：業務功能工程，提供網站、頁面和模板crud功能實現，依賴api、common
cms_client工程：業務功能工程，提供物理服務器頁面文件更新功能，依賴api、common

api工程

swagger2接口編寫示例，該接口需要被對應業務工程controller實現

@Api(value="cms頁面管理接口",description = "cms頁面管理接口，提供頁面的增、刪、改、查") public interface CmsPageControllerApi {//頁面查詢@ApiOperation("分頁查詢頁面列表")@ApiImplicitParams({@ApiImplicitParam(name="page",value = "頁碼",required=true,paramType="path",dataType="int"),@ApiImplicitParam(name="size",value = "每頁記錄數",required=true,paramType="path",dataType="int")})public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);//新增頁面@ApiOperation("新增頁面")public CmsPageResult add(CmsPage cmsPage);//根據頁面id查詢頁面信息@ApiOperation("根據頁面id查詢頁面信息")public CmsPage findById(String id);//修改頁面@ApiOperation("修改頁面")public CmsPageResult edit(String id,CmsPage cmsPage);//刪除頁面@ApiOperation("刪除頁面")public ResponseResult delete(String id);//頁面發布@ApiOperation("頁面發布")public ResponseResult post(String pageId);@ApiOperation("保存頁面")public CmsPageResult save(CmsPage cmsPage);@ApiOperation("一鍵發布頁面")public CmsPostPageResult postPageQuick(CmsPage cmsPage);}

業務工程目錄基本結構

一、代碼文件
（1）controller
（2）service
（3）dao
（4）config
二、配置文件
（1）application.yml
（2）logback-spring.xml
示例：

<?xml version="1.0" encoding="UTF-8"?> <configuration><property resource="application.properties" /><!--定義日志文件的存儲地址,使用絕對路徑--><property name="LOG_HOME" value="${log.logDirectory}"/><!-- Console 輸出設置 --><appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender"><encoder><!--格式化輸出：%d表示日期，%thread表示線程名，%-5level：級別從左顯示5個字符寬度%msg：日志消息，%n是換行符--><pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern><charset>utf8</charset></encoder></appender><!-- 按照每天生成日志文件 --><appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"><rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"><!--日志文件輸出的文件名--><fileNamePattern>${LOG_HOME}/vander.%d{yyyy-MM-dd}.log</fileNamePattern></rollingPolicy><encoder><pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern></encoder></appender><!-- 異步輸出 --><appender name="ASYNC" class="ch.qos.logback.classic.AsyncAppender"><!-- 不丟失日志.默認的,如果隊列的80%已滿,則會丟棄TRACT、DEBUG、INFO級別的日志 --><discardingThreshold>0</discardingThreshold><!-- 更改默認的隊列的深度,該值會影響性能.默認值為256 --><queueSize>512</queueSize><!-- 添加附加的appender,最多只能添加一個 --><appender-ref ref="FILE"/></appender><logger name="org.apache.ibatis.cache.decorators.LoggingCache" level="DEBUG" additivity="false"><appender-ref ref="CONSOLE"/></logger><logger name="org.springframework.boot" level="DEBUG"/><root level="info"><!--<appender-ref ref="ASYNC"/>--><appender-ref ref="FILE"/><appender-ref ref="CONSOLE"/></root> </configuration>

業務模型

頁面信息

1、定義一個頁面需要指定頁面所屬站點
一個站點包括多個頁面，比如：學成在線的門戶站點（網站）包括了多個頁面。
2、定義一個頁面需要指定頁面使用的模板
多個頁面可以使用相同的模板，比如：商品信息模板，每個商品就是一個頁面，所有商品使用同一個商品信息模板

唯一索引：頁面名稱pageName、站點siteId、頁面pageWebPath

拼接頁面Url：cmsSite.siteDomain+cmsSite.siteWebPath+ cmsPage.pageWebPath + cmsPage.pageName

@Data @ToString @Document(collection = "cms_page") public class CmsPage {//站點IDprivate String siteId;//頁面ID@Idprivate String pageId;//頁面名稱，preview_4028e58161bd3b380161bd3bcd2f0000.htmlprivate String pageName;//別名，課程預覽頁面private String pageAliase;//訪問地址，/coursepre/private String pageWebPath;//參數private String pageParameter;//物理路徑，F:\\\\develop\\\\xc_portal_static\\\\course\\\\preview\\\\private String pagePhysicalPath;//類型（靜態/動態），1private String pageType;//頁面模版private String pageTemplate;//頁面靜態化內容private String pageHtml;//狀態private String pageStatus;//創建時間private Date pageCreateTime;//模版idprivate String templateId;//參數列表private List<CmsPageParam> pageParams;//模版文件Id // private String templateFileId;//靜態文件Idprivate String htmlFileId;//數據Url，http://localhost:40200/portalview/course/getpre/4028e58161bd3b380161bd3bcd2f0000private String dataUrl; }@Data @ToString public class CmsPageParam {//參數名稱private String pageParamName;//參數值private String pageParamValue; }

站點信息

@Data @ToString @Document(collection = "cms_site") public class CmsSite { //站點ID@Idprivate String siteId;//站點名稱，門戶主站private String siteName;//站點域名，http://localhostprivate String siteDomain;//站點端口，80private String sitePort;//站點訪問地址，/private String siteWebPath;//創建時間private Date siteCreateTime;//站點物理路徑private String sitePhysicalPath;} @Data @ToString @Document(collection = "cms_site_server") public class CmsSiteServer {//站點idprivate String siteId;//服務器ID@Idprivate String serverId;//服務器IP，127.0.0.1private String ip;//端口，80private String port;//訪問地址，/private String webPath;//服務器名稱（代理、靜態、動態、CDN），門戶服務器private String serverName;//資源發布地址（完整的HTTP接口），/uploadprivate String uploadPath;//使用類型（測試、生產）private String useType; }

模板信息

@Data @ToString @Document(collection = "cms_template") public class CmsTemplate {//站點IDprivate String siteId;//模版ID@Idprivate String templateId;//模版名稱，輪播圖private String templateName;//模版參數private String templateParameter;//模版文件Id，存在到GridFs唯一IDprivate String templateFileId; }

功能實現

需明確先后順序，如下：
（1）模板crud實現（上傳模板到GridFs獲取templateFileId）
（2）站點crud實現
（3）頁面crud實現

頁面發布

流程

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

步驟

（1）通過頁面pageId獲取：數據模型Map

//獲取數據模型 private Map getModelByPageId(String pageId){//取出頁面的信息CmsPage cmsPage = this.getById(pageId);if(cmsPage == null){//頁面不存在ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);}//取出頁面的dataUrlString dataUrl = cmsPage.getDataUrl();if(StringUtils.isEmpty(dataUrl)){//頁面dataUrl為空ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);}//通過restTemplate請求dataUrl獲取數據ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);Map body = forEntity.getBody();return body; }

（2）通過頁面pageId獲取：模板文件字符串

//獲取頁面的模板信息 private String getTemplateByPageId(String pageId){//取出頁面的信息CmsPage cmsPage = this.getById(pageId);if(cmsPage == null){//頁面不存在ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);}//獲取頁面的模板idString templateId = cmsPage.getTemplateId();if(StringUtils.isEmpty(templateId)){ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);}//查詢模板信息Optional<CmsTemplate> optional = cmsTemplateRepository.findById(templateId);if(optional.isPresent()){CmsTemplate cmsTemplate = optional.get();//獲取模板文件idString templateFileId = cmsTemplate.getTemplateFileId();//從GridFS中取模板文件內容//根據文件id查詢文件GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(templateFileId)));//打開一個下載流對象GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId());//創建GridFsResource對象，獲取流GridFsResource gridFsResource = new GridFsResource(gridFSFile,gridFSDownloadStream);//從流中取數據try {String content = IOUtils.toString(gridFsResource.getInputStream(), "utf-8");return content;} catch (IOException e) {e.printStackTrace();}}return null; }

（3）執行靜態化獲取：最終頁面文件字符串

//執行靜態化 private String generateHtml(String templateContent,Map model ){//創建配置對象Configuration configuration = new Configuration(Configuration.getVersion());//創建模板加載器StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();stringTemplateLoader.putTemplate("template",templateContent);//向configuration配置模板加載器configuration.setTemplateLoader(stringTemplateLoader);//獲取模板try {Template template = configuration.getTemplate("template");//調用api進行靜態化String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);return content;} catch (Exception e) {e.printStackTrace();}return null; }

（4）保存最終頁面文件到GridFs，并更新數據庫頁面信息

//保存html到GridFS private CmsPage saveHtml(String pageId,String htmlContent){//先得到頁面信息CmsPage cmsPage = this.getById(pageId);if(cmsPage == null){ExceptionCast.cast(CommonCode.INVALID_PARAM);}ObjectId objectId = null;try {//將htmlContent內容轉成輸入流InputStream inputStream = IOUtils.toInputStream(htmlContent, "utf-8");//將html文件內容保存到GridFSobjectId = gridFsTemplate.store(inputStream, cmsPage.getPageName());} catch (IOException e) {e.printStackTrace();}//將html文件id更新到cmsPage中cmsPage.setHtmlFileId(objectId.toHexString());cmsPageRepository.save(cmsPage);return cmsPage; }

（5）發送消息到客戶端

//向mq 發送消息 private void sendPostPage(String pageId){//得到頁面信息CmsPage cmsPage = this.getById(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);//發送給mq//站點idString siteId = cmsPage.getSiteId();rabbitTemplate.convertAndSend(RabbitmqConfig.EX_ROUTING_CMS_POSTPAGE,siteId,jsonString); }

（6）客戶端監聽到消息

@RabbitListener(queues = {"${xuecheng.mq.queue}"}) public void postPage(String msg){//解析消息Map map = JSON.parseObject(msg, Map.class);//得到消息中的頁面idString 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); }

（7）客戶端將最新頁面文件下載到物理服務器

//保存html頁面到服務器物理路徑 public void savePageToServerPath(String pageId){//根據pageId查詢cmsPageCmsPage cmsPage = this.findCmsPageById(pageId);//得到html的文件id，從cmsPage中獲取htmlFileId內容String htmlFileId = cmsPage.getHtmlFileId();//從gridFS中查詢html文件InputStream inputStream = this.getFileById(htmlFileId);if(inputStream == null){LOGGER.error("getFileById InputStream is null ,htmlFileId:{}",htmlFileId);return ;}//得到站點idString siteId = cmsPage.getSiteId();//得到站點的信息CmsSite cmsSite = this.findCmsSiteById(siteId);//得到站點的物理路徑String sitePhysicalPath = cmsSite.getSitePhysicalPath();//得到頁面的物理路徑String pagePath = sitePhysicalPath + cmsPage.getPagePhysicalPath() + cmsPage.getPageName();//將html文件保存到服務器物理路徑上FileOutputStream fileOutputStream = null;try {fileOutputStream = new FileOutputStream(new File(pagePath));IOUtils.copy(inputStream,fileOutputStream);} catch (Exception e) {e.printStackTrace();}finally {try {inputStream.close();} catch (IOException e) {e.printStackTrace();}try {fileOutputStream.close();} catch (IOException e) {e.printStackTrace();}} }

頁面預覽

通過頁面發布（1）（2）（3）步驟可以獲取到最終頁面文本

//頁面預覽 @RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET) public void preview(@PathVariable("pageId") String pageId) throws IOException {//執行靜態化String pageHtml = pageService.getPageHtml(pageId);//通過response對象將內容輸出ServletOutputStream outputStream = response.getOutputStream();response.setHeader("Content-type","text/html;charset=utf-8");outputStream.write(pageHtml.getBytes("utf-8")); }

總結

以上是生活随笔為你收集整理的CMS网站页面管理开发汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。