CN114296779A - 一种基于spa的代码编辑方法及系统 - Google Patents

Abstract

本发明涉及代码编辑技术领域，公开了一种基于SPA的代码编辑方法，包括：将菜单服务模块和在线编辑服务模块的数据相关联；获取修改过的版本代码、最新代码和空代码；在代码编译模块编译代码；对编译后的代码进行二次校验；判断是否出现冲突代码并进行处理；通过发布机制编辑好的代码数据进行发布，并通过界面渲染进行展示。本发明还公开了一种基于SPA的代码编辑系统，本发明用于实现多人协作的实时代码编辑和预览功能，摆脱本地的Web前端开发环境，省略代码构建和发布的过程，大大降低Web前端开发的门槛，提升开发及部署的效率。

Description

一种基于SPA的代码编辑方法及系统

技术领域

本发明涉及代码编辑技术领域，具体地说，是一种基于SPA的代码编辑方法及系统，用于实现多人协作的实时代码编辑和预览功能，摆脱本地的Web前端开发环境，省略代码构建和发布的过程，大大降低Web前端开发的门槛，提升开发及部署的效率。

背景技术

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

SPA具有良好的交互体验，能够前后端分离，还能够减轻服务器的压力，但是目前，传统SPA的开发部署流程，有以下几个缺点：

首先，SPA有且只有一个HTML文件，所有的用户交互和内容呈现是通过动态更新页面内容的方式来呈现，不会重新加载整个网页，只是局部更新。因此，项目编译时需要一次性的编译整个项目，一次性将所有资源文件打包到一起，从而每次发布的过程都是全量发布，但其中存在依赖的映射关系，很难做到完全的解耦，造成当某个功能还没开发完成或没通过测试时也会发布上去。即使能够打包为多个文件，想要实现单独发布的特定功能，需要通过版本控制工具的切换分支或者历史回溯功能组合出需要的代码版本，然后再进行全量发布，这样的操作方式繁琐且易出错。

其次，SPA通常无法直接运行，需要配合前端构建工具构建之后才能运行，但由于代码体量较大，构建时间也较长，Web前端开发过程中需要频繁的查看代码修改后的效果，因此在等待项目构建和浏览器刷新上花了很多时间，大大降低了工作的效率，即使目前存在HMR(模块热替换Hot Module Replacement)等技术，但依然无法完全摆脱频繁的应用构建和浏览器刷新。

最后，传统的大型SPA前端项目，需要大量人员协作开发，代码质量参差不齐，通常SPA会指定一套复杂的开发流程，比如强制统一使用特定的IDE(集成开发环境IntegratedDevelopment Environment),指定代码注释规范，commit前后人为校验等方式，从而在

中的各个节点卡控质量，但由于IDE通常安装在本机上，个人之间的配置会出现差异，导致代码规范无法高度的统一，常用的版本控制工具无法在提交的时候检查代码是否合格，并禁止不合格的代码提交，而自定义的代码提示需要对IDE做二次开发，存在开发难度较大的问题，即使投入大量人力开发但代码质量提升仍不明显。

因此，为了解决以上技术问题，亟需一种技术方法，能够实现多人协作的实时代码编辑和预览功能，从而摆脱本地的Web前端开发环境，省略代码构建和发布的过程，大大降低Web前端开发的门槛，提升开发及部署的效率。

发明内容

本发明的目的在于提供一种基于SPA的代码编辑方法及系统，能够实现多人协作的实时代码编辑和预览功能，从而摆脱本地的Web前端开发环境，省略了代码构建和发布的过程，大大降低Web前端开发的门槛，提升开发及部署的效率。

本发明通过下述技术方案实现：一种基于SPA的代码编辑方法，包括以下步骤：

步骤S1.在菜单服务模块创建一个新的功能菜单，在功能菜单和在线编辑服务模块的publish表中创建一条数据，生成空代码，并将菜单服务模块和在线编辑服务模块的数据相关联；

