CN110377283B - Web前后端分离开发时前端有效数据的实现及同步方法 - Google Patents

Abstract

Web前后端分离开发时前端有效数据的实现及同步方法涉及信息技术领域。本发明包括数据访问策略配置步骤，数据访问步骤，本地有效数据更新步骤。本发明可以实现服务端数据、模拟数据、本地有效数据的一致性，从而使得前后端分离开发过程中前端工程师可以依据本地有效数据进行前端开发，在需要生成演示系统时，通过获取本地有效数据直接生成可以演示的静态包，提高前端工程师的研发效率。

Description

Web前后端分离开发时前端有效数据的实现及同步方法

技术领域

本发明涉及信息技术领域，尤其是软件开发领域。

背景技术

前后端分离开发的模式是时下web应用系统开发的主流模式之一，前后端分离模式让前端开发脱离的服务端的约束，它使得前端开发能在一个纯粹的前端研发环境进行，这样可以充分的发挥前端的技术潜力，开发出质量很高的人机交互式系统。

在前后端分离模式下，服务端不需要关心页面开发的相关内容，也就是java的服务端可以不用去编写jsp这样的页面文件，php的服务端不需要编写.php这样的文件。服务端只需要对外公布自己可以被调用的URL地址，跟前端约定好请求的参数和数据的返回格式即可。判断一个web系统的开发是否应用了前后端分离的开发模式，标准是非常简单的，这个标准也就是前后端是否可以进行并行开发，并行开发模式是相对于串行开发模式而言的，传统的web应用开发主要是采取串行模式，这里以java的web开发为例，传统的java的web开发，页面一般采用jsp文件或者是第三方的页面模板技术例如：velocity，freemarker等等，不管开始使用什么类别的模板技术，这些模板文件本质是一个java代码文件，需要java的编译引擎进行编译成浏览器可以识别的html文件后发送到浏览器，浏览器才能显示需要展示的内容，因此传统的web开发模式很难将页面开发和服务端开发做到并行，往往程序员同时完成页面开发还有完成与该页面相对应的java代码开发。当然早期的web开发也有很多人想改进串行开发模式变为并行开发模式，但是提出的方案和解决手段往往都不是特别的容易让人接受，其方案的问题核心就是页面开发的实质都是被服务端技术所束缚，浏览器的开发本身有属于自己的一套技术栈，而服务端各自有属于自身的技术栈，如果服务端是以java语言开发，前端开发人员就必须要学习java的知识，服务端是php技术，那么前端人员就得要学些php的相关知识。在业界随着nodejs技术的出现，让前端开发人员拥有了浏览器端到服务端的全套技术栈，这就让web前后端分离模式可行性更强，前后端实现真正意义的并行开发成为了可能。

在前后端分离模式下开发web应用系统，在实际的生产实践中就会出现如下的开发场景：

场景1：web前端首先开发完毕，前端开发完成后服务端再进行系统开发，最后前后端联调接口的连通性，联调开发完成整个系统开发完毕；

场景2：服务端先开发完毕，然后web前端进行开发，前端开发完毕后，前后端联调接口的联通性，联调开发完成整个系统开发完毕；

场景3：web前端和web服务端同时进行开发，但是一个web应用系统的，前端和服务端的开发周期一般几乎很难做到完全同步，这就会出现前端先开发完毕或者服务端先开发完毕的情况，但是不管那一方先完成，最终还是需要双方都研发完毕，才能最终完成联调接口的连通性的开发工作。

前后端分离开发模式下的开发流程在整个项目开发完成前都会有一个串行的开发工作那就是前后端联调开发，而且前后端联调又是一个重要而且必不可少的工作环节，也就是说前后端分离所谓的并行开发模式在web项目研发后期又会回归至串行开发模式。

