CN110968388A - 页面处理方法和系统 - Google Patents

页面处理方法和系统 Download PDF

Info

Publication number
CN110968388A
CN110968388A CN201911060945.1A CN201911060945A CN110968388A CN 110968388 A CN110968388 A CN 110968388A CN 201911060945 A CN201911060945 A CN 201911060945A CN 110968388 A CN110968388 A CN 110968388A
Authority
CN
China
Prior art keywords
request
page
service layer
data
layer
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911060945.1A
Other languages
English (en)
Inventor
戈嘉伦
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suning Cloud Computing Co Ltd
Original Assignee
Suning Cloud Computing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Suning Cloud Computing Co Ltd filed Critical Suning Cloud Computing Co Ltd
Priority to CN201911060945.1A priority Critical patent/CN110968388A/zh
Publication of CN110968388A publication Critical patent/CN110968388A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请涉及一种页面处理方法和系统；所述方法包括：前端获取操作指令，并根据操作指令向中间层发送第一请求；中间层根据所述第一请求向服务层发送第二请求；服务层对所述第二请求进行响应，返回对应的数据；中间层根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。本申请的方案将前端、后台分离开，使前端和后台可以分别同步开发，提高开发效率；前端与后台分工明确，分别侧重不同的功能，发挥各自的优势；适用于多页面应用，每次请求只加载本次用到的资源，无需加载全部资源，解决了单页面应用加载速度慢的问题。

Description