步骤S2.在菜单服务模块编辑一个已有功能菜单的代码时，获取到在线编辑服务模块中所关联的代码，判断当前登录的用户是否有自己修改过的版本代码，如果是，获取自己提交过的最近一版代码，如果否，获取所有用户commit表的最新代码；

步骤S3.在代码编译模块编译步骤S1和步骤S2获取的代码，进行commit或保存操作，当进行commit操作时，进入步骤S4，当进行保存操作时，进入步骤S8；

步骤S4.对编译后的代码进行二次校验，通过一次校验对代码的语法和格式进行检查，判断代码的语法和格式是否正确，如果是进入二次校验，如果否，返回步骤S3；

在二次校验中根据预设的代码格式规则对通过一次校验的代码进行校验，获取当前编辑数据；

步骤S5.根据当前编辑数据的PUBLISH_ID，获取commit表中最新的commit_VERSION，判断当前编辑的数据的commit_VERSION是否为最新，如果是，进入步骤S7，如果否，进判断是否存在冲突的代码行，如果是，返回步骤S3进行处理，处理冲突代码，如果否，直接进行merge操作；

步骤S6.在commit表中插入一条新数据，令commit_VERSION向前递增；

步骤S7.在dev表中插入一条新数据，用于保存历史提交记录；

步骤S8.通过发布机制对步骤S1-步骤S7编辑好的代码数据进行发布，并通过界面渲染进行展示。

为了更好地实现本发明，进一步地，步骤S1包括：

功能菜单中的菜单数据包括菜单名称、菜单路由和父级菜单；

在线编辑服务模块在publish表创建的数据包括唯一标识符ID、用于做版本控制的commit_VERSION、储存发布后的JavaScript代码CODE和用于记录发布历史的相关字段；

根据专门的字段CODE_ID储存在线编辑服务模块中新生成数据的ID，并关联两个服务模块的数据。

在本技术方案中，基于SPA的代码编辑方法是基于代码编译模块、宿主项目、基于Node.js的Server模块等模块来实现的，本技术方案主要对实现的必要技术手段进行了描述。为了实现代码编辑方法，本技术方案可以使用web前端宿主项目进行渲染，宿主项目采用目前SPA项目常用的Angular、Vue、React等框架搭建，项目内需提供丰富的内置UI组件，比如常用的有表单控件、表格、树形组件、模态窗口等，常用的SPA框架往往会有官方配套的组件库，也可以基于组件库进行二次开发或另行开发个性化的组件，在组件的基础上能够进行自由组合，搭建页面模板。项目中还有一套渲染引擎，能够将这些模板的配置文件渲染出实实在在的功能页面。本技术方案中的代码编译模块能够实现Web代码的在线编辑，代码编译模块包括代码编辑器、代码的校验、预览、代码合并和代码提交等功能。代码编辑器是基于Monaco Editor进行的二次开发，主要开发内容是对代码提示进行了客制化，能够根据当前的宿主项目的不同而选择合适的代码提示。代码校验会在代码编辑过程中，对于有语法错误的代码，或者不符合代码格式规范的代码抛出红色警告提示，同时在做commit操作时，也会进行强制校验，要求用户处理所以的问题代码后才允许提交，从而在一定程度上提升了代码质量。预览功能主要包括代码编辑器，代码编译器和宿主项目的交互，大致的原理为代码编辑调用编译器的接口编译当前的代码，然后通过浏览器的BroadcastChannelAPI，和宿主项目进行交互，将编译后的代码发送给宿主项目，然后在宿主项目的渲染器中渲染成页面。代码合并会在commit代码时发生，如果当前commit的代码不是最新版本，会获取最新版的代码进行比对，如果出现冲突代码，需要用户手动处理冲突的代码。代码提交包括代码保存和代码commit，会调用Server模块的储存API。本技术方案还会使用代码实时编译功能对JavaScript代码进行编译，同时也支持JavaScript的预编译语言TypeScript的编译，采用babel作为代码转换工具，转换为向后兼容的JavaScript语法，同时使用内置的插件对代码做压缩和混淆的处理，减轻项目上线后对于网络带宽的压力，加强了源代码的安全性。Server模块提供了代码编译、历史查询、代码储存的API。负责对接在线编辑器的代码编译、预览、保存、历史查询等功能及正式环境的代码获取。Database用于储存编辑过程中产生的历史数据，用于进行版本控制的数据，及发布到生产环境的数据。代码编译模块也可扮演为工具角色，部署时一个代码在线编辑服务可以同时依附多个宿主系统。若想要关闭在线编辑功能，可以直接停掉在线编辑器即可。

