CN116909553A - 一种页面在线开发及本地编译运行系统 - Google Patents

Abstract

本发明实施例提供一种页面在线开发及本地编译运行系统，其包括：页面设计器，用于设计页面结构数据；抽象语法树解析器，用于将用户提供的API代码，转化成标准的Vue源代码；渲染模板，用于组装页面布局结构数据和页面UI布局数据，使用模板生成Vue源代码；本地服务中心，用于监听本地业务工程是否编译完成，以及监听生成的本地代码是否被修改；控制中心，用于控制页面跳转和管理页面状态。本发明实施例可以在保证需求变动时，用户去系统上添加或删除配置，重新生成代码时候会带上用户编写的业务逻辑。

Description

一种页面在线开发及本地编译运行系统

技术领域

本发明涉及金融信息技术领域，具体涉及一种页面在线开发及本地编译运行系统。

背景技术

开发人员使用系统进行数据库、界面元素、页面信息等配置之后，能够生成页面初始代码，此步骤能有效降低开发人员的工作量。业务开发人员拿到生成的基础代码来添加业务逻辑。

但是当业务需求发生变化之后，例如：页面表单元素需要添加或删除时，目前只能是在生成之后的页面中进行修改，或者在上系统添加配置然后重新生成代码，但是后者这种操作会导致业务开发人员开发的业务代码丢失。

发明内容

有鉴于此，本发明实施例的目的在于提供一种页面在线开发及本地编译运行系统，以解决在业务需求发生变化之后，当前操作会导致业务开发人员开发的业务代码丢失的问题。

为达上述目的，本发明实施例提供了一种页面在线开发及本地编译运行系统，其包括：

页面设计器，用于生成或设计页面结构数据；

抽象语法树解析器，用于将用户提供的API代码，转化成标准的Vue源代码；

渲染模板，用于组装页面布局结构数据和页面UI布局数据，使用模板生成Vue源代码；

本地服务中心，用于监听本地业务工程是否编译完成，以及监听生成的本地代码是否被修改；

控制中心，用于控制页面跳转和管理页面状态。

在一些可能的实施方式中，所述页面设计器，具体包括：

事件绑定模块，用于绑定第一页面字段与第二页面字段，并且设置第一页面字段与第二页面字段之间的联动关系；

生命周期模块，用于在不同程序生命周期中去执行绑定的代码编辑模块；所述程序生命周期包括：程序创建前、程序创建后、程序销毁前和程序销毁后；

代码编辑模块，用于获取设计页面的页面UI布局数据和用户书写的业务逻辑，根据所述业务逻辑生成业务代码，并且使得所述UI布局数据和所述业务逻辑能够进行交互；

业务组件模块，用于采用与第一场景匹配的方式生成页面结构数据；

swagger接口模块，用于采用与第二场景匹配的方式生成页面结构数据。

在一些可能的实施方式中，业务组件模块，具体用于在后端业务接口还没开发的第一场景中，响应于用户对业务组件模块的选中指令，生成页面字段信息和布局信息；swagger接口模块，具体用于在具有后端接口的第二场景中，响应于用户对swagger接口模块的选中指令，生成页面字段信息和布局信息。

在一些可能的实施方式中，所述抽象语法树解析器，具体包括：

箭头函数转换模块，用于将对象函数转换为箭头函数；

上下文转换模块，用于将API调用的当前上下文由快开上下文转换为Vue上下文；

函数调用模块，用于解析函数与函数之间的调用关系，使函数可以相互调用。

在一些可能的实施方式中，所述渲染模板，具体包括：

UI布局数据模块，用于组装页面布局结构数据；

函数信息模块，用于解析用户配置的事件与用户添加的代码，并且将用户配置的事件和用户添加的代码组装成一个函数生成到Vue源代码中的methods函数模块；

绑定数据模块，用于解析用户配置的组件的属性，并且将用户配置的组件属性生成到Vue源代码中的数据模块；

代码模板模块，用于确定生成的源代码的形式，所述源代码的形式包括Vue源代码或者React源代码。

在一些可能的实施方式中，所述绑定数据模块，具体用于解析用户配置的组件的属性，并且将用户配置的组件属性以json数据格式生成到Vue源代码中的数据模块。

