CN107273528A - 一种前后端分离方法、移动终端以及计算机可读存储介质 - Google Patents

Abstract

本发明公开了一种前后端分离方法，在所述前端独立开发页面模板将前端和后端进行页面分离；将所述前端和所述后端的数据接口进行分离；在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。本发明还公开了一种移动终端和计算机可读存储介质，解决了相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题，实现了前端和后端完全分离，除去前端对后端依赖，前后端工作同步进行，提高工作效率，同时降低维护成本提高了用户体验。

Description

一种前后端分离方法、移动终端以及计算机可读存储介质

技术领域

本发明涉及移动通信技术领域，尤其涉及一种前后端分离方法、移动终端以及计算机可读存储介质。

背景技术

随着互联网的发展和终端的普及，终端的用户群越来越大，同时也对软件提出了更多智能，人性化的需求。

在现有的技术中，其实终端，虽然被用户作为一个游戏机或电视机，还可能是一个学习机，还可能成为小宝宝的乐园等等，给我们的生活带来更多的乐趣。随着通讯产品的更新换代，移动终端(例如手机、个人数字化助理PDA等)已成为人们必备的通讯工具。各种方便人们生活的功能都能在移动终端上实现，例如手机电视、GPS、移动支付等等，都需要移动终端接入到互联网才能实现。

随着电子产业的快速发展，移动终端智能化程度越来越高。移动终端研发公司也越来越注重智能化，人性化设计。在此移动终端快速发展的背景下，终端的便捷操作和人性化设计成为移动终端不可忽视的一部分。随着近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代迥异。传统开发模式中往往是单独页面独立管理页面所需的所有文件，存在页面结构混乱、资源重复加载、路径变化繁琐等诸多隐患。

在传统网站的前端实现中，往往存在大量的数据获取与非语义化标签代码掺杂的现象，导致页面的数据更新、维护以及改版过程繁琐，大量静态资源的重复请求致使页面的加载响应速度变慢，用户体验不尽人意。

在Web管理系统中，浏览器端和服务器端由不同的团队负责，但是页面模板处在两者的中间地带。传统的IT项目采用后端模板技术(如JSP、Freemarker等等)，前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离。后端工程师需要携带部分数据初始化模板，经常插入java代码片段，前端工程师基于模板实现用户交互以及浏览器渲染。需求变动，前后端工程师基于模板交替开发，不可避免的带来越来越复杂的业务逻辑，最终难以维护。另外，模板这块也是最容易让前端与后端纠结不清的地方。另一方面，Web管理系统有一个特点，即90％以上的页面构造都是由CRUD(即Create：新增，Retrieve：查询，Update：更新，Delete：删除)组成。页面构造类似，传统的页面架构各自为政，重复造轮子严重，同样或类似的代码来回拷贝，以传统IT项目的独立页面为例，每个页面都有头部、尾部，这些都是相同的，每个页面都要有，没开发一个页面都要拷贝一遍同样的工作重复进行，开发效率低下。传统的开发方式，前后端没有真正分离，关键在于模板技术的解析位置在服务器端。

针对相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题，目前尚未提出解决方案。

发明内容

本发明的主要目的在于提出一种前后端分离方法、移动终端以及计算机可读存储介质，旨在解决相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题。

为实现上述目的，本发明实施例提出一种前后端分离方法，包括：

在所述前端独立开发页面模板将前端和后端进行页面分离；

将所述前端和所述后端的数据接口进行分离；

在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

优选地，在所述前端独立开发页面模板将前端和后端进行页面分离包括：

通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。

优选地，将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

优选地，在将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

采用令牌对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌，并将所述令牌发送给所述前端，前端存储接收到的所述令牌。

优选地，所述令牌携带在所述前端向所述后端发送的资源请求中，用于所述后端接收到所述资源请求后，验证成功后，向所述前端返回请求的资源。

根据本发明实施例的另一方面，还提供了一种移动终端，所述移动终端包括处理器、存储器及通信总线；

所述通信总线用于实现处理器和存储器之间的连接通信；

所述处理器用于执行存储器中存储的前后端分离程序，以实现以下步骤：

在所述前端独立开发页面模板将前端和后端进行页面分离；

将所述前端和所述后端的数据接口进行分离；

在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

将所述前端和所述后端的数据接口进行分离之后，在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

在将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

采用令牌对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌，并将所述令牌发送给所述前端，前端存储接收到的所述令牌。