为了更好地实现本发明，进一步地，步骤S2包括：

菜单服务模块根据当前菜单表中记录的CODE_ID获取到在线编辑服务中所关联的代码，所述代码包括publish表、commit表和dev表中的数据，并根据dev表中是否有用户提交过关于该菜单的历史提交数据判断当前登录的用户是否自己修改过版本代码，如果是，在dev表中获取所述用户最近一次的提交记录，并通过返回CODE字段作为代码编译模块的编辑代码，如果否，自动获取commit表中commit_VERSION的最新的数据并通过返回CODE字段作为代码编译模块的编辑代码；

在线编辑服务模块在commit表中生成一条新数据包括唯一标识符ID、用于储存publish表中ID的字段PUBLISH_ID、用于做版本控制的commit_VERSION、用于储存commit操作提交的JavaScript代码CODE和用于记录发布历史的相关字段。

为了更好地实现本发明，进一步地，步骤S3包括：

根据宿主项目给代码编译模块的在线编辑器发送当前宿主项目的信息，在线编辑器会根据所述信息选择当前编辑的语言，加载所需的依赖代码，用于做代码的提示和校验；

所述信息包括宿主项目的基础框架类型信息、当前的项目版本信息和第三方的依赖信息。

为了更好地实现本发明，进一步地，步骤S4中二次校验的方法包括：

步骤S4.1.将通过一次校验的代码转换成AST语法树，并将代码格式化；

步骤S4.2.在表单组件中根据AST语法树获取对应的表单的节点，遍历所述节点的name，找出重复的表单项，在代码编辑器中显示红色错误提示；

步骤S4.3.在宿主项目中根据AST语法树进行前后关联性校验、未使用项校验和其他校验，找出对应的不存在的被关联项、未使用项和其他不存在项，并在代码编辑器中显示红色错误提示。

为了更好地实现本发明，进一步地，步骤S5中判断是否存在冲突的代码行的方法包括：

根据当前编辑的数据的PUBLISH_ID，获取commit表中最新的commit_VERSION的代码CODE字段代码；

将当前数据的commit_VERSION更新至最新，然后和当前编辑过的数据进行比对，判断是否存在冲突的代码行的方法。

为了更好地实现本发明，进一步地，步骤S8中的发布机制包括手动发布和定时发布。

为了更好地实现本发明，进一步地，步骤S8中进行界面渲染的方法包括：

根据菜单保存的CODE_ID，获取到publish表中所述菜单的JavaScript代码，在宿主项目的渲染器中进行渲染展示。

为了更好地实现本发明，进一步地，本发明还提供了一种基于SPA的代码编辑系统，包括菜单服务模块、在线编辑服务模块、代码编译模块和发布展示模块，其中：

菜单服务模块，用于创建一个新的功能菜单；用于编辑一个已有功能菜单的代码时，获取到在线编辑服务模块中所关联的代码，判断当前登录的用户是否有自己修改过的版本代码，如果是，获取自己提交过的最近一版代码，如果否，获取所有用户commit表的最新代码；

在线编辑服务模块，用于提供publish表、commit表和dev表，用于在publish表中创建一条数据，生成空代码，用于在commit表中插入一条新数据，令commit_VERSION向前递增，用于在在dev表中插入一条新数据，用于保存历史提交记录；

