CN104317925A - 一种高效的前端开发展示方法及系统 - Google Patents

一种高效的前端开发展示方法及系统 Download PDF

Info

Publication number
CN104317925A
CN104317925A CN201410601812.1A CN201410601812A CN104317925A CN 104317925 A CN104317925 A CN 104317925A CN 201410601812 A CN201410601812 A CN 201410601812A CN 104317925 A CN104317925 A CN 104317925A
Authority
CN
China
Prior art keywords
data
call request
json
module
request
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
CN201410601812.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.)
Beijing Si Tech Information Technology Co Ltd
Original Assignee
Beijing Si Tech Information Technology 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 Beijing Si Tech Information Technology Co Ltd filed Critical Beijing Si Tech Information Technology Co Ltd
Priority to CN201410601812.1A priority Critical patent/CN104317925A/zh
Publication of CN104317925A publication Critical patent/CN104317925A/zh
Pending legal-status Critical Current

Links

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/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

本发明涉及一种高效的前端开发展示方法及系统，其方法包括步骤1：客户端接收外部调用请求，并将调用请求发送到服务器端；步骤2：服务器端对调用请求进行解析，调用相关接口；步骤3：通过相关接口调用数据库中对应所述调用请求的后台数据；步骤4：将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；步骤5：对所述JSON数据进行解析并拼装成html格式的代码；步骤6：通过js将html格式的代码加入到调用请求对应的页面中进行展示。本发明将处理DOM文档放在客户端处理，将压力分散到每个客户端上，进而减少由大量用户访问服务器的压力，提高用户访问系统的流畅性和良好的用户体验。

Description