在一些可能的实施方式中，所述代码模板模块，具体用于当前如果启动的是Vue代码模板，则生成源代码形式是Vue的源代码；当前如果启动的是React代码模板，则生成源代码形式是React的源代码。

在一些可能的实施方式中，所述本地服务中心，具体包括：

文件格式化模块，用于将生成的源代码格式化成固定代码格式；

hash计算模块，用于计算生成的源代码文件的第一hash值，以及代码提交时源代码文件的第二hash值，当所述第一hash值与所述第二hash值不一致时给出错误提示；

配置文件生成模块，用于在生成源代码文件的时候，生成与所述源代码文件相应的配置文件。

在一些可能的实施方式中，所述文件格式化模块，具体用于把所有的源代码按照如下至少一种规则进行格式化处理，从而把源代码全部格式化成同一种格式：

将js函数中双引号替换成单引号；将LF换行格式替换成CRLF；去掉代码中的分号；检测函数与括号是否有空格。

在一些可能的实施方式中，所述控制中心，具体用于控制将源代码文件写入业务工程，并且控制页面刷新只在所述业务工程进行刷新；所述控制中心包括隔离模块和切换模块；所述隔离模块用于隔离设计界面和预览界面；所述切换模块用于切换设计界面和预览界面，并且在多个设计界面工程中进行切换。

上述技术方案具有如下有益效果：

本发明实施例可以在保证需求变动时，用户去系统上添加或删除配置，重新生成代码时候会带上用户编写的业务逻辑。

传统的在线开发工具在业务页面开发过程中，代码生成往往只能是单向的，并且业务逻辑的字段增减时，只能在生成后的代码上去调整，如果重复生成则会导致业务逻辑丢失。使用本发明实施例的技术方案可解决页面开发过程中代码无法重复生成的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例的一种页面在线开发及本地编译运行系统的整体功能框图；

图2是本发明实施例的一种页面在线开发及本地编译运行系统的细化功能框图；

图3是本发明实施例的控制中心的具体功能框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例可以在保证需求变动时，用户去系统上添加或删除配置，重新生成代码时候会带上用户编写的业务逻辑。

软件公司的大型项目需要大量的前端人员去构建系统，并且使用前端开发框架需要掌握前端一些必备的基础知识，例如JavaScript、Vue、css，但是在这些项目中都是后端Java占比90％以上，为了使得这些后端Java开发人员能够轻松地上手前端项目，本发明实施例构建了一个在线开发工具。

传统的在线开发工具在业务页面开发过程中，代码生成往往只能是单向的，并且业务逻辑的字段增减时，只能在生成后的代码上去调整，如果重复生成则会导致业务逻辑丢失。使用本发明实施例的技术方案可解决页面开发过程中代码无法重复生成的问题。

图1是本发明实施例的一种页面在线开发及本地编译运行系统的功能框图，图2是本发明实施例的一种页面在线开发及本地编译运行系统的细化功能框图。如图1和图2所示，该系统包括：页面设计器、抽象语法树AST解析器、渲染模板、本地服务中心和控制中心。

页面设计器：用于供开发人员使用业务组件模块和swagger接口模块快速生成页面结构数据，直观的体现元素之间的关系，并且还可以进一步地使用代码编辑模块和生命周期模块书写业务代码。

页面设计器是和用户直接交互的部分，用户主要在页面设计器上面完成之前在本地直接编码的相应操作，利用此页面设计器可以大大降低用户入门门槛，不需要专业的前端知识即可完成页面构建，针对的使用人群通常是后端Java开发，并且平台提供了大量的API来供用户使用。