代码编译模块，用于编译代码，进行commit或保存操作，进行commit操作时和保存操作；用于对编译后的代码进行二次校验，通过一次校验对代码的语法和格式进行检查，判断代码的语法和格式是否正确；用于在二次校验中根据预设的代码格式规则对通过一次校验的代码进行校验，获取当前编辑数据，用于根据当前编辑数据的PUBLISH_ID，获取commit表中最新的commit_VERSION，判断当前编辑的数据的commit_VERSION是否为最新；用于处理冲突代码；用于直接进行merge操作；用于在commit表中插入一条新数据，令commit_VERSION向前递增；用于在dev表中插入一条新数据，用于保存历史提交记录；

发布展示模块，用于通过发布机制对编辑好的代码数据进行发布，并通过界面渲染进行展示。

本发明与现有技术相比，具有以下优点及有益效果：

(1)本发明应用于Web前端SPA(Single Page Web Application)应用的代码开发及管理，通过内置的Web端代码编辑器和代码编译器以及版本控制系统，实现了可多人协作的实时代码编辑和预览功能，从而摆脱了本地的Web前端开发环境，省略了代码构建和发布的过程，大大降低了Web前端开发的门槛，提升了开发及部署的效率；

(2)大型的SPA类型的web前端系统，需要多人协作开发，频繁的上版和迭代，可以使用本系统进行管理代码和功能开发，使其摆脱传统的开发流程，能够更加灵活的发布和更严格的代码管控；

(3)本系统可以作为代码管理开发中枢系统，同时管理多个项目的开发和部署；

(4)对于有增量发布和版本回退需求的项目，可以使用本系统进行开发和部署。

附图说明

本发明结合下面附图和实施例做进一步说明，本发明所有构思创新应视为所公开内容和本发明保护范围。

图1为本发明提供的一种基于SPA的代码编辑方法的流程图。

图2为本发明提供的一种基于SPA的代码编辑方法中代码开发到发布的流程图。

图3为本发明提供的一种基于SPA的代码编辑方法中代码编译器在宿主项目和发布过程中的使用流程图。

图4为本发明提供的一种基于SPA的代码编辑方法中宿主项目创建/修改代码到获取代码渲染的流程图。

图5为本发明提供的一种基于SPA的代码编辑方法中宿主前端项目的架构示意图。

图6为本发明提供的一种基于SPA的代码编辑方法中前端开发部署流程图和传统SPA流程图的对比示意图。

具体实施方式

为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；也可以是直接相连，也可以是通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

实施例1：

本实施例的一种基于SPA的代码编辑方法，如图1所示，本实施例提供的基于SPA的代码编辑方法是基于代码编译模块、宿主项目、基于Node.js的Server模块等模块来实现的，本技术方案主要对实现的必要技术手段进行了描述。为了实现代码编辑方法，本技术方案可以使用web前端宿主项目进行渲染，宿主项目采用目前SPA项目常用的Angular、Vue、React等框架搭建，项目内需提供丰富的内置UI组件，比如常用的有表单控件、表格、树形组件、模态窗口等，常用的SPA框架往往会有官方配套的组件库，也可以基于组件库进行二次开发或另行开发个性化的组件，在组件的基础上能够进行自由组合，搭建页面模板。项目中还有一套渲染引擎，能够将这些模板的配置文件渲染出实实在在的功能页面。本实施例中的代码编译模块能够实现Web代码的在线编辑，代码编译模块包括代码编辑器、代码的校验、预览、代码合并和代码提交等功能。代码编辑器是基于Monaco Editor进行的二次开发，主要开发内容是对代码提示进行了客制化，能够根据当前的宿主项目的不同而选择合适的代码提示。代码校验会在代码编辑过程中，对于有语法错误的代码，或者不符合代码格式规范的代码抛出红色警告提示，同时在做commit操作时，也会进行强制校验，要求用户处理所以的问题代码后才允许提交，从而在一定程度上提升了代码质量。预览功能主要包括代码编辑器，代码编译器和宿主项目的交互，大致的原理为代码编辑调用编译器的接口编译当前的代码，然后通过浏览器的BroadcastChannel API，和宿主项目进行交互，将编译后的代码发送给宿主项目，然后在宿主项目的渲染器中渲染成页面。代码合并会在commit代码时发生，如果当前commit的代码不是最新版本，会获取最新版的代码进行比对，如果出现冲突代码，需要用户手动处理冲突的代码。代码提交包括代码保存和代码commit，会调用Server模块的储存API。本技术方案还会使用代码实时编译功能对JavaScript代码进行编译，同时也支持JavaScript的预编译语言TypeScript的编译，采用babel作为代码转换工具，转换为向后兼容的JavaScript语法，同时使用内置的插件对代码做压缩和混淆的处理，减轻项目上线后对于网络带宽的压力，加强了源代码的安全性。Server模块提供了代码编译、历史查询、代码储存的API。负责对接在线编辑器的代码编译、预览、保存、历史查询等功能及正式环境的代码获取。Database用于储存编辑过程中产生的历史数据，用于进行版本控制的数据，及发布到生产环境的数据。代码编译模块也可扮演为工具角色，部署时一个代码在线编辑服务可以同时依附多个宿主系统。若想要关闭在线编辑功能，可以直接停掉在线编辑器即可。

