}

传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

4.1 页面预览开发
4.1.1 需求分析
页面在发布前增加页面预览的步骤,方便用户检查页面内容是否正确。页面预览的流程如下:
1547005261(1).jpg
1、用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接。
2、cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型。
3、cms根据页面id查询页面模板内容
4、cms执行页面静态化。

5、cms将静态化内容响应给浏览器。
6、在浏览器展示页面内容,实现页面预览的功能。
  4.1.2 搭建环境
在cms服务需要集成freemarker:
1、在CMS服务中加入freemarker的依赖

[AppleScript] 纯文本查看 复制代码
<dependency> 
    <groupId>org.springframework.boot</groupId>   
  <artifactId>spring‐boot‐starter‐freemarker</artifactId> 
</dependency>

2、在application.yml配置freemarker

[AppleScript] 纯文本查看 复制代码
spring: 
  freemarker:   
  cache: false  
#关闭模板缓存,
方便测试  
   settings:    
   template_update_delay: 0

4.1.3 Service
静态化方法在静态化测试章节已经实现。
  4.1.4 Controller
调用service的静态化方法,将静态化内容通过response输出到浏览器显示 创建CmsPagePreviewController类,用于页面预览: 请求页面id,查询得到页面的模板信息、数据模型url,根据模板和数据生成静态化内容,并输出到浏览器。

[AppleScript] 纯文本查看 复制代码
@Controller public class CmsPagePreviewController extends BaseController {   
  @Autowired    
 PageService pageService;     
  //接收到页面id   
  @RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)

[AppleScript] 纯文本查看 复制代码
public void preview(@PathVariable("pageId")String pageId){      
   String pageHtml = pageService.getPageHtml(pageId);    
     if(StringUtils.isNotEmpty(pageHtml)){    
         try {    
             ServletOutputStream outputStream = response.getOutputStream();    
             outputStream.write(pageHtml.getBytes("utf‐8"));      
       } catch (IOException e) {        
         e.printStackTrace();      
       }       
    }  
   }
 }   

4.2 页面预览测试
4.2.1 配置Nginx代理
为了通过nginx请求静态资源(css、图片等),通过nginx代理进行页面预览。 在www.xuecheng.com虚拟主机配置:

[AppleScript] 纯文本查看 复制代码
#页面预览
 location /cms/preview/ { 
  proxy_pass http://cms_server_pool/cms/preview/;    
  }

配置cms_server_pool将请求转发到cms:

[AppleScript] 纯文本查看 复制代码
#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

1547005470(1).jpg
4.2.2 添加“页面预览”链接
在页面列表添加“页面预览”链接,修改page_list.vue:

[AppleScript] 纯文本查看 复制代码
<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) },
效果:

1547005574(1).jpg
点击轮播图页面的“页面预览”,预览页面效果。

1547005605(1).jpg



分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条