优选地，所述令牌携带在所述前端向所述后端发送的资源请求中，用于所述后端接收到所述资源请求后，验证成功后，向所述前端返回请求的资源。

根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述前后端分离方法的步骤。

通过本发明，在所述前端独立开发页面模板将前端和后端进行页面分离；将所述前端和所述后端的数据接口进行分离；在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护，解决了相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题，实现了前端和后端完全分离，除去前端对后端依赖，前后端工作同步进行，提高工作效率，同时降低维护成本提高了用户体验。

附图说明

图1为实现本发明各个实施例一可选的移动终端的硬件结构示意图；

图2为如图1所示的移动终端的无线通信系统示意图；

图3是根据本发明实施例的前后端分离方法的流程图；

图4是根据相关技术中Web开发模式的架构图；

图5是根据本发明实施例的Web开发模式的架构图；

图6是根据本发明实施例的基于Node的前后端分离的示意图；

图7是根据本发明实施例的前后端分离的移动终端的框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特定的意义。因此，“模块”、“部件”或“单元”可以混合地使用。

终端可以以各种形式来实施。例如，本发明中描述的终端可以包括诸如手机、平板电脑、笔记本电脑、掌上电脑、个人数字助理(Personal Digital Assistant，PDA)、便捷式媒体播放器(Portable Media Player，PMP)、导航装置、可穿戴设备、智能手环、计步器等移动终端，以及诸如数字TV、台式计算机等固定终端。

后续描述中将以移动终端为例进行说明，本领域技术人员将理解的是，除了特别用于移动目的的元件之外，根据本发明的实施方式的构造也能够应用于固定类型的终端。

请参阅图1，其为实现本发明各个实施例的一种移动终端的硬件结构示意图，该移动终端100可以包括：RF(Radio Frequency，射频)单元101、WiFi模块102、音频输出单元103、A/V(音频/视频)输入单元104、传感器105、显示单元106、用户输入单元107、接口单元108、存储器109、处理器110、以及电源111等部件。本领域技术人员可以理解，图1中示出的移动终端结构并不构成对移动终端的限定，移动终端可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图1对移动终端的各个部件进行具体的介绍：

射频单元101可用于收发信息或通话过程中，信号的接收和发送，具体的，将基站的下行信息接收后，给处理器110处理；另外，将上行的数据发送给基站。通常，射频单元101包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元101还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA2000(CodeDivision Multiple Access 2000，码分多址2000)、WCDMA(Wideband Code DivisionMultiple Access,宽带码分多址)、TD-SCDMA(Time Division-Synchronous CodeDivision Multiple Access，时分同步码分多址)、FDD-LTE(Frequency DivisionDuplexing-Long Term Evolution，频分双工长期演进)和TDD-LTE(Time DivisionDuplexing-Long Term Evolution，分时双工长期演进)等。

WiFi属于短距离无线传输技术，移动终端通过WiFi模块102可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图1示出了WiFi模块102，但是可以理解的是，其并不属于移动终端的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

音频输出单元103可以在移动终端100处于呼叫信号接收模式、通话模式、记录模式、语音识别模式、广播接收模式等等模式下时，将射频单元101或WiFi模块102接收的或者在存储器109中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元103还可以提供与移动终端100执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元103可以包括扬声器、蜂鸣器等等。

A/V输入单元104用于接收音频或视频信号。A/V输入单元104可以包括图形处理器(Graphics Processing Unit，GPU)1041和麦克风1042，图形处理器1041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。处理后的图像帧可以显示在显示单元106上。经图形处理器1041处理后的图像帧可以存储在存储器109(或其它存储介质)中或者经由射频单元101或WiFi模块102进行发送。麦克风1042可以在电话通话模式、记录模式、语音识别模式等等运行模式中经由麦克风1042接收声音(音频数据)，并且能够将这样的声音处理为音频数据。处理后的音频(语音)数据可以在电话通话模式的情况下转换为可经由射频单元101发送到移动通信基站的格式输出。麦克风1042可以实施各种类型的噪声消除(或抑制)算法以消除(或抑制)在接收和发送音频信号的过程中产生的噪声或者干扰。

移动终端100还包括至少一种传感器105，比如光传感器、运动传感器以及其他传感器。具体地，光传感器包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板1061的亮度，接近传感器可在移动终端100移动到耳边时，关闭显示面板1061和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的指纹传感器、压力传感器、虹膜传感器、分子传感器、陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