本实施例的总体思路是通过将IDE和编译器部署在Server的方式，摆脱的传统SPA项目对于本地开发环境的依赖，省略了不断重复构建项目的过程，提升了开发和部署的效率在线的IDE是基于开源项目进行的二次开发，能够较容易的为其新增一些附件功能，比如指定严格的代码校验规则，保证多人协作的项目能够保持高度统一的代码风格，而不需要专门的人力进行代码检查。由于将本地项目开发改为了在线编辑的方式，因此每次预览功能不在需要等待浏览器刷新，同时也能减少刷新时产生的一些HTTP请求，减轻了服务器的压力。

实施例2：

本实施例在实施例1的基础上做进一步优化，如图2所示，当在菜单服务模块创建一个新的功能菜单时，会同时在菜单服务模块的菜单和在线编辑服务中创建一条数据。菜单服务中会创建一条新的菜单数据，包括菜单名称、菜单路由、父级菜单等。同时还有一个专门的字段CODE_ID用于储存在线编辑服务中新生成数据的ID，以关联两个服务的数据。

在线编辑服务中会在publish表中生成一条默认的初始化数据，Publish表是在项目搭建的时候就有了，包括唯一标识符ID，用于做版本控制的commit_VERSION(默认值为0)，储存发布后的JavaScript代码CODE(默认为null)，储存编译前的源代码SOURCE_CODE(包括source map文件，用于做代码调试，默认为null)，以及用于记录发布历史的相关字段(如创建人、创建时间、备注等)。

当编辑一个已有功能菜单的代码时，根据当前菜单表中记录的CODE_ID，获取到在线编辑服务中所关联的代码，包括publish表、commit表(commit表在项目搭建的时候就有了)、dev表中的数据，假如当前登录的用户没有编辑过当前菜单的代码，那么dev表中则没有该用户关于该菜单的历史提交数据，则会自动获取commit表中commit_VERSION最新的数据，然后返回该条数据中的代码(CODE字段)作为代码编译模块的编辑代码。如果该用户有编辑过该菜单的代码，则会在dev表中获取该用户最近一次的提交记录，然后返回该条数据中的代码(CODE字段)作为代码编译模块的编辑代码。

在本实施例中，Dev表记录了在线编辑过程中生成的历史数据，用于历史回溯；Commit表用于对在线编辑的数据进行版本控制，方便后续的发布和回退；Publish表记录了正式环境的数据，同时还保存了编译后的代码，可以直接用于界面展示。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例3：

本实施例在实施例1的基础上做进一步优化，如图2所示，在在线编辑服务模块中创建commit表，在commit表中生成一条新数据，包括唯一标识符ID，用于储存publish表中ID的字段PUBLISH_ID，用于做版本控制的commit_VERSION(默认值为0)，用于储存commit操作提交的JavaScript代码CODE(默认为null)以及用于记录发布历史的相关字段(如创建人、创建时间、备注等)。然后返回空代码进入到下一步骤进行编辑代码。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例4：