页面处理方法和系统
技术领域
本申请涉及Web前端技术领域，具体涉及一种页面处理方法和系统。
背景技术
单页面应用(SPA)，说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的html、js、css。所有的页面内容都包含在这个主页面中；然后在交互的时候，通过路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多页面应用(MPA)，是指一个应用中有多个页面，页面跳转时是整页刷新。
单页面应用存在两方面的问题：第一个问题是客户端第一次加载的速度很慢，原因在于第一次访问时所有前端资源都是在客户端进行渲染，第一次访问需要加载全部需要的资源；第二个问题是SEO网络爬虫，因为是单页面，所以HTML的所有标题和meta标签都是固定的，导致网络爬虫无法精准地获取到页面的相关信息。
相关技术中，业界在开发项目时通常的做法是，采用单页面应用，前端提供静态页面给后台，经过后台转化为后台模板。这种方式依赖后台环境，导致前后分工不明确、开发效率低、后期维护成本高。
发明内容
为至少在一定程度上克服相关技术中存在的问题，本申请提供一种页面处理方法和系统。
根据本申请实施例的第一方面，提供一种页面处理方法，包括：
前端获取操作指令，并根据操作指令向中间层发送第一请求；
中间层根据所述第一请求向服务层发送第二请求；
服务层对所述第二请求进行响应，返回对应的数据；
中间层根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
进一步地，所述方法还包括：
中间层在接收到所述第一请求时，验证用户的登录状态；
如果登录状态为已登录，则根据所述第一请求向服务层发送第二请求；
如果登录状态为未登录，则将登录页面返回到前端。
进一步地，所述服务层对所述第二请求进行响应，包括：
服务层在接收到所述第二请求时，验证用户的登录状态；
如果登录状态为未登录，则返回失败状态信息；
如果登录状态为已登录，则根据所述第二请求从数据库中查询相应的数据，并将数据返回到中间层。
进一步地，所述方法还包括：
中间层在接收到失败状态信息时，将登录页面返回到前端。
进一步地，所述中间层根据服务层返回的数据渲染页面，包括：
中间层根据静态资源和服务层返回的数据渲染页面；其中静态资源是预先存储在中间层的。
进一步地，所述操作指令包括如下项中的至少一项：URL、页面交互指令、路由跳转指令。
进一步地，当所述操作指令包括路由跳转指令时，所述中间层根据所述第一请求向服务层发送第二请求，包括：
通过前端路由跳转到对应页面；
向服务层请求获取当前页面需要的请求数据；
向服务层请求对应页面的数据接口。
进一步地，所述向服务层请求获取当前页面需要的请求数据，包括：
检查前端是否存在请求数据的缓存；
如果存在，从前端缓存中加载请求数据；
如果不存在，向服务层请求获取当前页面需要的请求数据。
进一步地，所述前端为浏览器，所述中间层为Node服务器，所述服务层为Java服务器。
根据本申请实施例的第二方面，提供一种页面处理系统，包括：前端、中间层和服务层；
前端用于获取操作指令，并根据操作指令向中间层发送第一请求；
中间层用于根据所述第一请求向服务层发送第二请求；
服务层用于对所述第二请求进行响应，返回对应的数据；
中间层还用于根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
本申请的实施例提供的技术方案具备以下有益效果：
本申请的方案将前端、后台分离开，使前端和后台可以分别同步开发，提高开发效率；前端与后台分工明确，分别侧重不同的功能，发挥各自的优势；适用于多页面应用，每次请求只加载本次用到的资源，无需加载全部资源，解决了单页面应用加载速度慢的问题。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
图1是根据一示例性实施例示出的一种页面处理方法的流程图。
图2是根据一示例性实施例示出的一种页面处理方法的系统执行流程图。
图3是根据一示例性实施例示出的一种页面处理方法的首次访问的流程图。
图4是根据一示例性实施例示出的一种页面处理方法的后续交互和路由跳转的流程图。
图5是根据一示例性实施例示出的一种页面处理系统的交互流程图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的方法和系统的例子。
图1是根据一示例性实施例示出的一种页面处理方法的流程图，该方法包括以下步骤：
步骤S1：前端获取操作指令，并根据操作指令向中间层发送第一请求；
步骤S2：中间层根据所述第一请求向服务层发送第二请求；
步骤S3：服务层对所述第二请求进行响应，返回对应的数据；
步骤S4：中间层根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
本申请的方案将前端、后台分离开，使前端和后台可以分别同步开发，提高开发效率；前端与后台分工明确，分别侧重不同的功能，发挥各自的优势；适用于多页面应用，每次请求只加载本次用到的资源，无需加载全部资源，解决了单页面应用加载速度慢的问题。
参照图2，本申请的页面处理方法，是基于前端、中间层和服务层来实施的。服务层可以是Java服务器，负责数据库查询，业务处理也在服务层进行。
中间层可以是Node服务器，负责请求后台(即服务层)Java接口、处理数据、控制路由以及返回数据，不做任何业务处理。
前端通常是浏览器或者移动端APP，负责请求接口数据、展示数据，以及进行页面交互。其中，前端请求的接口是HTTP接口，HTTP接口是前后端交互的桥梁，也是最常见的处理方案。
在一些实施例中，本申请的方案使用react技术栈作为前后端分离技术方案，Node作为中间处理、API服务和服务端渲染。
参照图3，图中示出了首次访问的处理流程图。其中sdasNode即为Node系统；mlps-isso是Node系统中单点登录的工具包。nextjs是对react的服务端渲染一层封装，减少开发工作量，主要提供前端和Node层的处理统一，静态资源的优化，项目结构统一。
一些实施例中，所述方法还包括：
中间层在接收到所述第一请求时，验证用户的登录状态；
如果登录状态为已登录，则根据所述第一请求向服务层发送第二请求；
如果登录状态为未登录，则将登录页面返回到前端。
一些实施例中，所述服务层对所述第二请求进行响应，包括：
服务层在接收到所述第二请求时，验证用户的登录状态；
如果登录状态为未登录，则返回失败状态信息；
如果登录状态为已登录，则根据所述第二请求从数据库中查询相应的数据，并将数据返回到中间层。
一些实施例中，所述方法还包括：
中间层在接收到失败状态信息时，将登录页面返回到前端。
在前端发出请求后，中间层和服务层都需要进行登录验证，两次验证都通过之后，服务层才会将请求的数据返回到前端。验证两次的原因是进行双保险。
参照图4，图中示出了后续交互和路由跳转的处理流程图。其中后台是提供接口数据的；前端接口是Node的中间处理层，主要用户提供给客户端调用；资源服务器是指Node系统。
一些实施例中，所述中间层根据服务层返回的数据渲染页面，包括：
中间层根据静态资源和服务层返回的数据渲染页面；其中静态资源是预先存储在中间层的。
一些实施例中，所述操作指令包括如下项中的至少一项：URL、页面交互指令、路由跳转指令。
一些实施例中，当所述操作指令包括路由跳转指令时，所述中间层根据所述第一请求向服务层发送第二请求，包括：
通过前端路由跳转到对应页面；
向服务层请求获取当前页面需要的请求数据；
向服务层请求对应页面的数据接口。
一些实施例中，所述向服务层请求获取当前页面需要的请求数据，包括：
检查前端是否存在请求数据的缓存；
如果存在，从前端缓存中加载请求数据；
如果不存在，向服务层请求获取当前页面需要的请求数据。
其中，所述请求数据为当前页面需要的js。由于第一次加载页面已经缓存公共js和css到浏览器本地，后面页面跳转和页面交互公共的js和css直接从浏览器本地缓存获取，这样可以尽量减少向服务层请求的数据量，降低服务层的压力，提高加载速度。
一些实施例中，所述前端为浏览器，所述中间层为Node服务器，所述服务层为Java服务器。
以前开发功能依赖后台，现在是根据业务定义好接口，前端和后端根据定义好的接口同步开发，前端基组件化是页面拆分成小模块，比如一个按钮就是一个最小组件，这样可以最大化复用组装，开发就好像积木一样需要什么就拿过拼接，效率提高之前的1-2倍的效率。
后台不再关注页面和功能的具体效果，只关注开发接口，注重服务端相关的技术提升和性能。因为前后已经分工明确了。
前端更加专业，规划好项目的前期，前端相关的整体技术方案，提高开发效率，代码维护，页面性能和用户体验。前后端只关注各自的领域，发挥各自的优势。
参照图5，本申请还提供如下的实施例：
一种页面处理系统，包括：前端、中间层和服务层；
前端用于获取操作指令，并根据操作指令向中间层发送第一请求；
中间层用于根据所述第一请求向服务层发送第二请求；
服务层用于对所述第二请求进行响应，返回对应的数据；
中间层还用于根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
关于上述实施例中的系统，其中各部分执行操作的具体步骤已经在有关该方法的实施例中进行了详细描述，此处不再详细阐述说明。
可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。
应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
上述提到的存储介质可以是只读存储器，磁盘或光盘等。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种页面处理方法，其特征在于，包括：
前端获取操作指令，并根据操作指令向中间层发送第一请求；
中间层根据所述第一请求向服务层发送第二请求；
服务层对所述第二请求进行响应，返回对应的数据；
中间层根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
2.根据权利要求1所述的方法，其特征在于，还包括：
中间层在接收到所述第一请求时，验证用户的登录状态；
如果登录状态为已登录，则根据所述第一请求向服务层发送第二请求；
如果登录状态为未登录，则将登录页面返回到前端。
3.根据权利要求2所述的方法，其特征在于，所述服务层对所述第二请求进行响应，包括：
服务层在接收到所述第二请求时，验证用户的登录状态；
如果登录状态为未登录，则返回失败状态信息；
如果登录状态为已登录，则根据所述第二请求从数据库中查询相应的数据，并将数据返回到中间层。
4.根据权利要求3所述的方法，其特征在于，还包括：
中间层在接收到失败状态信息时，将登录页面返回到前端。
5.根据权利要求3所述的方法，其特征在于，所述中间层根据服务层返回的数据渲染页面，包括：
中间层根据静态资源和服务层返回的数据渲染页面；其中静态资源是预先存储在中间层的。
6.根据权利要求1-5任一项所述的方法，其特征在于，所述操作指令包括如下项中的至少一项：URL、页面交互指令、路由跳转指令。
7.根据权利要求6所述的方法，其特征在于，当所述操作指令包括路由跳转指令时，所述中间层根据所述第一请求向服务层发送第二请求，包括：
通过前端路由跳转到对应页面；
向服务层请求获取当前页面需要的请求数据；
向服务层请求对应页面的数据接口。
8.根据权利要求7所述的方法，其特征在于，所述向服务层请求获取当前页面需要的请求数据，包括：
检查前端是否存在请求数据的缓存；
如果存在，从前端缓存中加载请求数据；
如果不存在，向服务层请求获取当前页面需要的请求数据。
9.根据权利要求1-5、7、8任一项所述的方法，其特征在于，所述前端为浏览器，所述中间层为Node服务器，所述服务层为Java服务器。
10.一种页面处理系统，其特征在于，包括：前端、中间层和服务层；
前端用于获取操作指令，并根据操作指令向中间层发送第一请求；
中间层用于根据所述第一请求向服务层发送第二请求；
服务层用于对所述第二请求进行响应，返回对应的数据；
中间层还用于根据服务层返回的数据渲染页面，并将渲染后的页面返回到前端。
CN201911060945.1A 2019-11-01 2019-11-01 页面处理方法和系统 Pending CN110968388A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911060945.1A CN110968388A (zh) 2019-11-01 2019-11-01 页面处理方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911060945.1A CN110968388A (zh) 2019-11-01 2019-11-01 页面处理方法和系统