显示单元106用于显示由用户输入的信息或提供给用户的信息。显示单元106可包括显示面板1061，可以采用液晶显示器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板1061。

用户输入单元107可用于接收输入的数字或字符信息，以及产生与移动终端的用户设置以及功能控制有关的键信号输入。具体地，用户输入单元107可包括触控面板1071以及其他输入设备1072。触控面板1071，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板1071上或在触控面板1071附近的操作)，并根据预先设定的程式驱动相应的连接装置。触控面板1071可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器110，并能接收处理器110发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板1071。除了触控面板1071，用户输入单元107还可以包括其他输入设备1072。具体地，其他输入设备1072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种，具体此处不做限定。

进一步的，触控面板1071可覆盖显示面板1061，当触控面板1071检测到在其上或附近的触摸操作后，传送给处理器110以确定触摸事件的类型，随后处理器110根据触摸事件的类型在显示面板1061上提供相应的视觉输出。虽然在图1中，触控面板1071与显示面板1061是作为两个独立的部件来实现移动终端的输入和输出功能，但是在某些实施例中，可以将触控面板1071与显示面板1061集成而实现移动终端的输入和输出功能，具体此处不做限定。

接口单元108用作至少一个外部装置与移动终端100连接可以通过的接口。例如，外部装置可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的装置的端口、音频输入/输出(I/O)端口、视频I/O端口、耳机端口等等。接口单元108可以用于接收来自外部装置的输入(例如，数据信息、电力等等)并且将接收到的输入传输到移动终端100内的一个或多个元件或者可以用于在移动终端100和外部装置之间传输数据。

存储器109可用于存储软件程序以及各种数据。存储器109可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器109可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器110是移动终端的控制中心，利用各种接口和线路连接整个移动终端的各个部分，通过运行或执行存储在存储器109内的软件程序和/或模块，以及调用存储在存储器109内的数据，执行移动终端的各种功能和处理数据，从而对移动终端进行整体监测。处理器110可包括一个或多个处理单元；优选的，处理器110可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器110中。

移动终端100还可以包括给各个部件供电的电源111(比如电池)，优选的，电源111可以通过电源管理系统与处理器110逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管图1未示出，移动终端100还可以包括蓝牙模块等，在此不再赘述。

为了便于理解本发明实施例，下面对本发明的移动终端所基于的通信网络系统进行描述。

请参阅图2，图2为本发明实施例提供的一种通信网络系统架构图，该通信网络系统为通用移动通信技术的LTE系统，该LTE系统包括依次通讯连接的UE(User Equipment，用户设备)201，E-UTRAN(Evolved UMTS Terrestrial Radio Access Network，演进式UMTS陆地无线接入网)202，EPC(Evolved Packet Core，演进式分组核心网)203和运营商的IP业务204。

具体地，UE201可以是上述终端100，此处不再赘述。

E-UTRAN202包括eNodeB2021和其它eNodeB2022等。其中，eNodeB2021可以通过回程(backhaul)(例如X2接口)与其它eNodeB2022连接，eNodeB2021连接到EPC203，eNodeB2021可以提供UE201到EPC203的接入。

EPC203可以包括MME(Mobility Management Entity，移动性管理实体)2031，HSS(Home Subscriber Server，归属用户服务器)2032，其它MME2033，SGW(Serving Gate Way，服务网关)2034，PGW(PDN Gate Way，分组数据网络网关)2035和PCRF(Policy andCharging Rules Function，政策和资费功能实体)2036等。其中，MME2031是处理UE201和EPC203之间信令的控制节点，提供承载和连接管理。HSS2032用于提供一些寄存器来管理诸如归属位置寄存器(图中未示)之类的功能，并且保存有一些有关服务特征、数据速率等用户专用的信息。所有用户数据都可以通过SGW2034进行发送，PGW2035可以提供UE 201的IP地址分配以及其它功能，PCRF2036是业务数据流和IP承载资源的策略与计费控制策略决策点，它为策略与计费执行功能单元(图中未示)选择及提供可用的策略和计费控制决策。

IP业务204可以包括因特网、内联网、IMS(IP Multimedia Subsystem，IP多媒体子系统)或其它IP业务等。