本实施例在实施例1的基础上做进一步优化，如图3和图4所示，在代码编译模块进入代码编辑器编辑代码。根据返回的代码，即版本代码、最新代码和空代码作为初始代码，然后根据宿主项目会给在线编辑器发送当前宿主项目的基础框架类型(Angular、Vue或React等)，当前的项目版本，第三方的依赖等信息等，在线编辑器会根据这些信息，选择当前编辑的语言(JavaScript，TypeScript、Vue等)，加载所需的依赖代码，用于做代码的提示和校验。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例5：

本实施例在实施例1的基础上做进一步优化，如图3和图4所示，代码校验会进行两步校验。第一步会根据上一步步骤，即在代码编译模块编译步骤所获得的提示和校验进行代码检查，保证不存在任何的语法错误和格式错误。第二步会根据编辑器中的代码格式规则预设进行校验，比如不允许出现未使用过的变量、不允许出现循环嵌套循环的代码等，以保证提交代码的质量。如果以上的校验未通过，将退回至代码编译模块编译步骤修复问题。

Web项目出现的错误可以按发生的时间点分为编译时错误和运行时错误，常用的代码校验工具只能校验大部分的编译时错误，对于运行时错误会显得无能为力，因此运行时错误通常需要代码审核人员进行人工审核，和测试人员对该功能点进行测试，对于审核人员经验和能力要求较高，同时存在测试到问题修复的流程长等问题。在我们的平台上提供了自定义的附加校验规则，因此仅需要一到两个有经验的人员进行维护这些规则即可，从而减少了代码审核的人力，测试人员也可只专注于做业务功能测试。

在本实施例中以我们正在实施的项目为例：

将编辑后的代码转成AST(抽象语法树，Abstract Syntax Tree，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构)。

将代码格式化：根据设定的格式文件格式化代码(如空格、缩进、换行等)。

校验附加规则：以如图3所示，以图5的宿主项目架构为例：

重复行校验：以表单组件为例，每个表单中的表单项的name在当前表单中必须是唯一的。通过在步骤S4.1中生成的AST，可以找到对应的表单的节点，遍历下面所有表单项的name，找到重复的表单项，然后在编辑器中展示红色错误提示。

前后关联性校验：以表单组件为例，对于有前后级联关系的表单项，需要校验前置项是否存在，但不同于变量的引用，表单的级联会以name作为关联项，因此无法通过语法进行校验。我们通过AST，找到关联的表单项，然后搜索当前表单节点下是否存在被关联项，不存在则在编辑器中展示红色错误提示。

未使用项校验：比如在表格组件中有用于定义列的配置，表格的列有两种使用场景，在页面上展示数据和隐藏用于提交数据，因此隐藏但没用作提交的列可以认定为是多余的列。我们通过AST筛选出所有隐藏列和用于提交数据的代码块，如果这些列的数据没有在提交数据的代码块中使用，则会展示红色错误提示。

其他校验：以页面跳转为例：需要在代码中配置跳转的路由，因此需要验证跳转的路由是否存在。我们会调用宿主项目菜单查询的请求，判断当前跳转的路由是否存在，不存在则展示红色错误提示。

通过以上几类的附加校验规则，能够在commit阶段排查出部分逻辑层面的潜在问题，提升代码质量。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例6：

本实施例在实施例1的基础上做进一步优化，根据当前编辑的数据的PUBLISH_ID，获取commit表中最新的commit_VERSION的代码(CODE字段)，当前数据的commit_VERSION更新至最新，然后和当前编辑过的代码进行比对，如果存在冲突的代码行，则会退回步骤二处理冲突代码。如果没有冲突的代码，则直接进行merge操作，然后进入到下一步。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例7：

本实施例在实施例1的基础上做进一步优化，在本实施例中，定时发布并根据设定的时间，周期性的检查publish表和commit表，如果publish表中存在commit_VERSION比commit表中所对应的最新的commit_VERSION低时，则会将commit表中最新的数据替换到publish表中所对应的数据，同时会调用server模块的编译API将源代码编译成浏览器可以直接运行的代码。同时也可以将部分的菜单打上忽略的标签，以在自动发布的过程中跳过该菜单。server模块中宿主项目创建/修改代码到获取代码渲染的流程图如图4所示。

手动发布，可以在系统界面中，选择特定的菜单发布到特定的commit_VERSION，也就是将该菜单在commit表中对应commit_VERSION的数据同步到publish表中。当经过的定时发布后，如果出现了重大问题且情况紧急时，此功能可以仅通过界面就能快速的回退代码并发布，客户端可以通过WebSocket的通信，在发生了代码回退或发布后进行自动的刷新。同样在开发人员修复了问题之后，也能通过该功能完成特定功能的独立上版。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例8：

本实施例在实施例1的基础上做进一步优化，本实施例中的界面渲染，进入到特定的功能界面后，根据该菜单保存的CODE_ID，获取到publish表中该菜单的JavaScript代码，在宿主项目的渲染器中进行渲染展示。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例9：

本实施例在实施例1的基础上做进一步优化，本实施例提供了一种和方法相匹配的基于SPA的代码编辑系统。所以本实施例的其他部分与实施例1相同，故不再赘述。

实施例10：

如图6所示，为传统SPA和本发明提供的的前端开发部署流程对比示意图，传统的大型SPA前端项目，需要协作开发的人数多，代码质量会出现参差不齐的情况，通常会指定一套复杂的开发流程，比如强制统一使用特定的IDE(集成开发环境IntegratedDevelopment Environment),指定代码注释规范，commit前后人为校验等方式，从而在

中的各个节点卡控质量，但由于IDE通常安装在本机上，个人之间的配置会出现差异，导致代码规范无法高度的统一，常用版本控制工具无法卡控不合格的代码不能提交，自定义代码提示需要对IDE做二次开发难度较大等问题，开发人力投入较大但代码质量提升不明显。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所做的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (9)

1.一种基于SPA的代码编辑方法，其特征在于，包括以下步骤：

步骤S1.在菜单服务模块创建一个新的功能菜单，在功能菜单和在线编辑服务模块的publish表中创建一条数据，生成空代码，并将菜单服务模块和在线编辑服务模块的数据相关联；

步骤S2.在菜单服务模块编辑一个已有功能菜单的代码时，获取到在线编辑服务模块中所关联的代码，判断当前登录的用户是否有自己修改过的版本代码，如果是，获取自己提交过的最近一版代码，如果否，获取所有用户commit表的最新代码；

步骤S3.在代码编译模块编译步骤S1和步骤S2获取的代码，进行commit或保存操作，当进行commit操作时，进入步骤S4，当进行保存操作时，进入步骤S8；

步骤S4.对编译后的代码进行二次校验，通过一次校验对代码的语法和格式进行检查，判断代码的语法和格式是否正确，如果是进入二次校验，如果否，返回步骤S3；

在二次校验中根据预设的代码格式规则对通过一次校验的代码进行校验，获取当前编辑数据；

步骤S5.根据当前编辑数据的PUBLISH_ID，获取commit表中最新的commit_VERSION，判断当前编辑的数据的commit_VERSION是否为最新，如果是，进入步骤S7，如果否，进判断是否存在冲突的代码行，如果是，返回步骤S3进行处理，处理冲突代码，如果否，直接进行merge操作；

步骤S6.在在线编辑服务模块的commit表中插入一条新数据，令commit_VERSION向前递增；

步骤S7.在在线编辑服务模块的dev表中插入一条新数据，用于保存历史提交记录；

步骤S8.通过发布机制对步骤S1-步骤S7编辑好的代码数据进行发布，并通过界面渲染进行展示。

2.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S1包括：功能菜单中的菜单数据包括菜单名称、菜单路由和父级菜单；

在线编辑服务模块在publish表创建的数据包括唯一标识符ID、用于做版本控制的commit_VERSION、储存发布后的JavaScript代码CODE和用于记录发布历史的相关字段；根据专门的字段CODE_ID储存在线编辑服务模块中新生成数据的ID，并关联两个服务模块的数据。

