CN108647029A - 一种Web前后端代码融合办法 - Google Patents
一种Web前后端代码融合办法 Download PDFInfo
- Publication number
- CN108647029A CN108647029A CN201810441491.1A CN201810441491A CN108647029A CN 108647029 A CN108647029 A CN 108647029A CN 201810441491 A CN201810441491 A CN 201810441491A CN 108647029 A CN108647029 A CN 108647029A
- Authority
- CN
- China
- Prior art keywords
- code
- web
- event
- document object
- object model
- 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
- 238000000034 method Methods 0.000 title claims abstract description 30
- 230000004927 fusion Effects 0.000 claims description 24
- 238000012545 processing Methods 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 5
- 230000008859 change Effects 0.000 claims description 4
- 239000000284 extract Substances 0.000 claims description 4
- 230000009471 action Effects 0.000 claims description 3
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 238000005316 response function Methods 0.000 claims description 3
- 238000012544 monitoring process Methods 0.000 claims description 2
- 230000006870 function Effects 0.000 description 15
- 238000000926 separation method Methods 0.000 description 4
- 238000007500 overflow downdraw method Methods 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000003032 molecular docking Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 206010013932 dyslexia Diseases 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000007115 recruitment Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Devices For Executing Special Programs (AREA)
Abstract
本发明涉及一种Web前后端代码融合办法，解决的是编写效率低下、交接成本高的技术问题，通过采用前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制的技术方案，较好的解决了该问题，可用于Web开发中。
Description
技术领域
本发明涉及Web前后端技术领域，具体涉及一种Web前后端代码融合办法。
背景技术
目前所有的Web开发中，均需要Web前端开发和后端开发，前后端代码分别运行于用户的浏览器环境和服务器环境上，是高度分离的，前后端的信息交换全部需要开发者手动编写基于HTTP、Websocket等网络协议的请求来完成。因为前后端代码语言基本不互通，代码逻辑高度分离。即便完成诸如注册、登录等简单操作时，也需要前后端双方对用户数据进行重复的验证，效率十分低下。前后端代码的分离，导致代码执行逻辑无法融合，并导致前后端对接的成本十分高昂。
现有的Web开发方案基本分为两大类：第一类：前后端采用不同的编程语言，如：前端语言采用JavaScript、VBScript，后端语言采用Java、PHP、Python、C#等。采用本方案的突出缺点是：前后端完全无法读懂对方的代码逻辑、双方难以对接、维护同一个功能需要两套语言的代码逻辑。针对个人开发者来说，学习两门语言的难度更高；对于公司来说，招聘掌握不同语言的程序员成本更高。第二类：前后端均采用基于JavaScript的编程语言，如：前端采用JavaScript，后端采用Node.JS(一种基于JavaScript语言的后端编程语言)。采用这类方案能缓解前后端代码相互的阅读障碍。但即使是语法相近，由于没有一套自动化的前后端信息交换方案，使得前后端代码逻辑仍然高度分离。
现有的Web开发存在编写效率低下、交接成本高、学习成本高、代码可读性差的，所有提供一种Web前后端对接简单的Web前后端代码融合办法就很有必要。
发明内容
本发明所要解决的技术问题是现有技术中存在的解决Web开发中需要前端和后端不同代码、编写效率低下、交接成本高的技术问题。提供一种新的Web前后端代码融合办法，该Web前后端代码融合办法具有编写效率高、交接成本低、学习成本低、代码可读性稿的特点。
为解决上述技术问题，采用的技术方案如下：
一种Web前后端代码融合办法，所述Web前后端代码融合办法包括：
步骤1，编译融合代码形成编译文件存入融合代码端，融合代码端接收Web前端发送的预请求，预请求包括事件名称和触发标签的ID；
步骤2，融合代码端将需要取值的对象属性和方法以数组形式返回给Web前端；
步骤3，融合代码端接收Web前端发送的正式请求，正式请求包括Web前端依据步骤2的数组逐一从Web前端HTML页面所有文档对象模型标签中匹配出的对应值；
步骤4，融合代码端依据正式请求创建各个文档对象模型对象，使用步骤3得到的对应值初始化各个文档对象模型对象；
步骤5，融合代码端执行事件处理函数，判断各个文档对象模型对象是否有变更，将有变更的文档对象模型对象的属性和对应的对象方法返回给Web前端，更新相应的对应文档对象模型，渲染更新标签，并执行对应的Web前端方法。
上述方案中，为优化，进一步地，所述编译融合代码是基于事件响应的开发编译。
进一步地，所述开发编译包括：
步骤A，读取Web前端HTML页面，对Web前端HTML页面进行文档对象模型树分析，提取出含ID属性的文档对象模型标签并读取标签类别；
步骤B，将开发者的代码转换为抽象语法树，定义Web前端发起的动作为事件；
步骤C，提取每一个事件响应函数中使用到的文档对象模型对象，并将所述文档对象模型对象的赋值属性、调用的属性、调用的函数及调用参数保存在编译文件中，其中每一个事件响应函数对应一个数组进行保存；
步骤D,根据步骤A所述Web前端HTML页面中所有被调用到的文档对象模型对象，生成对象初始化的代码写入到编译文件；
步骤E，保存一个处理类到编译文件；
步骤F，向Web前端的HTML页面中插入进行信息交换的代码；
步骤G，编写事件处理函数和逻辑代码存入编译文件。
进一步地，所述处理类包括初始化方法、事件预响应、事件响应和结果返回。
进一步地，所述进行信息交换的代码包含监听事件、触发事件处理函数、对象读取和对象赋值渲染。
进一步地，Web前端HTML中页面的文档对象模型标签是通过名为ID的对象来访问的。
本发明的有益效果：本发明通过前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制，使得完整的Web开发仅需一种语言的一套代码逻辑，由此大幅度降低Web开发的学习成本，极大提高代码编写效率，有效提升代码可读性和维护便利性。由于可以自动处理请求的发送、返回和视图的渲染，结合前后端代码融合的特性，开发者不再需要关注请求的处理，而需要关注Event的触发。
附图说明
下面结合附图和实施例对本发明进一步说明。
图1，实施例1中开发编译过程示意图。
图2，实施例1中使用时执行过程示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
实施例1
本实施例提供一种Web前后端代码融合办法，如图2，所述Web前后端代码融合办法包括：
1、用户打开网页访问前端超级文本标记语言(HTML)文件。
2、用户在浏览器触发页面中的某一事件(Event)，JavaScript代码自动将该事件名和触发标签的标识符(ID)向融合代码端发送一次预请求。
3、融合代码端接收到预请求后，融合代码端根据编译开发生成的数组进行分析、计算，将需要取值的对象属性和方法返回给前端。
4、前端JavaScript根据返回的数组，逐一从DOM标签中取得相应的值。例如：$hello->value会令JavaScript寻找ID为hello的标签并取得其内容。
5、前端JavaScript将取得的值再次向融合代码端发送一次正式请求。
6、融合代码先进行各个DOM对象的创建，再将获取到的值用来初始化各个对象。
7、融合代码执行用户编写的Event处理函数。执行结束后，执行结果返回函数，将所有存在变更的对象属性和执行到的对象方法返回给前端。
8、前端根据返回结果，自动更新相应的DOM标签，并执行相应的前端方法。
其中，开发编译过程如图1，包括：
1、读取开发者提供的网站前端超级文本标记语言即HTML页面，对其进行DOM树分析，提取出其中由用户添加的含有ID属性的DOM标签并读取其标签类别，例如文本<p>、输入框<input>、按钮<button>等。
2、读取开发者提供的前后端融合的代码。利用代码的词法分析工具，将开发者的代码转换为抽象语法树(AST)。
在Web项目中，用户功能的完成都遵从以下流程：先由前端发起特定的动作，称之为Event；再传递相应请求给后端；后端再根据请求执行相应的代码；最后将代码的执行结果返回给前端，前端根据结果渲染试图。
在本实施例中，由于可以自动处理请求的发送、返回和视图的渲染，结合前后端代码融合的特性，开发者不再需要关注请求的处理，而需要关注Event的触发。
以页面为单位，一个页面对应一个类(Class)，而类中需要包含对各个Event的响应函数以及当前页面需要使用的变量。
在代码编写过程中，可以通过名为ID的对象来访问HTML中页面的DOM标签。例如，若HTML中存在“<input id＝”hello”>”的输入框，则在PHP语言中，可以通过$hello->value获取用户输入的内容，$hello->visible取得输入框的显示状态。也可以通过给对象的属性赋值来更改相应DOM标签的属性。
3、提取每一个Event响应函数中使用到的DOM对象，并将该对象赋值、调用的属性和调用的函数和参数保存在编译文件中，每一个响应函数对应一个数组进行保存。
4、根据该页面(即对应的Class类)中所有被调用到的DOM对象，生成对象初始化的代码写入到编译文件。例如，“<input id＝”hello”>”对应一个input对象，input类拥有value(输入框的值)、visible(是否可见)、type(输入数据的类型)等属性，则在编译文件的初始化函数中会有如下语句$hello＝new Input()；来初始化这个对象。
5、向编译文件中保存一个用于自动处理请求、返回结果的类。该类包含四个核心方法：初始化、Event预响应、Event响应和结果返回。
6、向网站前端的HTML中插入一段用于与融合代码进行信息交换的JavaScript代码。该JavaScript代码包含四个核心方法：监听Event、触发Event处理函数、对象读取和对象赋值渲染。
7、将用户编写的Event处理函数和逻辑代码存入编译文件。
本实施例通过前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制，使得完整的Web开发仅需一种语言的一套代码逻辑，由此大幅度降低Web开发的学习成本，极大提高代码编写效率，有效提升代码可读性和维护便利性。
尽管上面对本发明说明性的具体实施方式进行了描述，以便于本技术领域的技术人员能够理解本发明，但是本发明不仅限于具体实施方式的范围，对本技术领域的普通技术人员而言，只要各种变化只要在所附的权利要求限定和确定的本发明精神和范围内，一切利用本发明构思的发明创造均在保护之列。
Claims (6)
1.一种Web前后端代码融合办法，其特征在于：所述Web前后端代码融合办法包括：
步骤1，编译融合代码形成编译文件存入融合代码端，融合代码端接收Web前端发送的预请求，预请求包括事件名称和触发标签的ID；
步骤2，融合代码端将需要取值的对象属性和方法以数组形式返回给Web前端；
步骤3，融合代码端接收Web前端发送的正式请求，正式请求包括Web前端依据步骤2的数组逐一从Web前端HTML页面所有文档对象模型标签中匹配出的对应值；
步骤4，融合代码端依据正式请求创建各个文档对象模型对象，使用步骤3得到的对应值初始化各个文档对象模型对象；
步骤5，融合代码端执行事件处理函数，判断各个文档对象模型对象是否有变更，将有变更的文档对象模型对象的属性和对应的对象方法返回给Web前端，更新相应的对应文档对象模型，渲染更新标签，并执行对应的Web前端方法。
2.根据权利要求1所述的Web前后端代码融合办法，其特征在于：所述编译融合代码是基于事件响应的开发编译。
3.根据权利要求2所述的Web前后端代码融合办法，其特征在于：所述开发编译包括：
步骤A，读取Web前端HTML页面，对Web前端HTML页面进行文档对象模型树分析，提取出含ID属性的文档对象模型标签并读取标签类别；
步骤B，将开发者的代码转换为抽象语法树，定义Web前端发起的动作为事件；
步骤C，提取每一个事件响应函数中使用到的文档对象模型对象，并将所述文档对象模型对象的赋值属性、调用的属性、调用的函数及调用参数保存在编译文件中，其中每一个事件响应函数对应一个数组进行保存；
步骤D,根据步骤A所述Web前端HTML页面中所有被调用到的文档对象模型对象，生成对象初始化的代码写入到编译文件；
步骤E，保存一个处理类到编译文件；
步骤F，向Web前端的HTML页面中插入进行信息交换的代码；
步骤G，编写事件处理函数和逻辑代码存入编译文件。
4.根据权利要求3所述的Web前后端代码融合办法，其特征在于：所述处理类包括初始化方法、事件预响应、事件响应和结果返回。
5.根据权利要求3所述的Web前后端代码融合办法，其特征在于：所述进行信息交换的代码包含监听事件、触发事件处理函数、对象读取和对象赋值渲染。
6.根据权利要求3所述的Web前后端代码融合办法，其特征在于：Web前端HTML中页面的文档对象模型标签是通过名为ID的对象来访问的。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810441491.1A CN108647029B (zh) | 2018-05-10 | 2018-05-10 | 一种Web前后端代码融合办法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810441491.1A CN108647029B (zh) | 2018-05-10 | 2018-05-10 | 一种Web前后端代码融合办法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108647029A true CN108647029A (zh) | 2018-10-12 |
| CN108647029B CN108647029B (zh) | 2019-05-14 |
Family
ID=63754078
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810441491.1A Active CN108647029B (zh) | 2018-05-10 | 2018-05-10 | 一种Web前后端代码融合办法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108647029B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110147656A (zh) * | 2019-05-10 | 2019-08-20 | 重庆迅燕科技有限公司 | 一种Node.js的代码加密及底层运行时解密办法 |
| CN112416611A (zh) * | 2019-08-22 | 2021-02-26 | 北京国双科技有限公司 | 前端代码在后端实现的方法、装置、服务器及存储介质 |
| CN113254023A (zh) * | 2021-05-14 | 2021-08-13 | 网易（杭州）网络有限公司 | 对象读取方法、装置和电子设备 |
| WO2023226970A1 (zh) * | 2022-05-24 | 2023-11-30 | 李佳璘 | 一种前端语言和后端语言互相嵌入的开发方法 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101963987A (zh) * | 2010-09-30 | 2011-02-02 | 百度在线网络技术（北京）有限公司 | 一种用于生成网页文件和加载网页文件的方法与设备 |
| CN104461484A (zh) * | 2013-09-16 | 2015-03-25 | 腾讯科技（深圳）有限公司 | 前端模板的实现方法和装置 |
| US20150286677A1 (en) * | 2007-11-01 | 2015-10-08 | Chi-Hsien Chiu | Analyzing event streams of user sessions |
| CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
| CN105808237A (zh) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | 页面渲染方法和页面渲染系统 |
| CN105824900A (zh) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | 一种基于react-native的页面展示系统 |
| CN106445505A (zh) * | 2016-08-31 | 2017-02-22 | 恒生电子股份有限公司 | 一种代码处理方法及装置 |
-
2018
- 2018-05-10 CN CN201810441491.1A patent/CN108647029B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150286677A1 (en) * | 2007-11-01 | 2015-10-08 | Chi-Hsien Chiu | Analyzing event streams of user sessions |
| CN101963987A (zh) * | 2010-09-30 | 2011-02-02 | 百度在线网络技术（北京）有限公司 | 一种用于生成网页文件和加载网页文件的方法与设备 |
| CN104461484A (zh) * | 2013-09-16 | 2015-03-25 | 腾讯科技（深圳）有限公司 | 前端模板的实现方法和装置 |
| CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
| CN105808237A (zh) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | 页面渲染方法和页面渲染系统 |
| CN105824900A (zh) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | 一种基于react-native的页面展示系统 |
| CN106445505A (zh) * | 2016-08-31 | 2017-02-22 | 恒生电子股份有限公司 | 一种代码处理方法及装置 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110147656A (zh) * | 2019-05-10 | 2019-08-20 | 重庆迅燕科技有限公司 | 一种Node.js的代码加密及底层运行时解密办法 |
| CN110147656B (zh) * | 2019-05-10 | 2020-10-30 | 重庆迅燕科技有限公司 | 一种Node.js的代码加密及底层运行时解密办法 |
| CN112416611A (zh) * | 2019-08-22 | 2021-02-26 | 北京国双科技有限公司 | 前端代码在后端实现的方法、装置、服务器及存储介质 |
| CN113254023A (zh) * | 2021-05-14 | 2021-08-13 | 网易（杭州）网络有限公司 | 对象读取方法、装置和电子设备 |
| CN113254023B (zh) * | 2021-05-14 | 2023-08-11 | 网易（杭州）网络有限公司 | 对象读取方法、装置和电子设备 |
| WO2023226970A1 (zh) * | 2022-05-24 | 2023-11-30 | 李佳璘 | 一种前端语言和后端语言互相嵌入的开发方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108647029B (zh) | 2019-05-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108647029B (zh) | 一种Web前后端代码融合办法 | |
| ES2280283T3 (es) | Objetos de control del lado del servidor para el procesamiento de elementos de la interfaz de usuario del lado del cliente. | |
| Darie | AJAX and PHP: building responsive web applications | |
| CN107729475A (zh) | 网页元素采集方法、装置、终端与计算机可读存储介质 | |
| CN111950239B (zh) | Schema文档生成方法、装置、计算机设备和介质 | |
| CN106341444A (zh) | 数据访问方法和装置 | |
| CN116955674B (zh) | 一种通过LLM生成图数据库语句的方法及web装置 | |
| CN108595171A (zh) | 对象的模型生成方法、装置、设备及存储介质 | |
| Vella et al. | libNeuroML and PyLEMS: using Python to combine procedural and declarative modeling approaches in computational neuroscience | |
| CN112463152A (zh) | 一种基于ast的网页适配方法及装置 | |
| US7953886B2 (en) | Method and system of receiving and translating CLI command data within a routing system | |
| CN114138244A (zh) | 模型类文件自动生成方法、装置、存储介质及电子设备 | |
| CN114398138B (zh) | 界面生成方法、装置、计算机设备和存储介质 | |
| US20210390258A1 (en) | Systems and methods for identification of repetitive language in document using linguistic analysis and correction thereof | |
| CN106371987A (zh) | 测试方法和装置 | |
| Rubano et al. | Making accessibility accessible: strategy and tools | |
| CN110134394A (zh) | 一种支持多终端的网页界面生成方法 | |
| Li et al. | Breeze/adl: Graph grammar support for an xml-based software architecture description language | |
| KR101228877B1 (ko) | 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법 | |
| Sermet et al. | A Generalized Web Component for Domain-Independent Smart Assistants | |
| CN113761147A (zh) | 基于逻辑编辑器的问卷题目显示方法、装置及电子设备 | |
| Keith | Bulletproof Ajax | |
| Vlaovič et al. | Automated generation of Promela model from SDL specification | |
| Schröder et al. | An Easy & Collaborative RDF Data Entry Method using the Spreadsheet Metaphor | |
| Jin | Image information collection system based on Python Web crawler technology |
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 | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240129 Address after: Room 304, No. 198 Hexi Street, Jianye District, Nanjing City, Jiangsu Province, 210019 Patentee after: Nanjing Yunliantu Internet of Things Technology Co.,Ltd. Country or region after: China Address before: Room 512, innovation and entrepreneurship incubation base, Chongqing University of Posts and telecommunications, No.2 Chongwen Road, Nan'an District, Chongqing 400065 Patentee before: CHONGQING XUNYAN TECHNOLOGY Co.,Ltd. Country or region before: China |
|
| TR01 | Transfer of patent right |