虽然上述以LTE系统为例进行了介绍，但本领域技术人员应当知晓，本发明不仅仅适用于LTE系统，也可以适用于其他无线通信系统，例如GSM、CDMA2000、WCDMA、TD-SCDMA以及未来新的网络系统等，此处不做限定。

基于上述移动终端硬件结构以及通信网络系统，提出本发明方法各个实施例。

实施例1

基于上述的移动终端，本发明实施例提供了一种前后端分离方法，图3是根据本发明实施例的前后端分离方法的流程图一，如图3所示，该方法包括以下步骤：

步骤S301，在所述前端独立开发页面模板将前端和后端进行页面分离；

步骤S302，将所述前端和所述后端的数据接口进行分离；

步骤S303，在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

通过上述步骤，在所述前端独立开发页面模板将前端和后端进行页面分离；将所述前端和所述后端的数据接口进行分离；在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护，解决了相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题，实现了前端和后端完全分离，除去前端对后端依赖，前后端工作同步进行，提高工作效率，同时降低维护成本提高了用户体验。

本发明实施例中，在所述前端独立开发页面模板将前端和后端进行页面分离可以包括：将视图模板解析设置在所述前端，把视图模板解析完全放在前端进行，后端只提供通用的Restful接口与前端交互，前端采用SPA架构，通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。简单的说，就是一张Web页面的应用，SPA天然具备模块化属性，优化网页结构，提高模块复用。前端可以不必安装后端开发环境，便可以独立开发页面模板、实现交互、自动化测试以及集成部署。将所述前端和所述后端的数据接口进行分离之后，在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

优选地，在将所述前端和所述后端的数据接口进行分离之后，采用令牌token对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌token，并将所述令牌token发送给所述前端，前端存储接收到的所述令牌token。即接口交互采用token校验，基于token的身份校验包括：前端使用用户名跟密码请求登录，后收到请求，去验证用户名与密码。验证成功后，后端签发一个Token，再把这个Token发送给前端；前端收到Token以后可以把它存储起来，比如放在Cookie里或者Local Storage里。

上述的令牌携带在所述前端向所述后端发送的资源请求中，用于所述后端接收到所述资源请求后，验证成功后，向所述前端返回请求的资源。

随着前端技术的发展，涌现了许多前端框架(如vuejs、angularjs、reactjs等等)，前后端都具备了自己的开发流程、构建工具、测试集合等等。前后端仅仅通过AJAX(即Asynchronous Java And Xml，异步JavaScript和Xml)接口来编程，即全部基于Json(一种轻量级的数据交换格式)格式的Restful(一种简约的软件构架风格)接口，重点在于后端只负责数据的提供和计算，完全不处理页面展现。前端则负责拿到数据，组织数据并渲染页面。这样结构清晰，关注点分离，前后端变得相对独立、松耦合。

针对Web管理系统的前后端分离：除去前端对后端依赖，前后端工作同步进行，提高工作效率，同时降低维护成本；前端能够独立开发、测试、部署，实现模块化开发，提高模块复用，避免低效率的重复造轮子；前后端松耦合，结构清晰，有利于项目迭代。

图4是根据相关技术中Web开发模式的架构图，如图4所示，前后端一定程度上相互依赖、紧耦合，整个开发过程中部分阶段处于串行状态。前后端分离的核心就是打破这种串行，使前后端能够并行开发。因此本方案的目的是把层级架构模型中的红色前端部分和蓝色后端部分以中间绿线隔离开来。

图5是根据本发明实施例的Web开发模式的架构图，如图5所示，前后端分离的模型，把视图模板解析完全放在前端进行，后端只提供通用的Restful接口与前端交互，前端采用SPA架构(Single Page Web Application)，简单的说，就是一张Web页面的应用。SPA天然具备模块化属性，优化网页结构，提高模块复用。

步骤一、页面分离，得益于Nodejs的成功，前端可以不必安装后端开发环境，便可以独立开发页面模板、实现交互、自动化测试以及集成部署。相当于前端项目具备了后端项目一样的开发流程。

Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。V8引擎执行Javascript的速度非常快，性能非常好。Node是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js是一个Javascript运行环境(runtime)。实际上它是对GoogleV8引擎(应用于Google Chrome浏览器)进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。例如，在服务器环境中，处理二进制数据通常是必不可少的，但Javascript对此支持不足，因此，V8.Node增加了Buffer类，方便并且高效地处理二进制数据。因此，Node不仅仅简单的使用了V8，还对其进行了优化，使其在各环境下更加给力。