一种高效的前端开发展示方法及系统
技术领域
本发明涉及一种高效的前端开发展示方法及系统，属于计算机技术领域。
背景技术
随着web2.0系统的普遍流行，人们越来越重视效率问题，系统的流畅性越来越被看重。系统开发者们在处理系统的流畅性提出了很好的解决方案。目前客户端访问服务器得到的都是html格式的数据，数据量比较大，服务器响应慢，由于json是轻量级对象，相对比较小，将服务处理业务的压力分散到客户端中。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-2623rd Edition-December 1999)的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。
发明内容
本发明所要解决的技术问题是，针对现有技术的不足，提供一种减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好的高效的，提高前台开发效率，减少服务器访问响应时间，增加系统交互效果的前端开发展示方法。
本发明解决上述技术问题的技术方案如下：一种高效的前端开发展示方法，具体包括以下步骤：
步骤1：客户端接收外部调用请求，并将调用请求发送到服务器端；
步骤2：服务器端对调用请求进行解析，调用相关接口；
步骤3：通过相关接口调用数据库中对应所述调用请求的后台数据；
步骤4：将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
步骤5：对所述JSON数据进行解析并拼装成html格式的代码；
步骤6：通过js将html格式的代码加入到调用请求对应的页面中进行展示。
本发明的有益效果是：本发明将处理DOM文档放在客户端处理，将压力分散到每个客户端上，进而减少由大量用户访问服务器的压力，提高用户访问系统的流畅性和良好的用户体验；提高前台开发效率，减少服务器访问响应时间，增加系统交互效果。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步，所述步骤5具体包括以下步骤：
步骤5.1：对所述JSON数据通过js中的eval方法进行解析，得到json对象；
步骤5.2：对json对象进行遍历，将json对象拼装成html格式的代码。
采用上述进一步技术方案的有益效果是，由于后台返回的数据格式是JSON格式，减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好。
进一步，所述步骤1中的调用请求为post/get请求。
进一步，所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
JSON数据具有良好的可读性和便于快速编写的特性，其数据格式与js中的数组格式匹配。
本发明所要解决的技术问题是，针对现有技术的不足，提供一种减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好的高效的，提高前台开发效率，减少服务器访问响应时间，增加系统交互效果的前端开发展示系统。
本发明解决上述技术问题的技术方案如下：一种高效的前端开发展示系统，包括接收模块、解析模块、数据调用模块、转换模块、拼装模块和展示模块；
所述接收模块用于控制客户端接收外部调用请求，并将调用请求发送到服务器端；
所述解析模块用于控制服务器端对调用请求进行解析，调用相关接口；
所述数据调用模块用于通过相关接口调用数据库中对应所述调用请求的后台数据；
所述转换模块用于将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
所述拼装模块用于对所述JSON数据进行解析并拼装成html格式的代码；
所述展示模块用于通过js将html格式的代码加入到调用请求对应的页面中进行展示。
本发明的有益效果是：本发明将处理DOM文档放在客户端处理，将压力分散到每个客户端上，进而减少由大量用户访问服务器的压力，提高用户访问系统的流畅性和良好的用户体验；提高前台开发效率，减少服务器访问响应时间，增加系统交互效果。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步，所述拼装模块包括对象解析模块和对象拼装模块；
所述对象解析模块用于对所述JSON数据通过js中的eval方法进行解析，得到json对象；
所述对象拼装模块用于对json对象进行遍历，将json对象拼装成html格式的代码。
采用上述进一步技术方案的有益效果是，由于后台返回的数据格式是JSON格式，减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好。
进一步，所述接收模块中的调用请求为post/get请求。
进一步，所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
JSON数据具有良好的可读性和便于快速编写的特性，其数据格式与js中的数组格式匹配。
附图说明
图1为本发明所述的一种高效的前端开发展示方法流程图；
图2为本发明所述的一种高效的前端开发展示系统结构框图；
图3为本发明具体实施例所述的一种高效的前端开发展示方法的数据流向图。
附图中，各标号所代表的部件列表如下：
1、接收模块，2、解析模块，3、数据调用模块，4、转换模块，5、拼装模块，6、展示模块，51、对象解析模块，52、对象拼装模块。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
如图1所示，为本发明所述的一种高效的前端开发展示方法，具体包括以下步骤：
步骤1：客户端接收外部调用请求，并将调用请求发送到服务器端；
步骤2：服务器端对调用请求进行解析，调用相关接口；
步骤3：通过相关接口调用数据库中对应所述调用请求的后台数据；
步骤4：将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
步骤5：对所述JSON数据通过js中的eval方法进行解析，得到json对象；
步骤6：对json对象进行遍历，将json对象拼装成html格式的代码；
步骤7：通过js将html格式的代码加入到调用请求对应的页面中进行展示。
由于后台返回的数据格式是JSON格式，减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好。
所述步骤1中的调用请求为post/get请求。
所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
如图2所示，为本发明所述的一种高效的前端开发展示系统，包括接收模块1、解析模块2、数据调用模块3、转换模块4、拼装模块5和展示模块6；
所述接收模块1用于控制客户端接收外部调用请求，并将调用请求发送到服务器端；
所述解析模块2用于控制服务器端对调用请求进行解析，调用相关接口；
所述数据调用模块3用于通过相关接口调用数据库中对应所述调用请求的后台数据；
所述转换模块4用于将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
所述拼装模块5用于对所述JSON数据进行解析并拼装成html格式的代码；
所述展示模块6用于通过js将html格式的代码加入到调用请求对应的页面中进行展示。
所述拼装模块5包括对象解析模块51和对象拼装模块52；
所述对象解析模块51用于对所述JSON数据通过js中的eval方法进行解析，得到json对象；
所述对象拼装模块52用于对json对象进行遍历，将json对象拼装成html格式的代码。
由于后台返回的数据格式是JSON格式，减少了服务器端对DOM的解析，减少服务器的相应时间，使系统访问更为流畅，用户体验更好。
所述接收模块1中的调用请求为post/get请求。
所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
如图3所示，本发明具体实施例所述的一种高效的前端开发展示方法的数据流向图，以下是系统全站搜索的具体步骤：
步骤1：进入全站搜索页面，在输入框中输入将要搜索的内容，点击搜索按钮；
步骤2：对搜索按钮增加click事件监控，当出发点击事件时，获得到输入的内容，通过js方法向服务发送ajax请求；
步骤3：服务接收到请求，并获取要查询的字符串，调用查询接口，得到相关查询相关的数据对象；
步骤4：通过JSONObject对象中的fromObject()方法将返回数据转换成json格式；
步骤5：将response对象中的contentType设置成json，并打印步骤4中获得到的json数据；
步骤6：在ajax请求的回掉函数中，对响应的数据eval处理，得到json对象，对json进行遍历，拼装成html代码，再展示到搜索结果列表中，搜索完成。
本发明是系统开发者在开发过程中遇到需要处理小规模数据生成HTML时，在前台进行拼装HTML，而不是从后台服务器获得，减少与服务器交互及请求的响应大小，增加前台交互效果。由于JSON具有良好的可读性和便于快速编写的特性，其数据格式与js中的数组格式匹配，JSON的使用刚好满足需求。而使用JSON数据格式，还将相应的功能能够更好的在不同平台中交互数据。而本专利中通过对JSON数据的解析，在js内对html拼装，将处理DOM文档放在客户端处理，将压力分散到每个客户端上，进而减少由大量用户访问服务器的压力，提高用户访问系统的流畅性和良好的用户体验。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种高效的前端开发展示方法，其特征在于，具体包括以下步骤：
步骤1：客户端接收外部调用请求，并将调用请求发送到服务器端；
步骤2：服务器端对调用请求进行解析，调用相关接口；
步骤3：通过相关接口调用数据库中对应所述调用请求的后台数据；
步骤4：将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
步骤5：对所述JSON数据进行解析并拼装成htm l格式的代码；
步骤6：通过js将htm l格式的代码加入到调用请求对应的页面中进行展示。
2.根据权利要求1所述的一种高效的前端开发展示方法，其特征在于，所述步骤5具体包括以下步骤：
步骤5.1：对所述JSON数据通过js中的eva l方法进行解析，得到json对象；
步骤5.2：对json对象进行遍历，将json对象拼装成htm l格式的代码。
3.根据权利要求2所述的一种高效的前端开发展示方法，其特征在于，所述步骤1中的调用请求为post/get请求。
4.根据权利要求1-3任一项所述的一种高效的前端开发展示方法，其特征在于，所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
5.一种高效的前端开发展示系统，其特征在于，包括接收模块、解析模块、数据调用模块、转换模块、拼装模块和展示模块；
所述接收模块用于控制客户端接收外部调用请求，并将调用请求发送到服务器端；
所述解析模块用于控制服务器端对调用请求进行解析，调用相关接口；
所述数据调用模块用于通过相关接口调用数据库中对应所述调用请求的后台数据；
所述转换模块用于将所述后台数据转换成JSON数据，并将JSON数据返回到客户端；
所述拼装模块用于对所述JSON数据进行解析并拼装成htm l格式的代码；
所述展示模块用于通过js将htm l格式的代码加入到调用请求对应的页面中进行展示。
6.根据权利要求5所述的一种高效的前端开发展示系统，其特征在于，所述拼装模块包括对象解析模块和对象拼装模块；
所述对象解析模块用于对所述JSON数据通过js中的eva l方法进行解析，得到json对象；
所述对象拼装模块用于对json对象进行遍历，将json对象拼装成htm l格式的代码。
7.根据权利要求6所述的一种高效的前端开发展示系统，其特征在于，所述接收模块中的调用请求为post/get请求。
8.根据权利要求5-7任一项所述的一种高效的前端开发展示系统，其特征在于，所述通过相关接在通过request对象获取调用请求的参数，在对调用请求的业务逻辑进行处理，组装从数据库调用的后台数据。
CN201410601812.1A 2014-10-31 2014-10-31 一种高效的前端开发展示方法及系统 Pending CN104317925A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410601812.1A CN104317925A (zh) 2014-10-31 2014-10-31 一种高效的前端开发展示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410601812.1A CN104317925A (zh) 2014-10-31 2014-10-31 一种高效的前端开发展示方法及系统