页面设计器包括事件绑定模块、生命周期模块、代码编辑模块(在线代码编辑工具)、业务组件模块和swagger接口模块。页面设计器可使得其包含的各模块进行协同工作。事件绑定模块，用于绑定第一页面字段与第二页面字段，并且设置第一页面字段与第二页面字段之间的联动关系；事件绑定模块，用于绑定不同的页面字段，可以设置多个页面字段的联动关系，例如：当作为第一页面字段的性别切换到女时，自动隐藏作为第二页面字段的地址信息；生命周期模块，用于在不同程序生命周期中去执行绑定的代码编辑模块，例如在页面初始化时去请求页面初始数据；所述程序生命周期包括：程序创建前、程序创建后、程序销毁前和程序销毁后；代码编辑模块，用于获取设计页面的页面UI布局数据和用户书写的业务逻辑，根据所述业务逻辑生成业务代码，并且使得所述UI布局数据和所述业务逻辑能够进行交互；具体的，在代码编辑模块中需要去获取当前页面中UI中的部分信息，例如页面中有一个查询表单和展示列表，本实施例获取表格的数据或者表格当前选中行的数据；业务组件模块，用于采用与第一场景匹配的方式生成页面结构数据；swagger接口模块，用于采用与第二场景匹配的方式生成页面结构数据。本实施例提供了业务组件模块和swagger接口模块两种方式供选择，有利于在不同的场景使用不同的方式来生成页面结构。具体的，当后端业务接口比较完善时可以选择swagger接口，通过这种方式可以快速的获取页面字段信息和布局信息。当后端业务接口没有开发好，或者比较粗糙的时候，可以选择业务组件模块的方式，通过手动选择业务组件模块的方式去生成页面字段和布局信息。即当后端业务接口还没开发好的时候，无法通过后端业务接口去获取页面的字段信息，此时可以通过基础组件和/或业务组件去生成页面字段信息。

抽象语法树AST解析器：用于将用户提供的API代码转化成标准的JavaScript代码和/或Vue代码，如果需要去适配React可将此AST解析器进行改造。其中，Vue是一套用于构建用户界面的渐进式框架。抽象语法树(Abstract Syntax Tree，AST)，是源代码的抽象语法结构的树状表现形式。

例如，平台的API是ctx.get(‘form’)。getData()是获取实例名为form的数据，那么将其转换成this.$refs.form.getData()，这个转换过后的代码是标准的Vue代码。

AST解析器具体可以包括：箭头函数转换模块，用于响应于用户的操作，将对象函数转换为箭头函数，以保证在函数中获取的上下文一致；上下文转换模块，用于将API调用的当前上下文由快开上下文转换为Vue上下文；函数调用模块，用于解析函数与函数之间的调用关系，使函数可以相互调用。快开指的是本实施例的系统。

其中，对象函数是用户自定义的代码块(用户可能会写成对象函数或者写成箭头函数)，将对象函数转换为箭头函数之后有利于解决掉this指向的问题。

其中，上下文是指ctx，实际每一个函数都有一个this指向，但是在不同的情况this指向是不明确的，这是一门比较深入的知识点，比较难掌握，为了降低开发和使用难度，本发明实施例希望开发人员每次调用都是一个正确的对象，所以这里封装了一个ctx对象，开发人员始终拿到的都是正确对象；在转换到其它平台上的代码上时，没有这个ctx对象，本发明实施例需要把这个ctx上的功能移植到this上。

渲染模板：用于组装页面布局结构数据和页面UI(用户界面，User Interface)布局数据；调用对应的页面模板生成Vue源代码；UI布局数据包括：页面的表单、表格、按钮等数据。渲染模板具体用于通过UI布局数据模块、函数信息模块、绑定数据模块以及代码模板模块这几个模块最终加工生成源代码。即调用UI布局数据模块、函数信息模块、绑定数据模块所产生的数据到代码模板模块中去生成Vue源代码。

该页面布局结构数据例如包括：表单、表格、按钮、面板的嵌套结构放置或设置的位置。UI布局数据主要包含页面的展示数据信息，例如：页面的查询区域填写的查询数据，列表中展示的后端返回信息等。

页面模板是由后台预先配置的，主要指当前生成的代码是哪种类型，例如可以生成JSON格式的代码和Vue格式的代码。

渲染模板具体可以包括：UI布局数据模块，用于组装页面布局结构数据；例如：按钮放入位置，表单中包含哪些表单项等；函数信息模块，用于解析用户配置的事件与用户添加的代码，并且将用户配置的事件和用户添加的代码组装成一个函数生成到Vue源代码中的methods模块，其中用户在代码编辑模块实施添加代码操作；绑定数据模块，用于解析用户配置的组件的属性，并且将用户配置的组件属性生成到Vue源代码中的数据(data)模块；代码模板模块，用于确定生成的源代码形式，该源代码形式可以是Vue源代码，也可以是React源代码。具体地，将用户配置的组件属性以json数据格式生成到Vue源代码中的数据模块；用户配置指用户对事件绑定模块、生命周期模块、代码编辑模块进行配置。具体地，UI布局数据模块、函数信息模块和绑定数据模块在进行代码生成的时候会根据当前代码模板决定生成的代码形式，例如当前如果启动的是Vue代码模板，那么生成的就是Vue的源代码。

本地服务中心：用于监听本地业务工程是否编译完成，监听生成的本地代码是否被(用户手动)修改。本地服务中心具体包括：文件格式化模块、hash计算模块和配置文件生成模块。编译功能是业务工程自带的功能，当往这个工程中添加.vue的文件，工程会自动进行编译。生成的本地代码是由渲染模板先生成Vue源代码(这时候生成的代码是放在服务端的)，本地服务器中心会把服务端生成的代码放到本地业务工程中，本地业务工程会自动将新添加的文件进行编译，本地服务中心监听本地业务工程什么时候编译完成。业务代码是组成Vue源代码(也指的是标准代码)的一部分。本地代码的意思是Vue源代码被控制中心从渲染模板那里放到了本地业务工程中。如果生成的本地代码被修改了，将会抛出错误，不能进行下一步操作，如果没有被修改则继续执行。

文件格式化模块，用于将生成的源代码格式化成固定代码格式；例如：js函数中双引号替换成单引号；LF换行格式替换成CRLF；去掉代码中的分号；代码换行规则。固定代码格式是为了符合开发规范，不同的甲方要求的代码格式会有所不同。目前系统配置的格式包括：函数中双引号替换成单引号；LF换行格式替换成CRLF；去掉代码中的分号；函数与括号是否有空格。文件格式化模块把所有的代码按照上述规则进行格式化。这样有利于把源代码全部格式化成同一种格式。上述代码换行规则是指：换行配置printWidth属性，表示一行最多显示多少个字符，多于这个数量的字符将自动换行。

hash计算模块，用于计算生成的源代码文件的第一hash值(例如基于sha256算法)，以及最终代码提交(git提交)时源代码文件的第二hash值，当第一hash值与第二hash值两者不一致时给出错误提示；具体地，每次生成Vue源代码的时候会去计算文件hash值并且保存到本地，代码提交的时候再去计算一次文件hash值，如果两次hash值不一致表示文件被手动篡改过。

配置文件生成模块，用于写入配置文件，生成源代码文件的时候会生成与该源代码文件相应的配置文件，从而有利于减少用户手动配置的功能。每生成一个源代码文件就会在配置文件中添加一条信息。

控制中心：用于控制页面跳转和管理页面状态，生成代码写入源代码文件之后，业务工程会自动编译，当编译完成之后页面会自动刷新，页面刷新会导致当前页面设计器界面的内容丢失，所以控制中心控制着业务工程和设计工程，源代码文件写入的目标是业务工程，页面刷新也只会在业务工程刷新，不会影响到设计工程。

如图3所示，该控制中心包括隔离模块和切换模块，隔离模块用于隔离设计界面和预览界面副作用的相互影响，例如当新文件生成时预览界面会刷新，页面刷新数据就会丢失，隔离单元可以很好的解决这以问题；切换模块，用于快速切换设计界面和预览界面，并在多个设计界面工程中快速切换。

业务工程是开发人员开发的业务功能，开发人员手动在这个业务工程中编写业务代码。设计工程是本系统提供的一个插件包，用户通过配置结合代码编写功能完成业务功能开发，然后实时生成代码到业务工程中，页面是在在线系统上开发，代码实际在本地编译运行。

整个开发过程都是围绕本发明实施例的在线开发工具上进行。本发明实施例提供三种方式去快速创建页面，即元数据平台、swagger接口、直连数据库，这三种方式都是创建页面的模型，页面的模型中包含查询框、表格、弹出框等信息，后端服务(代码)根据这个页面的模型去生成相应的HTML(超文本标记语言，HyperText Mark-up Language)代码和公用业务代码(增删改查)。这样页面的基础结构就能在网页中进行展示。元数据平台、swagger接口、直连数据库是提供数据的三种方式。

但是这只是基础的一步，往往在代码中需要添加大量的自定义业务逻辑，例如：页面联动(根据当前下拉框或输入框的值不同显示隐藏某些字段，或让某些字段从非必填变为必填)、数据加工、多个页面传值交互，弹框交互等，本发明实施例需要让不懂前端开发的后端人员在本发明实施例的系统上完成上述功能。

