CN111859236A - 一种基于动态表单校验的服务器渲染页面生成方法与*** - Google Patents
一种基于动态表单校验的服务器渲染页面生成方法与*** Download PDFInfo
- Publication number
- CN111859236A CN111859236A CN202010565892.5A CN202010565892A CN111859236A CN 111859236 A CN111859236 A CN 111859236A CN 202010565892 A CN202010565892 A CN 202010565892A CN 111859236 A CN111859236 A CN 111859236A
- Authority
- CN
- China
- Prior art keywords
- data
- server
- verification
- page
- dynamic
- 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.)
- Granted
Links
- 238000012795 verification Methods 0.000 title claims abstract description 45
- 238000009877 rendering Methods 0.000 title claims abstract description 37
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000004590 computer program Methods 0.000 claims description 12
- 238000010200 validation analysis Methods 0.000 claims description 8
- 230000000977 initiatory effect Effects 0.000 claims description 3
- 238000003780 insertion Methods 0.000 claims description 3
- 230000037431 insertion Effects 0.000 claims description 3
- 230000004044 response Effects 0.000 abstract description 5
- 230000002452 interceptive effect Effects 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
Images
Classifications
-
- 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
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- 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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种基于动态表单校验的服务器渲染页面生成方法与***，本发明通过预定义路由转发规则、html模板文件、动态表单定义、表单校验规则等配置，通过路由转发用户请求，解析用户请求数据，在服务器端完成用户请求访问的页面文件的渲染，最终输出到浏览器供用户使用。区别于常见的浏览器端渲染模式，本发明使用服务器端渲染的形式，兼顾SEO友好、快速响应、客户端资源占用少等特点，同时满足了表单校验实时反馈，为用户带来了良好的交互体验。
Description
技术领域
本发明涉及软件开发技术领域，特别是一种基于动态表单校验的服务器渲染页面生成方法与***。
背景技术
在使用浏览器访问互联网站点时，网页来源与请求的站点服务器返回的数据，根据页面的渲染方式，可分为客户端渲染和服务器渲染。二者最重要的区别在于谁来完成html文件的完整拼接。如果是在服务器端完成的，然后返回给客户端，则是服务器渲染；如果是前端做了更多的工作完成了html的拼接，则是客户端渲染。两种渲染方式在不同的业务场景下各有千秋，针对要求前后端分离开发，提高用户交互体验，业务需求中存在较多的表单输入并且要求实时反馈表单校验结果的场景，客户端渲染的优势比较明显。如果针对SEO(Search Engine Optimization，搜索引擎优化)要求比较高，响应速度快的业务场景，服务器端渲染的优势非常明显。如果既要求SEO友好，又存在较多的表单数据处理，并且要求对用户输入的内容进行合法性校验的同时进行实时反馈，必须在服务器端渲染的基础上进行大量重复的表单定义和输入校验工作。
发明内容
本发明的目的是提供一种基于动态表单校验的服务器渲染页面生成方法与***，旨在解决现有技术中服务器端渲染存在表单定义以及输入校验重复的问题，实现兼顾SEO友好、快速响应、客户端资源占用少，同时满足表单校验实时反馈。
为达到上述技术目的，本发明提供了一种基于动态表单校验的服务器渲染页面生成方法，所述方法包括以下操作：
浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
优选地，所述html页面模板定义需要生成的页面的框架元素；所述表单定义内容包括表单名称、类型、表单属性以及初始数据，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
优选地，所述表单验证规则包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制。
本发明还提供了一种基于动态表单校验的服务器渲染页面生成***，所述***包括：
模板及表单获取模块，用于浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
表单***模块，用于结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
表单校验模块，用于根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
页面生成模块，用于判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
优选地，所述html页面模板定义需要生成的页面的框架元素；所述表单定义内容包括表单名称、类型、表单属性以及初始数据，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
优选地，所述表单验证规则包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制。
本发明还提供了一种基于动态表单校验的服务器渲染页面生成设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序，以实现所述的基于动态表单校验的服务器渲染页面生成方法。
本发明还提供了一种可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现所述的基于动态表单校验的服务器渲染页面生成方法。
发明内容中提供的效果仅仅是实施例的效果，而不是发明所有的全部效果，上述技术方案中的一个技术方案具有如下优点或有益效果：
与现有技术相比，本发明通过预定义路由转发规则、html模板文件、动态表单定义、表单校验规则等配置，通过路由转发用户请求，解析用户请求数据，在服务器端完成用户请求访问的页面文件的渲染，最终输出到浏览器供用户使用。区别于常见的浏览器端渲染模式，本发明使用服务器端渲染的形式，兼顾SEO友好、快速响应、客户端资源占用少等特点，同时满足了表单校验实时反馈，为用户带来了良好的交互体验。
附图说明
图1为本发明实施例中所提供的一种基于动态表单校验的服务器渲染页面生成方法流程图；
图2为本发明实施例中所提供的一种基于动态表单校验的服务器渲染页面生成***框图。
具体实施方式
为了能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
下面结合附图对本发明实施例所提供的一种基于动态表单校验的服务器渲染页面生成方法与***进行详细说明。
如图1所示，本发明公开了一种基于动态表单校验的服务器渲染页面生成方法，所述方法包括以下操作：
浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
预定义路由规则，当用户在浏览器端发起请求时，根据路由规则中用户请求URL路径，获取对应的html页面模板类型以及动态表单类型对象数组等数据。
***内置多个html模板，存放在服务器端的指定文件夹下，html模板定义需要生成的页面的框架元素，根据路由规则匹配html模板类型。通过自动查询指定文件夹下的html模板文件，完成读取内置html模板文件过程。
另外还内置多种表单定义，包括输入框、下拉选择框、单选框、复选框、日期选择框等，根据路由规则获取动态表单类型对象数组，结合获取到的html模板文件，将表单以固定顺序***到模板文件的指定位置。其中，表单定义内容包括表单名称、类型、表单属性以及初始数据等，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
设置多种表单验证规则，包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制等，根据获取的动态表单数据，为生成的表单绑定对应的验证规则，为用户输入提供实时合法性校验反馈。
通过获取到的html模板文件以及动态表单数据，判断如果存在需要请求后台数据的情况，往后台服务器发送给指定的http请求，解析后台服务器返回的数据，将需要展示给用户的数据填充到html模板对应的表单中，生成完整的html页面返回给浏览器；如果不需要请求后台数据，则直接返回组装完成的html页面给浏览器，从而完成服务器端渲染生成页面的过程。
本发明实施例通过预定义路由转发规则、html模板文件、动态表单定义、表单校验规则等配置，通过路由转发用户请求，解析用户请求数据，在服务器端完成用户请求访问的页面文件的渲染，最终输出到浏览器供用户使用。区别于常见的浏览器端渲染模式，本发明使用服务器端渲染的形式，兼顾SEO友好、快速响应、客户端资源占用少等特点，同时满足了表单校验实时反馈，为用户带来了良好的交互体验。
如图2所示，本发明实施例还公开了一种基于动态表单校验的服务器渲染页面生成***，所述***包括：
模板及表单获取模块，用于浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
表单***模块，用于结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
表单校验模块，用于根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
页面生成模块，用于判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
预定义路由规则，当用户在浏览器端发起请求时，根据路由规则中用户请求URL路径，获取对应的html页面模板类型以及动态表单类型对象数组等数据。
***内置多个html模板，存放在服务器端的指定文件夹下，html模板定义需要生成的页面的框架元素，根据路由规则匹配html模板类型。通过自动查询指定文件夹下的html模板文件，完成读取内置html模板文件过程。
另外还内置多种表单定义，包括输入框、下拉选择框、单选框、复选框、日期选择框等，根据路由规则获取动态表单类型对象数组，结合获取到的html模板文件，将表单以固定顺序***到模板文件的指定位置。其中，表单定义内容包括表单名称、类型、表单属性以及初始数据等，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
设置多种表单验证规则，包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制等，根据获取的动态表单数据，为生成的表单绑定对应的验证规则，为用户输入提供实时合法性校验反馈。
通过获取到的html模板文件以及动态表单数据，判断如果存在需要请求后台数据的情况，往后台服务器发送给指定的http请求，解析后台服务器返回的数据，将需要展示给用户的数据填充到html模板对应的表单中，生成完整的html页面返回给浏览器；如果不需要请求后台数据，则直接返回组装完成的html页面给浏览器，从而完成服务器端渲染生成页面的过程。
本发明实施例还公开了一种基于动态表单校验的服务器渲染页面生成设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序，以实现所述的基于动态表单校验的服务器渲染页面生成方法。
本发明实施例还公开了一种可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现所述的基于动态表单校验的服务器渲染页面生成方法。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种基于动态表单校验的服务器渲染页面生成方法，其特征在于，所述方法包括以下操作：
浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
2.根据权利要求1所述的一种基于动态表单校验的服务器渲染页面生成方法，其特征在于，所述html页面模板定义需要生成的页面的框架元素；所述表单定义内容包括表单名称、类型、表单属性以及初始数据，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
3.根据权利要求1所述的一种基于动态表单校验的服务器渲染页面生成方法，其特征在于，所述表单验证规则包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制。
4.一种基于动态表单校验的服务器渲染页面生成***，其特征在于，所述***包括：
模板及表单获取模块，用于浏览器端发起请求，根据预定义的路由规则，获取对应的html页面模板类型以及动态表单类型对象数组；
表单***模块，用于结合表单定义，将动态表单数据以固定顺序***到html页面模板文件的指定位置；
表单校验模块，用于根据获取的动态表单数据，为生成的表单绑定对应的表单验证规则，对用户输入提供合法性校验；
页面生成模块，用于判断是否需要请求后台数据，如需要发送http请求至后台服务器，解析后台服务器返回的数据，将数据填充到html页面模板对应的表单中，生成完整的html页面；否则直接返回组装完成的html页面。
5.根据权利要求4所述的一种基于动态表单校验的服务器渲染页面生成***，其特征在于，所述html页面模板定义需要生成的页面的框架元素；所述表单定义内容包括表单名称、类型、表单属性以及初始数据，其中初始数据支持传入指定的数据，也支持通过http请求从后台服务器获取。
6.根据权利要求4所述的一种基于动态表单校验的服务器渲染页面生成***，其特征在于，所述表单验证规则包括不能为空白、日期格式、邮箱格式、手机号码格式以及输入字符限制。
7.一种基于动态表单校验的服务器渲染页面生成设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序，以实现根据权利要求1-3任意一项所述的基于动态表单校验的服务器渲染页面生成方法。
8.一种可读存储介质，其特征在于，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现根据权利要求1-3任意一项所述的基于动态表单校验的服务器渲染页面生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010565892.5A CN111859236B (zh) | 2020-06-19 | 2020-06-19 | 一种基于动态表单校验的服务器渲染页面生成方法与*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010565892.5A CN111859236B (zh) | 2020-06-19 | 2020-06-19 | 一种基于动态表单校验的服务器渲染页面生成方法与*** |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111859236A true CN111859236A (zh) | 2020-10-30 |
| CN111859236B CN111859236B (zh) | 2022-07-08 |
Family
ID=72986985
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010565892.5A Active CN111859236B (zh) | 2020-06-19 | 2020-06-19 | 一种基于动态表单校验的服务器渲染页面生成方法与*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111859236B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112464070A (zh) * | 2020-11-25 | 2021-03-09 | 银盛通信有限公司 | 基于Vue的表单配置方法、***、计算机设备及存储介质 |
| CN112465620A (zh) * | 2020-12-30 | 2021-03-09 | 广东金赋科技股份有限公司 | 基于动态表单与规则引擎的终端填单业务联动方法及装置 |
| CN112882707A (zh) * | 2021-03-09 | 2021-06-01 | 成都新希望金融信息有限公司 | 一种渲染方法、装置、存储介质及电子设备 |
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104182547A (zh) * | 2014-09-10 | 2014-12-03 | 北京浩瀚深度信息技术股份有限公司 | 一种服务器优化页面渲染的方法及web cache服务器 |
| CN109324788A (zh) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | 一种基于React和Nodejs的服务端渲染方法 |
| CN110096659A (zh) * | 2019-03-27 | 2019-08-06 | 北京三快在线科技有限公司 | 一种页面显示方法、装置、设备及可读存储介质 |
-
2020
- 2020-06-19 CN CN202010565892.5A patent/CN111859236B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104182547A (zh) * | 2014-09-10 | 2014-12-03 | 北京浩瀚深度信息技术股份有限公司 | 一种服务器优化页面渲染的方法及web cache服务器 |
| CN109324788A (zh) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | 一种基于React和Nodejs的服务端渲染方法 |
| CN110096659A (zh) * | 2019-03-27 | 2019-08-06 | 北京三快在线科技有限公司 | 一种页面显示方法、装置、设备及可读存储介质 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112464070A (zh) * | 2020-11-25 | 2021-03-09 | 银盛通信有限公司 | 基于Vue的表单配置方法、***、计算机设备及存储介质 |
| CN112465620A (zh) * | 2020-12-30 | 2021-03-09 | 广东金赋科技股份有限公司 | 基于动态表单与规则引擎的终端填单业务联动方法及装置 |
| CN112465620B (zh) * | 2020-12-30 | 2023-12-19 | 广东金赋科技股份有限公司 | 基于动态表单与规则引擎的终端填单业务联动方法及装置 |
| CN112882707A (zh) * | 2021-03-09 | 2021-06-01 | 成都新希望金融信息有限公司 | 一种渲染方法、装置、存储介质及电子设备 |
| CN112882707B (zh) * | 2021-03-09 | 2024-02-09 | 成都新希望金融信息有限公司 | 一种渲染方法、装置、存储介质及电子设备 |
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113010827B (zh) * | 2021-03-16 | 2024-03-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111859236B (zh) | 2022-07-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111859236B (zh) | 一种基于动态表单校验的服务器渲染页面生成方法与*** | |
| US6941512B2 (en) | Dynamic web content unfolding in wireless information gateways | |
| CN111782330B (zh) | 一种基于Web应用的页面数据获取方法、装置及设备 | |
| US7886218B2 (en) | Methods and devices for post processing rendered web pages and handling requests of post processed web pages | |
| CN106897251B (zh) | 富文本展示方法及装置 | |
| CN104714982A (zh) | 一种网页的加载方法和*** | |
| US20100218077A1 (en) | Modifying a markup language document which includes a clickable image | |
| US20140325337A1 (en) | Content request with http request-header rendering template that is independent of content storage location | |
| CN103428243A (zh) | 动态网页静态存储的实现方法、设备和*** | |
| CN111104587A (zh) | 网页显示方法、装置和服务器 | |
| WO2011050368A1 (en) | Configurable and dynamic transformation of web content | |
| CN109815430B (zh) | 请求处理方法、装置、数据处理服务器及可读存储介质 | |
| CN103365865A (zh) | 数据存储方法、数据下载方法及其装置 | |
| WO2021093673A1 (zh) | 邮件发送方法、装置、设备及计算机可读存储介质 | |
| CN104063401A (zh) | 一种网页样式地址合并的方法和装置 | |
| CN106790276A (zh) | 一种基于浏览器协议的跨浏览器数据交互方法和装置 | |
| US20120331110A1 (en) | Methods for implementing web services and devices thereof | |
| CN109783752A (zh) | 页面加载方法及装置、电子设备和计算机可读存储介质 | |
| CN110941950A (zh) | 接口文档的生成方法、装置、服务器及存储介质 | |
| CN108021594B (zh) | 一种网页展示方法、装置及*** | |
| CN103914293A (zh) | 生成页面的方法及服务器 | |
| US20100191766A1 (en) | Method and apparatus for information retrieval via electronic mail | |
| CN110874278A (zh) | 外部***的嵌入方法、工作流***、设备及存储介质 | |
| Vigo et al. | Evaluating web accessibility for specific mobile devices | |
| CN115951885A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |