Web页面开发模式演变历史研究

刘敏娜 黄素萍 李延香

摘要：随着浏览器应用复杂度的提高，前端技术在不断的演进。经历了静态网页、后端动态程序、后端MVC、后端基于J2EE框架、前端的SPA时代和前端MVC设计方法。本文探索了这些设计方法的优缺点，阐述了推进技术变革的主要因素是效率和性能，相信随着浏览器的发展，会有更多更新的前端开发技术出现。

关键词：Web;前端;后端;MVC

中图分类号：TP311.52 文献标识码：A 文章编号：1007-9416（2019）10-0117-02

前端开发技术经历了从前后端不分离的早期阶段，后端为主的MVC阶段，SPA时代和前端为主的MVC时代。这四种阶段分别分析如下：

1 早期阶段

在互联网中采用的是B/S工作模式，工作过程是用户使用浏览器向服务器发起网络请求，服务器动态响应请求，此时会为客户端启动一个新的线程，通过线程访问静态web页面，同时将请求信息借助网络发送给用户端的浏览器，工作流程如图1[1]。在网络早期，随着超本文http技术的出现，网络上传输的是静态的文本信息，这些文本数据通过超级链接技术相关联，实现了信息的共享[2]。这个时期被称为Web1.0，这个阶段用户是被动浏览信息，被动接受页面数据。页面数据以静态HTML形式展示，数据没有专用录入接口，网页更新不及时。

2 后端为主的阶段

随着网络上的数据量的增加，数据的管理是一个不能忽略的问题。而web1.0阶段将数据静态绑定在HTML文档中不利于数据的保存和维护操作。因此提出将数据存储在数据库中，通过动态开发技术把读取的数据显示在页面上[3]。这个阶段给用户返回的页面是动态拼凑而成的，不同的访问者，在不同的时间，处于不同的地点返回的页面内容可以不同。实现了数据和网页之间的分离。

这个阶段的动态开发语言有CGI、ASP、PHP、JSP等。主要使用的服务器有Apache，Tomcat。数据库管理软件有MySQL、SQLServer和Oracle等。

后端为主的web工作流程如图2所示。客户端发起网络请求，网络中启动一个新的线程向web服务器请求服务，服务器读取指定程序并加载程序，读取指定数据库中数据，通过动态拼凑形式生成页面，将页面返回给客户端浏览器[4]。

这个阶段的web数据能较好的保存下来，并且可以单独管理数据，数据改变之后用户看到的页面内容动态发生变化。但是美中不足的是，所有的业务逻辑，数据库访问逻辑都定义在动态页面中，造成页面内容复杂，维护不方便。

3 后端的MVC阶段

伴随着动态页面的逻辑越来越复杂，为了很好的与前端页面交互，更好的与数据库进行交互，更好的表示数据对象，第3个阶段为服务器架构作了升级，有学者提出了MVC设计模式，即控制层、视图层、模型层。控制层负责具体的业务逻辑操作，根据视图的请求对数据做处理，将结果保存在模型中，同时让模型和视图进行交互;视图层向控制器提交所需数据，同时显示模型中的数据;模型层用来存储数据的对象。

JSP技术中的MVC模型的实现如下：

模型层：是定义的一个或多个JavaBean对象，可以存储数据。在JavaBean中定义了setter和getter方法，用来映射数据。

视图层：是一个或多个JSP文件，作用是向控制器提交数据和显示数据。

控制层：是Servlet对象，根据视图提交的数据请求进行数据操作，将结果存储到模型层，然后通过转发方式将数据在页面显示。

4 后端基于J2EE的框架技术

JavaEE是Java的企业级应用，它的技术基础是Java SE，JavaEE平台已经成为使用最广泛的Web程序设计技术，目的是能够使企业开发者大幅缩短投放市场时间。常见的JavaEE框架有SSM（Struts2+Spring+MyBatis）技术和SSH（Struts2+Spring+ Hibernate）技术。

SSM技术和SSH技术都是以Spring框架为核心，区别在于MVC的实现方式不同和ORM持久化不同。SSM注重注解式开发，ORM实现更加简单灵活。SSH注重配置开发，通过Hibernate对数据的增删改查操作更加自动化[5]。

SSM技术介绍：

Spring是轻量级的开源框架，以IoC和AOP为核心，使用基本的JavaBean完成EJB完成的工作。Spring在表现层提供了Spring MVC的功能，在业务逻辑层可以管理事务、记录日志，在持久层可以整合MyBatis等技术。

SpringMVC是Spring提供的实现了Web MVC设计模式的轻量级web框架。和Struts2一样，都属于MVC框架。使用SpringMVC可以自动绑定用户输入，并能正确的转换数据类型，支持多种视图技术，同时使用基于XML的配置文件，具有很大的灵活性，很容易与其它框架集成。

MyBatis是当前主流的Java持久层框架之一，它具有性能优越，高度的灵活性，可优化性和易于维护等特性，在企业级开发中使用广泛。MyBatis消除了JDBC代码和参数的手动设置，使用简单的XML或注解进行配置和原始映射，将接口和java的POJO映射程数据库中的记录，使开发人员通过面向对象编程思想操作数据库[6]。

SSM框架执行流程，页面发送请求给控制器，控制器调用业务层处理逻辑，逻辑层向持久层发送请求，持久层与数据库交互，后将结果返回给业务层，业务层将处理逻辑发送给控制器，控制器再调用视图展现数据。

5 前端的SPA时代

静态资源存储，SPA Single page application单页面应用。SPA是一种特殊的Web应用，加载单个HTML页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS[7]。一旦頁面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换div切换显示和隐藏状态，从而实现UI与用户的交互。在SPA应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并依赖于内容Region中的视图切换来展示内容。

6 前端的MVC交互时代

前端MVC（Model-View-Controller）将DOM交互内容表示为数据模型、视图和事件控制三部分。Model可以表示数据对象和存放请求的数据结果，View用来进行页面更新和修改，Controller用来根据前端路由条件调用不同的Model给View渲染不同的数据。MVC模式组件结构如图3所示。

前端技术的发展伴随着浏览器的结构而变化，前端开发模式经历了静态网页，服务器组装，后端MVC等阶段。发展的原始推动力是效率和性能。在不远的未来，将有更多的优化技术出现。

参考文献

[1] 刘岩.技术升级与传媒变革：从Web1.0到Web3.0之路[J].电视工程，2019（01）：44-47.

[2] Nath，K.，Dhar，S.Basishtha，S.Web 1.0 to Web 3.0-Evolution of the Web and its various challenges[C].Optimization Reliabilty，and Information Technology （ICROIT），2014.

[3] 蔡晓庆，陈燕平.在基于Ajax的Web应用中的使用MVC模式[J].电子测试，2019（12）：73-74.

[4] 彭兵.浅谈MVC设计模式在JSP程序中的应用[J].信息与电脑（理论版），2019（11）：104-105.

[5] 曾艳丽，李诺.针对SSM框架Web系统的相关思考[J].信息与电脑（理论版），2019（03）：116-117.

[6] 王艳清，陈红.基于SSM框架的智能Web系统研发[J].计算机工程与设计，2019（05）：4751.

[7] 方敏，赵峰.单页面技术在试验数据管理系统中的研究与应用[J].计算机系统应用，2019，28（4）：111-118.