图6是根据本发明实施例的基于Node的前后端分离的示意图，如图6所示，基于Node的前后端分离分层，以及Node的职责范围。最上端是服务端，就是常说的后端。后端就是一个接口的集合，服务端提供各种各样的接口供我们使用。因为有Node层，也不用局限是什么形式的服务。对于后端开发来说，他们只用关心业务代码的接口实现。服务端下面是Node应用。Node应用中有一层Model Proxy与服务端进行通讯。这一层主要目前是抹平我们对不同接口的调用方式，封装一些view层需要的Model。Node层还能轻松实现原来vmcommon,tms(引用淘宝内容管理系统)等需求。Node层要使用什么框架由开发者自己决定。不过推荐使用express+xTemplate的组合，xTemplate能做到前后端公用。怎么用Node大家自己决定，但是令人兴奋的是，我们终于可以使用Node轻松实现想要的输出方式:JSON/JSONP/RESTful/HTML/BigPipe/Comet/Socket/同步、异步。浏览器层在这个架构中没有变化，也不希望因为引入Node改变以前在浏览器中开发的认知。引入Node，只是把本该就前端控制的部分交由前端掌控。

步骤二、数据接口分离，开发之前，前后端约定好接口，并将接口注册在接口平台上，记录接口的管理平台，包含接口url、参数、校验token等，把接口文档用平台管理，这样有两个好处：第一、无需word文档传来传去；第二、用word文档可能造成版本混乱，接口很可能修改很多版，很多时候开发拿到的是老版接口，用接口平台每次登陆看到都是最新的，后端按照约定的接口返回数据，前端不必等后端接口开发完成，可以根据给定的接口格式进行mock测试(就是在实现以及测试过程中，对于不易构造或不易获取的对象，用一个虚拟的对象来创建以便测试的测试方法)实现UI开发。

步骤三、展现层分离，本发明实施例的终极目标就是剥离展现层，展现层指视图模板，这部分由HTML语言描述，把模板的生成、渲染交给浏览器端，展现层由前端团队维护，传统Web项目部署前后端统一部署在一个Web容器中，需求变更，涉及前端的升级也同样是后端同事来完成。

剥离展现层，包括：

1、基于Redis session，替换基于Web容器的session(会话控制，因为Web请求，即http请求是无状态的，因此Web容器需要记录用户的相关属性)。因为前后端是分开容器部署的，因此基于Web容器的session无法实现共享，易于Redis的session剥离容器，易于扩展，实现分布式部署。

redis是一个key-value存储系统，和Memcached类似，它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基础上，redis支持各种不同方式的排序。与memcached一样，为了保证效率，数据都是缓存在内存中。区别的是redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件，并且在此基础上实现了master-slave(主从)同步。

2、接口交互采用token(用户获取接口的令牌，用于校验接口安全权限)校验。基于token的身份校验流程大致如下：前端使用用户名跟密码请求登录；后收到请求，去验证用户名与密码；验证成功后，后端签发一个Token，再把这个Token发送给前端；前端收到Token以后可以把它存储起来，比如放在Cookie里或者Local Storage里；前端每次向后端请求资源的时候需要带着后端签发的Token；后端收到请求，然后去验证前端请求里面带着的Token，如果验证成功，就向前端返回请求的数据。

Web管理系统页面结构简单、相似。用循环的视角审视Web开发，框定一个一致的SPA图形用户界面和模型，剥离对后端依赖，前端着力用户交互，后端注重解接口性能，避免重复造轮子，提高模块复用和开发效率。

前端静态化，前端有且仅有静态内容，再明确些，只有HTML/CSS/JS，其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装，前端内容的运行环境和引擎完全基于浏览器本身。

后端数据化，后端可以用任何语言，技术和平台实现，但它们必须遵循一个原则：只提供数据，不提供任何和界面表现有关的内容。换言之，他们提供的数据可以用于任何其他客户端(如本地化程序、移动端程序)。

平台无关化，前端与平台无关，而后台连接部分的本质是实现合适的RESTful接口和交互Json数据，就这两者而言，任何技术和平台都可以实现。