Publications (1)

Publication Number Publication Date
CN110968388A true CN110968388A (zh) 2020-04-07

Family

ID=70030053

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911060945.1A Pending CN110968388A (zh) 2019-11-01 2019-11-01 页面处理方法和系统

Country Status (1)

Country Link
CN (1) CN110968388A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111506380A (zh) * 2020-04-22 2020-08-07 上海极链网络科技有限公司 一种渲染方法、装置、设备及存储介质
CN111881394A (zh) * 2020-07-28 2020-11-03 万商云集(成都)科技股份有限公司 一种应用中间层的请求处理方法及系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN113064734A (zh) * 2021-03-01 2021-07-02 青岛海尔科技有限公司 数据处理方法、装置、前端中间层组件和前后端分离式开发系统

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107609156A (zh) * 2017-09-26 2018-01-19 微梦创科网络科技（中国）有限公司 一种页面搭建的方法及装置
CN110213105A (zh) * 2019-06-06 2019-09-06 北京神舟航天软件技术有限公司 一种跨平台微应用创建方法

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107609156A (zh) * 2017-09-26 2018-01-19 微梦创科网络科技（中国）有限公司 一种页面搭建的方法及装置
CN110213105A (zh) * 2019-06-06 2019-09-06 北京神舟航天软件技术有限公司 一种跨平台微应用创建方法

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111506380A (zh) * 2020-04-22 2020-08-07 上海极链网络科技有限公司 一种渲染方法、装置、设备及存储介质
CN111881394A (zh) * 2020-07-28 2020-11-03 万商云集(成都)科技股份有限公司 一种应用中间层的请求处理方法及系统
CN111881394B (zh) * 2020-07-28 2024-01-12 万商云集(成都)科技股份有限公司 一种应用中间层的请求处理方法及系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN113064734A (zh) * 2021-03-01 2021-07-02 青岛海尔科技有限公司 数据处理方法、装置、前端中间层组件和前后端分离式开发系统