Publications (1)

Publication Number Publication Date
CN104317925A true CN104317925A (zh) 2015-01-28

Family

ID=52373157

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410601812.1A Pending CN104317925A (zh) 2014-10-31 2014-10-31 一种高效的前端开发展示方法及系统

Country Status (1)

Country Link
CN (1) CN104317925A (zh)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104933487A (zh) * 2015-06-26 2015-09-23 南京邮电大学 一种面向药品追溯应用的药品查询优化方法
CN105989046A (zh) * 2015-02-03 2016-10-05 中国人寿保险股份有限公司 网站显示方法及系统、以及用户终端
CN106302747A (zh) * 2016-08-17 2017-01-04 北京乐美无限科技有限公司 一种面向互联网web前端开发的商业云平台
CN106709697A (zh) * 2016-11-29 2017-05-24 用友网络科技股份有限公司 Erp系统报表数据的转换方法及转换系统
CN106777352A (zh) * 2017-01-18 2017-05-31 深圳市雨云科技有限公司 数据访问方法及系统
CN107357817A (zh) * 2017-06-08 2017-11-17 长安大学 一种面向json的网页模块化设计及其异步加载方法
CN107944005A (zh) * 2017-12-07 2018-04-20 北京能源集团有限责任公司 一种数据展示方法及装置
CN108536443A (zh) * 2018-03-29 2018-09-14 杭州众焱科技有限公司 基于声明式的.net对象和多种数据格式自动相互转化的方法
CN109543131A (zh) * 2018-11-15 2019-03-29 国电南瑞科技股份有限公司 一种基于bs架构的配电终端模型维护工具的实现系统及方法
CN113961558A (zh) * 2021-10-08 2022-01-21 上海信宝博通电子商务有限公司 前端数据存储方法、装置及存储介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102279884A (zh) * 2011-08-05 2011-12-14 中国工商银行股份有限公司 基于Web页面进行数据采集和展现的方法、系统及Web服务器

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102279884A (zh) * 2011-08-05 2011-12-14 中国工商银行股份有限公司 基于Web页面进行数据采集和展现的方法、系统及Web服务器

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105989046A (zh) * 2015-02-03 2016-10-05 中国人寿保险股份有限公司 网站显示方法及系统、以及用户终端
CN104933487A (zh) * 2015-06-26 2015-09-23 南京邮电大学 一种面向药品追溯应用的药品查询优化方法
CN106302747A (zh) * 2016-08-17 2017-01-04 北京乐美无限科技有限公司 一种面向互联网web前端开发的商业云平台
CN106709697A (zh) * 2016-11-29 2017-05-24 用友网络科技股份有限公司 Erp系统报表数据的转换方法及转换系统
CN106777352A (zh) * 2017-01-18 2017-05-31 深圳市雨云科技有限公司 数据访问方法及系统
CN107357817B (zh) * 2017-06-08 2018-06-26 长安大学 一种面向json的网页模块化设计及其异步加载方法
CN107357817A (zh) * 2017-06-08 2017-11-17 长安大学 一种面向json的网页模块化设计及其异步加载方法
CN107944005A (zh) * 2017-12-07 2018-04-20 北京能源集团有限责任公司 一种数据展示方法及装置
CN107944005B (zh) * 2017-12-07 2021-05-11 北京能源集团有限责任公司 一种数据展示方法及装置
CN108536443A (zh) * 2018-03-29 2018-09-14 杭州众焱科技有限公司 基于声明式的.net对象和多种数据格式自动相互转化的方法
CN108536443B (zh) * 2018-03-29 2021-03-05 杭州众焱科技有限公司 基于声明式的.net对象和多种数据格式自动相互转化的方法
CN109543131A (zh) * 2018-11-15 2019-03-29 国电南瑞科技股份有限公司 一种基于bs架构的配电终端模型维护工具的实现系统及方法
CN113961558A (zh) * 2021-10-08 2022-01-21 上海信宝博通电子商务有限公司 前端数据存储方法、装置及存储介质