当web开发进入串行模式后，整个系统的后续开发都会强依赖这种串行开发流程，这就让原先的前后端分离下并行模式所带来的的好处大大的打折扣，产生这些问题的本质流程是前后端联调开发的流程，尤其问题的核心是前后端接口定义和数据格式定义的操作上，详细分析接口定义和数据格式定义的相关问题，具体内容如下：

问题1：接口定义和数据格式定义是一个沟通成本很高，内容会反复变更，准确性很难控制的事情，理想的前后端分离开发模式下，项目进入开发前，前端团队和服务端团队应该会反复的沟通接口的定义，在开发过程中接口如果需要变更，团队之间会不断互动沟通，这样到了联调阶段前后端的接口基本都匹配了，联调开发基本都是一个测试的环节，然而这样的工作需要前端和服务端团队配合极其默契，但是实际开发中，那些琐碎的沟通和前后端的联动往往会因为外部因素所影响，因此校验接口的准确性工作往往会被拖延到联调开发阶段才进行；

问题2：在前后端分离模式下，前端项目会面对双重数据来源，前端项目的第一个数据来源是来自前端的模拟数据服务，前端的模拟数据服务端在业界有个专门的称呼叫做mock服务，下文里的mock服务指的就是前端的模拟数据服务，前端项目的第二个数据来源来自前端所对接的服务端所提供的数据。如何保证双重数据源的数据一致性，这点在实际的开发实践中往往很难做的到位，其实问题1的本质就是如何有效的保证双重数据源数据的一致性问题，这个工作最理想的方式就是发现一次接口变更就时时同步一次，因此对于团队直接的默契和责任心要求很高，如果这些问题最后希望集中来处理，那么就会增加项目研发的工作量和沟通成本；

问题3：双重数据来源的数据如果没有保持一致，当web系统完成了一个联调开发的过程后web前端项目就会强依赖服务端，自此之后，前端如果想开发页面，必须对应启动一个与之对应的有效的服务端，否则前端很难进行正常的开发工作，这就让web系统开发回归到了传统的串行开发模式，如果前后端分离模式由并行模式转到串行模式，那么系统开发过程中的沟通成本就会成倍增加，人工工作量增大，那么原有的前后端分离模式所带来的的并行开发模式带来的好处就会大大的打折扣了。

由上所述，前后端分离模式里的接口定义和接口的数据格式定义往往是整个模式的瓶颈所在，这个瓶颈还有一个不可忽视的问题，那就是接口到底归谁来定义的问题，这个问题具体分析如下：

在早期的前后端分离模式下，web前端系统会内置一个mock数据的服务端，一般是node.js来承担这个mock服务端的角色，服务端的研发人员会编写接口文档，文档交付前端项目团队后，前端研发人员会根据接口文档在mock服务里编写相应的mock数据接口和相应代码。这个工作相当于前端和服务端做了两次接口定义的操作，而且以文档的形式定义保证更新的准确性非常困难和繁琐；

而现在有些大公司例如蚂蚁金服推出了RAP2工具，还有开源的YAPI工具，这些工具是第三方的mock数据工具，服务端的研发人员可以在这些工具上直接定义数据接口和返回数据，前端项目可以不再内置mock数据服务，而是将请求转接到第三方的mock数据服务上，这样的第三方工具可以让接口和对应的接口数据只定义一次，定义方为服务端的研发人员，接口定义完毕后，前端研发人员直接调用接口使用。

时下主流的web前端框架，例如流行的MVVM的框架VUE，REACT和Angular，在开发时候编写的前端代码都不是浏览器能直接执行的代码，它们在生产部署前往往都会存在一个创建和编译代码生产包的过程，创建出来的成果是一组静态页面：

前端开发人员希望静态包里可以直接将mock出来的数据一起打包到页面里去，这样就可以直接点开页面在浏览器运行，在浏览器里看到实际的展示效果，这个做法的好处是：

对于研发人员可以快速的判断构建出来的静态页面是否准确，早发现问题可以及时做相关的调整；