页面联动的实现方案是使用事件绑定模块和大量内置API，例如要实现当一个下拉框选择的性别为女时隐藏地址信息，本发明实施例可以在页面设计器的设计界面选中性别字段并在左侧添加一个事件change，然后会跳转到一个函数体里面去，在这个函数内部可以获取到系统封装的一个ctx上下文对象信息，可以操作页面上的所有实体(操作的API是本发明实施例封装内置)，在这就是性别和地址，获取到性别实体判断当前的值，根据这个值操作是否隐藏地址信息。

数据加工和页面传值也是通过本发明实施例的封装的API(封装在ctx上下文对象信息上)去完成的，而且用户在跳转的时候也不需要去关心页面的具体路径，只需要填写页面的唯一编码即可(在页面上可以实时查看当前页面编码)，在整个开发中开发人员只需要去关注业务开发而不需要去担心视图构建。

关于弹框交互，本发明实施例也提供了相应的API去调用，也支持快速配置放大镜等功能自动带回放大镜选择的值。本实施例在不同的场景使用不同的API去实现相应的功能。

当后端开发人员利用本发明实施例提供的各种内置API以及页面设计工具(事件绑定模块、业务组件模块等)完成页面开发之后，接踵而至的问题就是开发预览以及代码上线的问题。其中开发的项目中，95％以上的项目都要求使用以Vue源代码的方式去交付给客户，通过编译Vue源代码的方式进行上线。这就要求预览的时候也是需要用标准的Vue代码去预览。代码是在网页端进行开发的，实时同步到本地的项目文件中，并且本发明实施例写的代码并不是Vue代码，是需要去解决的重点问题。首先网页端是没有写入本地代码权限的，在本发明实施例的服务中有一个本地Nodejs服务会随业务工程一起启动；当页面设计器中点击预览时，请求的服务地址指向的是这个本地Node服务，然后利用本地Node服务再去请求真正的后端服务，当真正的后端服务返回生成的代码时候，先把返回的代码进行代码格式化再写入到本地业务工程中，同时需要向本地项目文件中写入配置文件即当前页面的路径信息，计算生成的Vue源代码的的hash值防止用户手动篡改。当文件写入项目工程(用以前的开发模式要开发的工程)之后，项目会进行自动热编译；本地Nodejs服务会监听当前是否已经编译完成并通知网页端可以进行预览。其中，Node.js是一个免费的、开源的、跨平台的JavaScript运行时环境。

但是这里还要一个问题需要解决，工程自动编译完成之后页面会自动进行刷新，刚才在设计页面的所有操作都会被刷新。本发明实施例在系统中引入了控制中心，控制中心控制着两个子工程：业务工程和设计器工程，控制中心来负责两者的通信，源代码文件写入的目标是业务工程，页面刷新也只会在业务工程刷新不会影响到设计工程。所有的开发都是在平台进行操作，当添加新需求或者修改需求时都在平台上进行，这样页面可以重复多次的生成，平台的功能也能满足业务开发的需求。

本发明实施例的技术方案具有如下优点：

1.业务元件：本发明实施例通过对业务需求的梳理，明确业务组件的类型、输入输出、业务规则等信息，将其进行设计封装，形成业务组件文档。之后，将业务组件与业务要素属性结合，形成多个业务要素字段并且管理起来。在页面生成时，可以通过匹配字段标识或者拖拽等方式配置到界面上，以提高页面中表单与列表的开发配置效率。

2.在线代码与本地代码交互：在线代码并不能完全满足业务开发的需求。例如系统的首页或者某个页面的某个模块样式高度定制化，这些页面还是需要专业的前端人员去开发的，那么在线开发的代码就会与本地代码进行交互，包括但不限于页面传参、方法调用。

3.平台无关性，屏蔽Vue2.0、Vue3.0和React技术栈，用户只需要在平台实现功能无需关心最后生成的代码是什么，生成Vue和React只需要去修改AST模块和渲染模板模块。

4.用户启动业务工程，自动打开一个在线网站，在网站上通过元数据平台或swagger以及业务组件构建业务基础代码，然后添加生命周期模块、事件绑定模块、代码编辑模块。点击保存预览，本地工程里面会自动生成当前页面的前端代码，工程会自动热更新，然后跳转到预览页面，进行页面预览。当需要业务调整时返回设计界面，对页面字段或页面布局可以进行调整，之前用户绑定的事件以及业务逻辑不会丢失，可以进行多次开发直到项目结束。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