Similar Documents

Publication Publication Date Title
CN104317925A (zh) 一种高效的前端开发展示方法及系统
CN104765750B (zh) 一种输入法应用中的输入语言切换方法及装置
CN102117317B (zh) 一种基于语音技术的盲人互联网系统
CN102325191B (zh) 一种全自动的页面无刷新处理方法及框架
CN103077185A (zh) 一种基于对象的自定义扩展信息的方法
CN102880649A (zh) 一种个性化信息处理方法和系统
CA2438176A1 (en) Xml-based multi-format business services design pattern
CN105786880A (zh) 语音识别的方法、客户端及终端设备
CN102185901A (zh) 一种客户端报文转换方法
CN101819584B (zh) 轻量级智能网页内容解析方法
CN109445818A (zh) 基于大数据的页面更新方法及装置、电子设备、存储介质
CN102968307A (zh) 一种基于java的web开发中间件
KR20210002619A (ko) 네트워크 시스템에서 도메인-특정 모델의 생성
CN105404693B (zh) 一种基于需求语义的服务聚类方法
CN113467775A (zh) 一种生成页面的方法和装置
CN102520966A (zh) 一种代码提示方法和装置
CN108960672B (zh) 限额限次的风控方法、装置及计算机可读存储介质
CN117061495A (zh) 在基于音频的计算环境中执行请求的动作的平台选择
CN105069116A (zh) 一种将json串转化为数组的方法及系统
US20230185639A1 (en) Mapping application programming interface schemas with semantic representations
CN102306163A (zh) 一种基于b2b平台的动态集成技术
CN112784535A (zh) 一种json、xml格式数据智能转换为传统数据表格式的算法
CN103902248B (zh) 基于自然语言自动调度程序的智能微信银行系统及自然语言对计算机系统的智能调度方法
CN101039320A (zh) 用于提供客户应用和Web服务之间的接口的方法和系统
CN109739504B (zh) 一种根据后台配置自动生成h5业务办理页面的方法

Legal Events

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

Application publication date: 20150128

RJ01 Rejection of invention patent application after publication