可以直接演示的静态包可以在研发过程中不需要部署程序就可以看到阶段性的成果，这对于有效的跟踪项目进度，有效的管理研发的过程和质量非常有好处；

一些企业会在项目还未研发完毕就把可以展示的静态包提前给用户或者重要的领导做相关演示，这对于企业项目的推广，研发过程中准确的调整项目业务需求起到了积极的作用。

一个前端项目是否能随时随地构建出一个准确完整的静态包本质上是和如何处理好双重数据源数据一致性紧密相关的，如果构建过程中无法获取有效数据或者有数据缺失那么在研发过程中构建的静态页面包都将会失败。

这个问题就要求web前端项目还需要一套新的数据来源，这个数据的访问不需要通过http请求，可以通过JavaScript直接访问到，本发明里将其称为本地有效数据。

本发明的Web前后端分离开发时前端有效数据的实现及同步方法可以实现服务端数据、模拟数据、本地有效数据的一致性，从而使得前后端分离开发过程中前端工程师可以依据本地有效数据进行前端开发，在需要生成演示系统时，通过获取本地有效数据直接生成可以演示的静态包，提高前端工程师的研发效率。

共有技术描述

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。Node使用Module模块去划分不同的功能，以简化应用的开发。Modules模块有点像C++语言中的类库。每一个Node的类库都包含了十分丰富的各类函数，比如http模块就包含了和http功能相关的很多函数，可以帮助开发者很容易地对比如http,tcp/udp等进行操作，还可以很容易的创建http和tcp/udp的服务器。

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是HTML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

浏览器的Ajax操作都是构建一个window的XMLHTTPRequest实例对象完成，XMLHTTPRequest实例对象在发送Ajax请求时候会有5种过程状态，这5种状态如下：

0：初始化，即Ajax的XMLHTTPRequest实例对象刚刚初始化被构建；

1：启动，即Ajax的XMLHTTPRequest实例对象开始启动，即调用了open方法，这时候Ajax已经做好发送请求的准备，但是http请求此时还没有发送；

2：发送，即Ajax的XMLHTTPRequest实例对象发送了Ajax请求，也就是调用了对象的send方法，但是这时请求还没有收到服务端返回的数据；

3：接收，这时候Ajax的XMLHTTPRequest实例对象开始收到了服务端返回的响应数据，但是这个时候的响应数据是在接收中，还不是全部的响应数据，只是部分的响应数据；

4：完成，这时候Ajax的XMLHTTPRequest实例对象已经收到了全部的响应数据，这时候http请求操作也就全部结束了；

这5种状态XMLHTTPRequest实例对象有一个readyState属性专门接收。

这5种状态中0,1都是在浏览器端进行了，0是初始化操作，因此0状态下XMLHTTPRequest实例对象还未就绪，因此不具备操作的条件，而1状态是Ajax准备发送http请求前的一种状态，此时XMLHTTPRequest实例对象已经初始化完成，具备了全部功能，那么在1状态下，本发明根据实际配置信息，即需要调用读取本地数据的操作，那么本发明就会在1状态下即Ajax执行send发送数据的操作前先检测本地是否有相关数据，这个检测就是以url地址为键值对的key，查找本地缓存对象的内容。而这些操作都是在XMLHTTPRequest实例对象的回调函数onreadystatechange方法里完成，该方法在readyState每次改变状态时候就会被触发，因此它能监测到readyState状态是1的情况，这时候如果检查到本地有缓存数据，那么浏览器直接获取，这时候XMLHTTPRequest实例对象调用abort方法，该方法取消后续的全部Ajax操作。

发明内容

Web前后端分离开发时前端有效数据的实现及同步方法，包括数据访问策略配置步骤，数据访问步骤，本地有效数据更新步骤；

1）数据访问策略配置步骤

