前后端整合的EPG系统
一、摘要
随着web技术的发展，根据使用技术以及出现的时间的不同，前后端整合的方式可以从早期到现在依次分为前后端混合、前后端分离-CSR（客户端渲染）、前后端分离-SSR（服务器渲染）三种。由于IPTV的业务特点，在EPG系统开发设计上，目前主要处于SSR。但是基于CSR主要的问题在于首页载入较慢，页面内容需要主动上报，影片推荐呈现速度受机顶盒硬件影响等问题。为了解决这些问题，我们基于SSR方法，提出一种前后端整合的EPG系统。
关键词：EPG、服务器渲染、前后端整合、IPTV
二、背景
目前EPG系统主要以单页面为主，页面彼此独立，这种系统设计方便了故障定位，但是也不利于系统工程维护以及代码优化升级。近年来由于React[1]、VueJs等组件化的前端框架的出现，发展出CSR技术。以河北EPG系统为例，开发上也进行了技术迭代，对原有EPG进行了组件化升级，提高了新页面的开发效率和质量。机顶盒访问EPG[2]的流程如图1所示：1、Req
uest：机顶盒通过内置浏览器发出页面请求。2、服务器通过对应的Controller处理用户请求。3、将机顶盒所需要的HTML和JS返回机顶盒。4、浏览器通过Ajax对Server发出数据请求，获取影片详情、观看记录等数据。5、同步骤2。6、Controller向Model查询用户所需要的数据。7、回传数据。
图1机顶盒访问EPG流程图
由于前端框架必须等待所需要的资源都加载完后才能够开始进行页面初始化渲染、页面中的主要内容皆是通过代码动态产生，导致如果EPG内容过多就会造成加载缓慢的情况。
后面发展出的SSR技术，让客户端在载入网页时，一开始就能够直接取得整张渲染好的页面。
电影网页设计代码加载流程如图所示。虽然该开发方式能够降低接口请求、首页载入速度慢的问题，但在IPTV业务领域，可行性以及采用了SSR模式带来的其他问题，主要在现网服务器架构上改动过大，增加了系统运维复杂度。
图2 SSR技术流程图
为了解决SSR开发方式衍生出的问题，本文提出一个基于网页模板的前后端整合框架，将EPG的前端网页模板自动转换成后端的网页模板，并产生说明文件。只需要根据说明文件编写后端数据业务逻辑，录入对应数据即可完成原页面的封装升级。发挥了SSR的优势的同时，在不改动服务器原有系统架构的前提下降低EPG系统开发与维护的复杂度。
三、系统架构
本文设计一个前后端整合的EPG系统，系统架构图如图3所示，将前端开发人员使用React[3]、Vue等开发的前端代码通过前端框架适配器与前后端整合框架衔接，根据语法配置和注入配置，以及API文档生成器分析出的API说明文件，后端工程师依据说明文件完成注入配置后，文件合成器合成出正确的前后端混合的EPG网页。
图3 前后端整合架构示意图
本系统最核心的部分就是前后端整合框架，主要完成了：
1、制定前端框架适配器标准，让几个主流前端框架的网页模板转换为可用于网页模板生成
和API文档生成的资料结构。
2、根据前端适配器得到的资料转换成后端网页模板，达成自动将前端框架内的网页模板转为后端网页模板的功能。
3、指定后端语法模板标准，只要通过配置文件，就能转换出不同的后端页面模板。
4、使用API Doc的格式标准，自动提取前端框架内符合API Doc格式的内容，并通过API Doc软件，生成后端网页模板的API文件。
3.1 抽象语法生成器
在本研究中，抽象语法生成器作为前端框架模板转换成后端网页模板的中介标准，将前端框架内的网页模板转换为抽象语法树后，再通过网页模板生成器使用抽象语法树产生后端网页模板。针对EPG页面，我们设计了三种抽象语法树的节点。1、元素节点（Element Node）：用于记录HTML或者XML的标签名称、属性、网页模板的相关逻辑判断式，以及父子节点。2、表达式节点（Expression Node）：用于记录HTML、XML标签的起始标签与结束标签中，包含程序表达式的字串。3、文字节点（Text Node）：用于记录HTML、XML的
起始标签与结束标签中的纯文字。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。