Similar Documents

Publication Publication Date Title
CN110968388A (zh) 页面处理方法和系统
US7870482B2 (en) Web browser extension for simplified utilization of web services
JP2019032883A (ja) ウェブアプリケーションを実施する方法、装置、サーバ、及びシステム
US10284671B2 (en) Dynamic bundling of web components for asynchronous delivery
KR101768793B1 (ko) 토큰 피기백킹 시스템 및 방법
US20120117494A1 (en) System and method for expediting information display
CN102591724A (zh) 消息交互方法及装置
US20080040488A1 (en) Context-aware mobile portal
CN110297944B (zh) 分布式xml数据处理方法及系统
CN111010438B (zh) 远程过程调用方法、装置、服务器及存储介质
CN102098211A (zh) 客户端和服务器动态协助的业务聚合方法、服务器和客户端
CN101197812A (zh) 一种实现页面调用的系统及方法
US9223896B2 (en) Screen generation method, and screen generation apparatus
CN105160018A (zh) 一种复制/粘贴图片的方法、装置和系统
US20080216050A1 (en) Method and System for Accessing a Resource Implemented in a Computer Network
CN110602163A (zh) 文件上传方法及装置
US20050102606A1 (en) Modal synchronization control method and multimodal interface system
CN112114804A (zh) 应用程序的生成方法、装置及系统
US20150378688A1 (en) Developing rich internet application
CN113220237B (zh) 一种分布式存储方法、装置、设备及存储介质
CN109358972A (zh) 中间件客户端的日志管理方法、装置及计算机系统
CN113282347B (zh) 插件运行方法、装置、设备及存储介质
CN115495065A (zh) 一种基于业务流控制的页面组件编排组合方法及装置
CN104219277A (zh) 重排服务器响应
CN107103001B (zh) 基于浏览器获取目标前端资源文件的方法、装置和系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200407