由数据访问策略配置器对前端开发中需要访问的数据进行配置生成数据访问配置文件，数据访问地址分为服务端数据地址，模拟数据地址和本地有效数据地址；将需要访问服务端数据的页面程序配置服务端数据地址，将需要访问模拟数据的页面程序配置模拟数据地址，将需要访问本地有效数据的页面程序配置本地有效数据地址；设定先访问服务端数据地址返回结果为失败时访问本地有效数据地址的策略作为未配置数据访问地址的页面程序的数据访问规则；将数据访问策略配置器生成的数据访问配置文件作为每个页面程序运行时预先加载的服务，通过浏览器预先加载数据访问配置文件实现浏览器打开每个页面程序时根据数据访问配置文件的设定完成数据访问步骤；

2）数据访问步骤

当浏览器打开的页面程序在数据访问配置文件中的配置是访问模拟数据地址时，请求被发送到Node.js服务，Node.js服务通过http代理的方式访问模拟数据地址，http代理将请求数据返回给Node.js服务，Node.js服务再将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问服务端数据地址时，请求被发送到Node.js服务，Node.js服务将请求发送给服务端，请求到了服务端，服务端会通过http代理访问服务端数据地址，然后将数据返回给Node.js服务，Node.js服务将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问本地有效数据时，由Ajax拦截器将浏览器发起的请求定位为本地有效数据；Ajax拦截器将本地有效数据中页面程序需要的数据返回给浏览器；

Ajax拦截器的工作步骤是：

Ajax拦截器监听XMLHTTPRequest实例对象的readyState属性；Ajax拦截器监听操作是在XMLHTTPRequest实例对象的回调函数onreadystatechange方法里完成，onreadystatechange方法在readyState每次改变状态时候就会被触发，因此它能监测到readyState状态是1的情况，当readyState属性为1时，检查到本地有效数据的内容有页面程序需要的数据时，浏览器直接从本地有效数据获取页面程序需要的数据，Ajax拦截器通过XMLHTTPRequest实例对象调用abort方法，abort方法取消后续的全部Ajax操作；

3）本地有效数据更新步骤

由数据有效性判断器监听页面程序收到的返回数据，当页面程序成功收到返回数据时，数据有效性判断器将返回数据存储于本地有效数据中，完成本地有效数据的更新。

有益效果

本发明的Web前后端分离开发时前端有效数据的实现及同步方法可以实现服务端数据、模拟数据、本地有效数据的一致性，从而使得前后端分离开发过程中前端工程师可以依据本地有效数据进行前端开发，在需要生成演示系统时，通过获取本地有效数据直接生成可以演示的静态包，提高前端工程师的研发效率。

附图说明

图1是本发明的系统流程图。

具体实施方式

参看图1 实现Web前后端分离开发时前端有效数据的实现及同步方法，包括数据访问策略配置步骤，数据访问步骤，本地有效数据更新步骤；

1）数据访问策略配置步骤

由数据访问策略配置器1对前端开发中需要访问的数据进行配置，生成数据访问配置文件，数据访问地址分为服务端数据地址，模拟数据地址和本地有效数据地址；将需要访问服务端数据的页面程序配置服务端数据地址，将需要访问模拟数据的页面程序配置模拟数据地址，将需要访问本地有效数据的页面程序配置本地有效数据地址；设定先访问服务端数据地址返回结果为失败时访问本地有效数据地址的策略作为未配置数据访问地址的页面程序的数据访问规则；将数据访问策略配置器1生成的数据访问配置文件作为每个页面程序运行时预先加载的服务，通过浏览器预先加载数据访问配置文件实现浏览器打开每个页面程序时根据数据访问配置文件的设定完成数据访问步骤；

2）数据访问步骤