虽然本申请提供了如实施例或流程图的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种页面在线开发及本地编译运行系统，其特征在于，包括：

页面设计器，用于设计页面结构数据；

抽象语法树解析器，用于将用户提供的API代码，转化成标准的Vue源代码；

渲染模板，用于组装页面布局结构数据和页面UI布局数据，使用模板生成Vue源代码；

本地服务中心，用于监听本地业务工程是否编译完成，以及监听生成的本地代码是否被修改；

控制中心，用于控制页面跳转和管理页面状态。

2.根据权利要求1所述的系统，其特征在于，所述页面设计器，具体包括：

事件绑定模块，用于绑定第一页面字段与第二页面字段，并且设置第一页面字段与第二页面字段之间的联动关系；

生命周期模块，用于在不同程序生命周期中去执行绑定的代码编辑模块；所述程序生命周期包括：程序创建前、程序创建后、程序销毁前和程序销毁后；

代码编辑模块，用于获取设计页面的页面UI布局数据和用户书写的业务逻辑，根据所述业务逻辑生成业务代码，并且使得所述UI布局数据和所述业务逻辑能够进行交互；

业务组件模块，用于采用与第一场景匹配的方式生成页面结构数据；

swagger接口模块，用于采用与第二场景匹配的方式生成页面结构数据。

3.根据权利要求2所述的系统，其特征在于，

业务组件模块，具体用于在后端业务接口还没开发的第一场景中，响应于用户对业务组件模块的选中指令，生成页面字段信息和布局信息；

swagger接口模块，具体用于在具有后端接口的第二场景中，响应于用户对swagger接口模块的选中指令，生成页面字段信息和布局信息。

4.根据权利要求1所述的系统，其特征在于，所述抽象语法树解析器，具体包括：

箭头函数转换模块，用于将对象函数转换为箭头函数；

上下文转换模块，用于将API调用的当前上下文由快开上下文转换为Vue上下文；

函数调用模块，用于解析函数与函数之间的调用关系，使函数可以相互调用。

5.根据权利要求1所述的系统，其特征在于，所述渲染模板，具体包括：

UI布局数据模块，用于组装页面布局结构数据；

函数信息模块，用于解析用户配置的事件与用户添加的代码，并且将用户配置的事件和用户添加的代码组装成一个函数生成到Vue源代码中的methods函数模块；

绑定数据模块，用于解析用户配置的组件的属性，并且将用户配置的组件属性生成到Vue源代码中的数据模块；

代码模板模块，用于确定生成的源代码的形式，所述源代码的形式包括Vue源代码或者React源代码。

6.根据权利要求5所述的系统，其特征在于，所述绑定数据模块，具体用于解析用户配置的组件的属性，并且将用户配置的组件属性以json数据格式生成到Vue源代码中的数据模块。

7.根据权利要求5所述的系统，其特征在于，所述代码模板模块，具体用于当前如果启动的是Vue代码模板，则生成源代码形式是Vue源代码；当前如果启动的是React代码模板，则生成源代码形式是React的源代码。

8.根据权利要求1所述的系统，其特征在于，所述本地服务中心，具体包括：

文件格式化模块，用于将生成的源代码格式化成固定代码格式；

hash计算模块，用于计算生成的源代码文件的第一hash值，以及代码提交时源代码文件的第二hash值，当所述第一hash值与所述第二hash值不一致时给出错误提示；

配置文件生成模块，用于在生成源代码文件的时候，生成与所述源代码文件相应的配置文件。

9.根据权利要求8所述的系统，其特征在于，所述文件格式化模块，具体用于把所有的源代码按照如下至少一种规则进行格式化处理，从而把源代码全部格式化成同一种格式：

将js函数中双引号替换成单引号；将LF换行格式替换成CRLF；去掉代码中的分号；检测函数与括号是否有空格。

10.根据权利要求1所述的系统，其特征在于，所述控制中心，具体用于控制将源代码文件写入业务工程，并且控制页面刷新只在所述业务工程进行刷新；

所述控制中心包括隔离模块和切换模块；所述隔离模块用于隔离设计界面和预览界面；所述切换模块用于切换设计界面和预览界面，并且在多个设计界面工程中进行切换。