3.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S2包括：菜单服务模块根据当前菜单表中记录的CODE_ID获取到在线编辑服务中所关联的代码，所述代码包括publish表、commit表和dev表中的数据，并根据dev表中是否有用户提交过关于该菜单的历史提交数据判断当前登录的用户是否自己修改过版本代码，如果是，在dev表中获取所述用户最近一次的提交记录，并通过返回CODE字段作为代码编译模块的编辑代码，如果否，自动获取commit表中commit_VERSION的最新的数据并通过返回CODE字段作为代码编译模块的编辑代码；

在线编辑服务模块在commit表中生成一条新数据包括唯一标识符ID、用于储存publish表中ID的字段PUBLISH_ID、用于做版本控制的commit_VERSION、用于储存commit操作提交的JavaScript代码CODE和用于记录发布历史的相关字段。

4.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S3包括：根据宿主项目给代码编译模块的在线编辑器发送当前宿主项目的信息，在线编辑器会根据所述信息选择当前编辑的语言，加载所需的依赖代码，用于做代码的提示和校验；

所述信息包括宿主项目的基础框架类型信息、当前的项目版本信息和第三方的依赖信息。

5.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S4中二次校验的方法包括：

步骤S4.1.将通过一次校验的代码转换成AST语法树，并将代码格式化；

步骤S4.2.在表单组件中根据AST语法树获取对应的表单的节点，遍历所述节点的name，找出重复的表单项，在代码编辑器中显示红色错误提示；

步骤S4.3.在宿主项目中根据AST语法树进行前后关联性校验、未使用项校验和其他校验，找出对应的不存在的被关联项、未使用项和其他不存在项，并在代码编辑器中显示红色错误提示。

6.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S5中判断是否存在冲突的代码行的方法包括：

根据当前编辑的数据的PUBLISH_ID，获取commit表中最新的commit_VERSION的代码CODE字段代码；

将当前数据的commit_VERSION更新至最新，然后和当前编辑过的数据进行比对，判断是否存在冲突的代码行的方法。

7.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S8中的发布机制包括手动发布和定时发布。

8.根据权利要求1所述的一种基于SPA的代码编辑方法，其特征在于，所述步骤S8中进行界面渲染的方法包括：

根据菜单保存的CODE_ID，获取到publish表中所述菜单的JavaScript代码，在宿主项目的渲染器中进行渲染展示。

9.一种基于SPA的代码编辑系统，其特征在于，包括菜单服务模块、在线编辑服务模块、代码编译模块和发布展示模块，其中：

菜单服务模块，用于创建一个新的功能菜单；用于编辑一个已有功能菜单的代码时，获取到在线编辑服务模块中所关联的代码，判断当前登录的用户是否有自己修改过的版本代码，如果是，获取自己提交过的最近一版代码，如果否，获取所有用户commit表的最新代码；

在线编辑服务模块，用于提供publish表、commit表和dev表，用于在publish表中创建一条数据，生成空代码，用于在commit表中插入一条新数据，令commit_VERSION向前递增，用于在在dev表中插入一条新数据，用于保存历史提交记录；

代码编译模块，用于编译代码，进行commit或保存操作，进行commit操作时和保存操作；用于对编译后的代码进行二次校验，通过一次校验对代码的语法和格式进行检查，判断代码的语法和格式是否正确；用于在二次校验中根据预设的代码格式规则对通过一次校验的代码进行校验，获取当前编辑数据，用于根据当前编辑数据的PUBLISH_ID，获取commit表中最新的commit_VERSION，判断当前编辑的数据的commit_VERSION是否为最新；用于处理冲突代码；用于直接进行merge操作；用于在commit表中插入一条新数据，令commit_VERSION向前递增；用于在dev表中插入一条新数据，用于保存历史提交记录；

发布展示模块，用于通过发布机制对编辑好的代码数据进行发布，并通过界面渲染进行展示。

Images