当浏览器打开的页面程序在数据访问配置文件中的配置是访问模拟数据7地址时，请求被发送到Node.js服务2，Node.js服务2通过http代理的方式访问模拟数据7地址，http代理将请求数据返回给Node.js服务2，Node.js服务2再将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问服务端数据6地址时，请求被发送到Node.js服务2，Node.js服务2将请求发送给服务端，请求到了服务端，服务端会通过http代理访问服务端数据6地址，然后将数据返回给Node.js服务2，Node.js服务2将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问本地有效数据5时，由Ajax拦截器3将浏览器发起的请求定位为本地有效数据5；Ajax拦截器3将本地有效数据5中页面程序需要的数据返回给浏览器；

Ajax拦截器3的工作步骤是：

Ajax拦截器3监听XMLHTTPRequest实例对象的readyState属性；Ajax拦截器3监听操作是在XMLHTTPRequest实例对象的回调函数onreadystatechange方法里完成，onreadystatechange方法在readyState每次改变状态时候就会被触发，因此它能监测到readyState状态是1的情况，当readyState属性为1时，检查到本地有效数据的内容有页面程序需要的数据时，浏览器直接从本地有效数据获取页面程序需要的数据，Ajax拦截器3通过XMLHTTPRequest实例对象调用abort方法，abort方法取消后续的全部Ajax操作；

3）本地有效数据更新步骤

由数据有效性判断器4监听页面程序收到的返回数据，当页面程序成功收到返回数据时，数据有效性判断器4将返回数据存储于本地有效数据5中，完成本地有效数据5的更新。

Claims (1)

1.Web前后端分离开发时前端有效数据的实现及同步方法，其特征在于包括数据访问策略配置步骤，数据访问步骤，本地有效数据更新步骤；

1）数据访问策略配置步骤

由数据访问策略配置器对前端开发中需要访问的数据进行配置生成数据访问配置文件，数据访问地址分为服务端数据地址，模拟数据地址和本地有效数据地址；将需要访问服务端数据的页面程序配置服务端数据地址，将需要访问模拟数据的页面程序配置模拟数据地址，将需要访问本地有效数据的页面程序配置本地有效数据地址；设定先访问服务端数据地址返回结果为失败时访问本地有效数据地址的策略作为未配置数据访问地址的页面程序的数据访问规则；将数据访问策略配置器生成的数据访问配置文件作为每个页面程序运行时预先加载的服务，通过浏览器预先加载数据访问配置文件实现浏览器打开每个页面程序时根据数据访问配置文件的设定完成数据访问步骤；

2）数据访问步骤

当浏览器打开的页面程序在数据访问配置文件中的配置是访问模拟数据地址时，请求被发送到Node.js服务，Node.js服务通过http代理的方式访问模拟数据地址，http代理将请求数据返回给Node.js服务，Node.js服务再将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问服务端数据地址时，请求被发送到Node.js服务，Node.js服务将请求发送给服务端，请求到了服务端，服务端会通过http代理访问服务端数据地址，然后将数据返回给Node.js服务，Node.js服务将数据返回给浏览器；

当浏览器打开的页面程序在数据访问配置文件中根据配置要访问本地有效数据时，由Ajax拦截器将浏览器发起的请求定位为本地有效数据；Ajax拦截器将本地有效数据中页面程序需要的数据返回给浏览器；

Ajax拦截器的工作步骤是：

Ajax拦截器监听XMLHTTPRequest实例对象的readyState属性；Ajax拦截器监听操作是在XMLHTTPRequest实例对象的回调函数onreadystatechange方法里完成，onreadystatechange方法在readyState每次改变状态时候就会被触发，因此它能监测到readyState状态是1的情况，当readyState属性为1时，检查到本地有效数据的内容有页面程序需要的数据时，浏览器直接从本地有效数据获取页面程序需要的数据，Ajax拦截器通过XMLHTTPRequest实例对象调用abort方法，abort方法取消后续的全部Ajax操作；

3）本地有效数据更新步骤

由数据有效性判断器监听页面程序收到的返回数据，当页面程序成功收到返回数据时，数据有效性判断器将返回数据存储于本地有效数据中，完成本地有效数据的更新。

Images