一种基于schma生成前端项目源码的方法及装置制造方法及图纸

本发明专利技术公开了一种基于schma生成前端项目源码的方法及装置，涉及数据处理技术领域，主要目的在于实现简化了从创建工程到页面绘制开发过程，提高了开发效率。本发明专利技术主要的技术方案为：利用预设Schma协议获取待处理数据，所述待处理数据包括项目目录结构数据和页面内容数据；基于所述页面内容数据生成项目目录；基于所述项目目录结构数据生成所述项目目录对应的页面代码；将所述页面代码和所述项目目录组合输出项目。本发明专利技术用于生成前端项目源码。码。码。

【技术实现步骤摘要】
一种基于schma生成前端项目源码的方法及装置


[0001]本专利技术涉及数据处理
，尤其涉及一种基于schma生成前端项目源码的方法及装置。

技术介绍

[0002]在开发前端项目时，通常根据ui原型为参考，早期通过JavaScript操作dom去实现一些交互行为，后来出现了vue，react等框架极大缩短了前端开发周期。
[0003]目前，采用vue/react框架进行页面开发，开发时需依赖vue
‑
cli等脚手架手动搭建项目，并进行编码，从而生成页面。
[0004]但是，上述处理方法存在每次新搭建的项目时都需要对页面进行从无到有的编写，且相似页面需要重复编写，耗时长，工作量大。

技术实现思路

[0005]鉴于上述问题，本专利技术提供一种基于schma生成前端项目源码的方法及装置，主要目的是为了实现简化了从创建工程到页面绘制开发过程，提高了开发效率。
[0006]为解决上述技术问题，本专利技术提出以下方案：
[0007]第一方面，本专利技术提供一种基于schma生成前端项目源码的方法，所述方法包括：
[0008]利用预设Schma协议获取待处理数据，所述待处理数据包括项目目录结构数据和页面内容数据；
[0009]基于所述页面内容数据生成项目目录；
[0010]基于所述项目目录结构数据生成所述项目目录对应的页面代码；
[0011]将所述页面代码和所述项目目录组合输出项目。
[0012]第二方面，本专利技术提供一种基于schma生成前端项目源码的装置，所述装置包括：
[0013]获取单元，用于利用预设Schma协议获取待处理数据，所述待处理数据包括项目目录结构数据和页面内容数据；
[0014]第一生成单元，用于基于所述页面内容数据生成项目目录；
[0015]第二生成单元，用于基于所述项目目录结构数据生成所述项目目录对应的页面代码；
[0016]输出单元，用于将所述页面代码和所述项目目录组合输出项目。
[0017]为了实现上述目的，根据本专利技术的第三方面，提供了一种存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述第一方面所述基于schma生成前端项目源码的方法。
[0018]为了实现上述目的，根据本专利技术的第四方面，提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现如第二方面所述用于基于schma生成前端项目源码的装置的全部或部分步骤。
[0019]借由上述技术方案，本专利技术提供的基于schma生成前端项目源码的方法及装置，是由于采用vue/react框架进行页面开发，开发时需依赖vue
‑
cli等脚手架手动搭建项目，并进行编码，从而生成页面存在每次新搭建的项目时都需要对页面进行从无到有的编写，且相似页面需要重复编写，耗时长，工作量大等问题。为此，本专利技术通过利用预设Schma协议获取待处理数据，所述待处理数据包括项目目录结构数据和页面内容数据；基于所述页面内容数据生成项目目录；基于所述项目目录结构数据生成所述项目目录对应的页面代码；将所述页面代码和所述项目目录组合输出项目。本专利技术基于vue框架，集成schma协议，进行再次封装，开发者只需编写json数据，即可快速生成页面，进一步缩短了前端开发周期，简化了从创建工程到页面绘制开发过程，提高了开发效率。
[0020]上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。
附图说明
[0021]通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
[0022]图1示出了本专利技术实施例提供的一种基于schma生成前端项目源码的方法流程图；
[0023]图2示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的方法流程图；
[0024]图3示出了本专利技术实施例提供的一种基于schma生成前端项目源码的装置的组成框图；
[0025]图4示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的装置的组成框图；
[0026]图5示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的装置的示例图；
[0027]图6示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的装置的项目目录示例图；
[0028]图7示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的装置的页面代码示例图；
[0029]图8示出了本专利技术实施例提供的另一种基于schma生成前端项目源码的装置的页面效果示例图。
具体实施方式
[0030]下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0031]术语解释：
[0032]Vue/react：可以独立完成前后端分离式web项目的JavaScript框架。
[0033]Vue/react脚手架：Vue/react脚手架是Vue/react官方提供的标准化开发工具(开发平台)，它提供命令行和UI界面，方便创建vue/react工程、配置第三方依赖、编译vue/react工程。
[0034]Schma：具有一个具有特定协议的json标准，描述了数据的格式和内容,用来定义事件体的数据格式。
[0035]Json：是一种轻量级的数据交换格式；采用完全独立于编程语言的文本格式来存储和表示数据，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
[0036]对于目前采用vue/react框架进行页面开发，开发时需依赖vue
‑
cli等脚手架手动搭建项目，并进行编码，从而生成页面。但是，上述处理方法存在每次新搭建的项目时都需要对页面进行从无到有的编写，且相似页面需要重复编写，耗时长，工作量大。针对此问题，专利技术人想到基于vue框架，集成schma协议，进行再次封装，开发者只需编写json数据，即可快速生成页面，进一步缩短了前端开发周期。
[0037]为此，本专利技术实施例提供了一种基于schma生成前端项目源码的方法，通过该方法实现简化了从创建工程到页面绘制开发过程，提高了开发效率，其具体执行步骤如图1所示，包括：
[0038]101、利用预设Schma协议获取待处理数据。
[0039]其中，所述待处理数据本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于schma生成前端项目源码的方法，其特征在于，所述方法包括：利用预设Schma协议获取待处理数据，所述待处理数据包括项目目录结构数据和页面内容数据；基于所述页面内容数据生成项目目录；基于所述项目目录结构数据生成所述项目目录对应的页面代码；将所述页面代码和所述项目目录组合输出项目。2.根据权利要求1所述的方法，其特征在于，在所述利用预设Schma协议获取待处理数据之前，所述方法还包括：设置所述项目目录结构数据的格式和所述页面内容数据的格式，所述项目目录结构数据的格式至少包括每个页面要展示的元素，所述页面内容数据的格式至少包括项目的目录结构；基于所述项目目录结构数据的格式和所述页面内容数据的格式，设置所述预设Schma协议，用于用户编写json数据。3.根据权利要求1所述的方法，其特征在于，所述页面内容数据包括页面文件夹和项目配置文件，所述页面文件夹中设置有多个预设页面；所述基于所述页面内容数据生成项目目录，包括：基于所述页面文件夹的多个预设页面和所述项目配置文件生成项目目录。4.根据权利要求1所述的方法，其特征在于，所述项目目录结构数据至少包括与所述页面文件夹的多个预设页面一一对应的展示元素，展示元素至少包括页面按钮、页面表格、页面文本、页面分割线以及页面布局元素；所述基于所述项目目录结构数据生成所述项目目录对应的页面代码，包括：利用预设页面ID将所述预设页面对应的展示元素放到对应的所述预设页面生成每个所述预设页面分别对应的页面代码；基于所述每个所述预设页面分别对应的页面代码，获得所述项目目录对应的页面代码。5.根据权利要求3
‑
4中...

【专利技术属性】
技术研发人员：姚帅兵，颜秋茹，郑磊，
申请(专利权)人：百融至信北京科技有限公司，
类型：发明
国别省市：