文章目錄

• 一.需求分析
• 二. 搭建環境
• • 1.在cms服務中集成freemarker：
  • 2.在application.yml配置freemarker
• 三.Service
• 四.Controller
• 五.頁面預覽測試-- 配置Nginx代理
• 六.頁面預覽測試-- 添加“頁面預覽”鏈接

一.需求分析

頁面在發布前增加頁面預覽的步驟，方便用戶檢查頁面內容是否正確。頁面預覽的流程如下：

1）用戶進入cms前端，點擊“頁面預覽”，讓瀏覽器請求cms頁面預覽鏈接。
2）cms根據頁面id查詢DataUrl并遠程請求DataUrl獲取數據模型。
3）cms根據頁面id查詢頁面模板內容
4）cms執行頁面靜態化。
5）cms將靜態化內容響應給瀏覽器。
6）在瀏覽器展示頁面內容，實現頁面預覽的功能。

二. 搭建環境

1.在cms服務中集成freemarker：

在CMS服務中加入freemarker的依賴
文件位置：xcEduService01\xc-service-manage-cms\pom.xml

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency>

2.在application.yml配置freemarker

spring: freemarker: cache: false #關閉模板緩存，方便測試 settings: template_update_delay: 0

三.Service

靜態化方法在靜態化測試章節已經實現。

四.Controller

創建CmsPagePreviewController類，用于頁面預覽：

調用service的靜態化方法，查詢得到頁面的模板信息、數據模型url，根據模板和數據生成靜態化內容，將靜態化內容通過response輸出到瀏覽器顯示

package com.xuecheng.manage_cms.controller;import com.xuecheng.framework.web.BaseController; import com.xuecheng.manage_cms.service.PageService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod;import javax.servlet.ServletOutputStream; import java.io.IOException;@Controller public class CmsPagePreviewController extends BaseController {@AutowiredPageService pageService;//頁面預覽@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();outputStream.write(pageHtml.getBytes("utf-8"));} }

五.頁面預覽測試-- 配置Nginx代理

通過nginx請求靜態資源（css、圖片等），通過nginx代理進行頁面預覽。
在www.xuecheng.com虛擬主機配置：

#頁面預覽 location /cms/preview/ { proxy_pass http://cms_server_pool/cms/preview/; }

配置cms_server_pool將請求轉發到cms：

#cms頁面預覽 upstream cms_server_pool{ server 127.0.0.1:31001 weight=10; }

重新加載nginx 配置文件。
從cms_page找一個頁面進行測試。注意：頁面配置一定要正確，需設置正確的模板id和dataUrl。
在瀏覽器打開：http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a56
（其中5a795ac7dd573c04508f3a56為輪播圖頁面的id）

六.頁面預覽測試-- 添加“頁面預覽”鏈接

在頁面列表添加“頁面預覽”鏈接，修改page_list.vue:

文件位置：xc-ui-pc-sysmanage\src\module\cms\page\page_list.vue

<template slot‐scope="page"> <el‐button @click="edit(page.row.pageId)" type="text" size="small">修改</el‐button> <el‐button @click="del(page.row.pageId)" type="text" size="small">刪除</el‐button> <el‐button @click="preview(page.row.pageId)" type="text" size="small">頁面預覽</el‐button> ...

添加preview方法：

//頁面預覽 preview(pageId){ window.open("http://www.xuecheng.com/cms/preview/"+pageId) },

效果：
點擊輪播圖頁面的“頁面預覽”，預覽頁面效果。

總結

以上是生活随笔為你收集整理的学成在线--10.页面预览的全部內容，希望文章能夠幫你解決所遇到的問題。

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