一.需求分析

页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：

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.页面预览相关推荐

学成在线课程页面
学成在线课程页面先把剩下两个页面中比较复杂的,也许要超链接的页面做掉了. 大部分布局上的功能都实现了,就剩下一些细节上的:例如说没有补上的注释,以及字体大小颜色上的细节方面.div都分了,cla ...
CSS+HTML实现学成在线静态页面
CSS3+HTML实现学成在线静态页面 1.使用工具 1.VScode 2.Chome浏览器 3.Adobe Photoshop CC 2019 2.CSS书写顺序 1.布局定位属性 display ...
学成在线--day04 页面静态化
学成在线第4天讲义-页面静态化页面预 1 页面静态化需求 1.为什么要进行页面管理? 本项目cms系统的功能就是根据运营需要,对门户等子系统的部分页面进行管理,从而实现快速根据用户需求修改 ...
学成在线--9.页面静态化
文章目录一.页面静态化流程二.数据模型 1.轮播图DataUrl接口 1)需求分析 2)接口定义 3)Dao 4)Service 5)Controller 6)测试 2.远程请求接口 1)添加依赖 ...
学成在线课程列表页面
学成在线课程列表页面在美好的礼拜天,正好我们不调休,把最后一个页面给完成了. 和其他用浮动座位布局方式比起来,课程类表页面最终还是使用了flexbox去布局,一来主要内容最下面的分页部分用浮 ...
学成在线第4天讲义-页面静态化页面预览
1页面静态化需求 1.为什么要进行页面管理? 本项目cms系统的功能就是根据运营需要,对门户等子系统的部分页面进行管理,从而实现快速根据用户需求修改页面内容并上线的需求. 2.如何修改页面的内容? ...
学成在线第9天讲义-课程预览 Eureka Feign Ribbon
1Eureka注册中心 1.1需求分析在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中心来管理微服务信息. 为什么要用注册中心? 1 ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
前端页面预览word_前端实现在线预览文档
前端实现在线预览文档发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...

学成在线--10.页面预览

文章目录