构架分离化，前端架构完全基于HTML/CSS的发展和JS框架的演变，与耳熟能详的后台语言(如C#、Java、NodeJs等)完全无关，由于前台是纯静态内容，大型构架方面可以考虑向CDN方向发展。

后端构架几乎可以基于任何语言和平台的任何解决方案，大型构架方面，RESTfulApi可以考虑负载均衡；而数据，业务实现等可以考虑数据库优化和分布式，前后端的分离也实现了前后端构架的分离。

前后端分离后，前后端流量大幅减少，前后端流量的大头是HTML/JS/IMG资源，而数据仅仅是小头，资源占到100K以上的页面不算大，但数据充其量10K左右，比如一个1万条记录的数据经过压缩也仅仅在100K左右，而一个稍大的JS库或图片就不止这些。

流量的减少在于“前端静态化”这个规则，在第一次获取以后静态资源会被浏览器缓存，即使浏览器继续轮询，服务端也会返回一个非常小Not Modified响应，流量几乎可以忽略不计。举例说明，在一个页面为100K，数据为10K的页面中，100次请求的流量是100K+10X100＝1.1M，显而易见，其流量是大幅低于每次获取完整HTML的情况的。

为了解决日益复杂的web业务需求及体量，本发明实施例还提出了一种前端Web表现与数据分离以及页面快速响应的方式，该方式遵循AMD规范，引入模块加载工具和页面渲染引擎，将JS功能模块化、页面模板化，构造了一个良好的Web开发架构，以此将页面所需动态数据以及展现结构进行剥离；同时通过对页面请求URL HASH值的变化来实现不同页面的路由控制，项目目录结构更加清晰的同时也避免了静态资源的重复加载，解决了页面数据更新维护及加载速度等方面的诸多问题。

简单高效的前端Web表现与数据分离以及页面快速响应的方式，通过如下技术方案实现的：一种前端Web表现与数据分离以及页面快速响应的方式，其特征在于：将Web开发中前后端分离，引入JS模块加载器Require JS和模板渲染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离；通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。

所述JS模块加载器Require JS将各个单独页面功能按照AMD规范来定义为独立的模块，独立的模块负责数据获取以及对模板的渲染调用，进而实现了模块文件与模板文件的完全分离和项目的目录结构的组织；所述JS模块加载器Require JS使用程序调用的方式加载JS文件，对外暴露统一的功能加载入口init方法，由加载管理器统一调用。

hash的展现结构同项目的目录结构保持良好的对应，配合JS模块加载器RequireJS，每个hash对应着唯一的功能模块，且都暴露对外调用方法，方便统一管理，内容的改变不需要重新加载整个页面，使Web应用更具有响应性。

所述模板渲染引擎art Template采用预编译方式，将静态页面结构定义为模板，数据部分通过模板渲染引擎art Template提供的标签格式进行组织展现，模板调试器能够精确定位到引发渲染错误的模板语句，使模板在编写过程中可以调试。

该前端Web表现与数据分离以及页面快速响应的方式，遵循AMD规范，引入模块加载工具和页面渲染引擎，将JS功能模块化、页面模板化，构造了一个良好的Web开发架构，以此将页面所需动态数据以及展现结构进行剥离；同时通过监控页面请求url hash值的变化来实现不同页面的路由控制，项目目录结构更加清晰的同时也避免了静态资源的重复加载，解决了页面数据更新维护及加载速度等方面的诸多问题。

该前端Web表现与数据分离以及页面快速响应的方式，不仅可以进行前端页面的快速开发，项目还能够保持良好的功能组织结构体系，对于既有功能的维护以及新功能的开发拓展都可轻松完成；有效解决了页面目录、功能组织混乱等问题，使项目保存良好的前后端分离，实现了功能页面切换资源的按需加载，使页面结构以及项目目录结构更加清晰，具有良好的可移植性与可访问性；同时，也避免了因为单个模板出错导致整个应用崩溃的情况发生，让开发变得高效，带来了更好的用户体验。

该前端Web表现与数据分离以及页面快速响应的方式，将Web开发中前后端分离，引入JS模块加载器Require JS和模板渲染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离；通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。

所述JS模块加载器Require JS将各个单独页面功能按照AMD规范来定义为独立的模块，独立的模块负责数据获取以及对模板的渲染调用，模块文件与模板文件完全分离，进而实现了模块文件与模板文件的完全分离和项目的目录结构的组织；所述JS模块加载器Require JS使用程序调用的方式加载JS文件，既能防止js阻塞页面的渲染，又大大提高代码可读性；对外暴露统一的功能加载入口init方法，由加载管理器统一调用。

hash的展现结构同项目的目录结构保持良好的对应，配合JS模块加载器RequireJS，每个hash对应着唯一的功能模块，且都暴露对外调用方法，方便统一管理，内容的改变不需要重新加载整个页面，使Web应用更具有响应性，带来了更好的用户体验。

所述模板渲染引擎art Template采用预编译方式让性能有了质的飞跃，将静态页面结构定义为模板，数据部分通过模板渲染引擎art Template提供的标签格式进行组织展现，模板调试器能够精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

实施例2

根据本发明实施例的另一方面，还提供了一种移动终端，图7是根据本发明实施例的前后端分离的移动终端的框图，如图7所示，所述移动终端包括处理器、存储器及通信总线；

所述通信总线用于实现处理器和存储器之间的连接通信；

所述处理器用于执行存储器中存储的前后端分离程序，以实现以下步骤：

在所述前端独立开发页面模板将前端和后端进行页面分离；

将所述前端和所述后端的数据接口进行分离；

在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

将所述前端和所述后端的数据接口进行分离之后，在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

优选地，所述处理器还用于执行前后端分离程序，以实现以下步骤：

在将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

采用令牌对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌，并将所述令牌发送给所述前端，前端存储接收到的所述令牌。

优选地，所述令牌携带在所述前端向所述后端发送的资源请求中，用于所述后端接收到所述资源请求后，验证成功后，向所述前端返回请求的资源。

实施例3

根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述前后端分离方法的步骤。

本发明实施例，在所述前端独立开发页面模板将前端和后端进行页面分离；将所述前端和所述后端的数据接口进行分离；在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护，解决了相关技术中前端的开发依赖后端的Web容器，后端的工作进度决定前端工作，虽然工作职责分离，但是工作方式无法分离的问题，实现了前端和后端完全分离，除去前端对后端依赖，前后端工作同步进行，提高工作效率，同时降低维护成本提高了用户体验。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims (10)

1.一种前后端分离方法，其特征在于，包括：

在所述前端独立开发页面模板将前端和后端进行页面分离；

将所述前端和所述后端的数据接口进行分离；

在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

2.根据权利要求1所述的方法，其特征在于，在所述前端独立开发页面模板将前端和后端进行页面分离的步骤包括：

通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。

3.根据权利要求1所述的方法，其特征在于，将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

4.根据权利要求3所述的方法，其特征在于，在将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

采用令牌对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌，并将所述令牌发送给所述前端，前端存储接收到的所述令牌。

5.根据权利要求4所述的方法，其特征在于，所述令牌携带在所述前端向所述后端发送的资源请求中，用于所述后端接收到所述资源请求后，验证成功后，向所述前端返回请求的资源。

6.一种移动终端，其特征在于，所述移动终端包括处理器、存储器及通信总线；

所述通信总线用于实现处理器和存储器之间的连接通信；

所述处理器用于执行存储器中存储的前后端分离程序，以实现以下步骤：

在所述前端独立开发页面模板将前端和后端进行页面分离；

将所述前端和所述后端的数据接口进行分离；

在所述前端和所述后端的数据接口分离之后，将展现层从所述后端分离出来由所述前端维护。

7.根据权利要求6所述的移动终端，其特征在于，所述处理器还用于执行前后端分离程序，以实现以下步骤：

通过将视图模板解析设置在所述前端运行的方式在所述前端独立开发页面模板将前端和后端进行页面分离，其中，所述前端采用SPA架构。

8.根据权利要求6所述的移动终端，其特征在于，所述处理器还用于执行前后端分离程序，以实现以下步骤：

将所述前端和所述后端的数据接口进行分离之后，在后端只提供通用的Restful接口，所述Restful接口用于所述前端与所述后端进行交互。

9.根据权利要求8所述的移动终端，其特征在于，所述处理器还用于执行前后端分离程序，以实现以下步骤：

在将所述前端和所述后端的数据接口进行分离之后，所述方法还包括：

采用令牌对接口的安全权限进行校验，其中，所述前端向所述后端发送连接请求，所述连接请求中携带有用户名和密码；所述后端对所述用户名和密码进行验证，验证通过后，签发一个令牌，并将所述令牌发送给所述前端，前端存储接收到的所述令牌。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现权利要求1-5中任一项所述前后端分离方法的步骤。