一种图形化前端工程化框架构建方法技术

本发明专利技术公开了一种图形化前端工程化框架构建方法，该方法包括以下步骤：S1、项目仓库创建；S2、项目代码预生成；S3、代码提示与补全；S4、打包与部署。有益效果：项目环境无需重复集成，只需要部署一次就可以正常使用，从而减少后期维护成本，大大减少开发的步骤，提高效率。代码开发量减少，提供组件机制，减少代码重复开发，从而降低开发难度，减少开发周期，避免出现代码冗余；可以部署在公网或私网环境下的服务器作为代码开发服务，线上编程随时随地修改代码增加开发效率，从而避免开发场地的限制，同时提高代码更新与维护的效率。

【技术实现步骤摘要】
一种图形化前端工程化框架构建方法
本专利技术涉及前端工程化
，具体来说，涉及一种图形化前端工程化框架构建方法。
技术介绍
随着互联网技术的发展，web业务日益复杂化和多元化，前端开发也已经由webPage（网页模式）的模式转变为webApp（客户端）的模式，对于现在的前端日益复杂的工程，如何提高多人协作效率，保证项目的可维护性，提高开发的质量成为了首要的问题。现有的前端工程化解决方案，是通过webpack（包管理工具），git（代码管理工具），gulp（自动构建工具），jekins（自动打包工具），等各类工具意义实现，这样的实现方式有一下几种缺点，（1）、每次新建一个项目都要重新集成这些软件，后期维护成本高，并且随着时间的推移，不同的开发人员使用的版本不一致也会带来很大的隐患；（2）、不能够灵活开发，开发产品仍然需要依托这些软件实现一整套开发环境，开发场地受限，不能够及时的进行产品迭代；（3）、各个软件的兼容性也是头疼考虑的一部分，解决这些问题会影响到开发的整体效率。专利号CN104978194B公开了一种网页前端开发方法及装置，该专利包括：建立项目开发目录，对项目开发目录中的静态资源进行实时编译，对编译结果进行优化处理并输出至开发页面，将优化结果上传至测试服务器，将通过测试的优化结果发布至内容分发网络服务器；从而可在本地使用同一个开发工具贯穿完整的web前端开发流程，可用该工具中的命令将每个流程步骤单独处理，且达到了将原本相互分离的各开发过程整合到一起的目的，省去开发过程中在不同工具之间进行切换的繁琐步骤，简单便捷。该专利对开发步骤进行精简优化，提高效率，但仍然无法解决开发场地、软件兼容等相关问题，来帮助开发者选择线上或本地随时进行开发或维护。针对相关技术中的问题，目前尚未提出有效的解决方案。
技术实现思路
针对相关技术中的问题，本专利技术提出一种图形化前端工程化框架构建方法，以克服现有相关技术所存在的上述技术问题。为此，本专利技术采用的具体技术方案如下：一种图形化前端工程化框架构建方法，该方法包括以下步骤：S1、项目仓库创建；S2、项目代码预生成；S3、代码提示与补全；S4、打包与部署。进一步的，所述项目仓库创建包括本地创建与在线创建中的其中一种。可选的，所述本地创建包括以下步骤：S11、选择前端框架类型，创建前端脚手架；S12、在弹出选项框内输入代码设置本地项目配置，并将其存储在默认的代码存储库中；S13、缓冲区间对代码进行校验，若代码有冲突错误，则返回消息给工作区间，若代码没有冲突错误，则同步本地代码区间内容。可选的，所述在线创建包括以下步骤：S11′、选择前端框架类型，创建前端脚手架；S12′、在弹出选项框内输入代码设置本地项目配置，并将其存储在默认的代码存储库中；S13′、利用远程缓冲区间拷贝当前远程仓库代码；S14′、缓冲区间通过对比分析算法对代码进行校验，算法公式如下：；其中，Xi代表本地代码仓库序列，Yj代表远程代码仓库序列，c[i，j]代表序列Xi和Yj的最长公共子序列的长度，Xi=<x1，x，…，xi>，Yj=<y1，y2，…，yj>；S15′、若计算得到c中有重复内容则判断为冲突项，对冲突进行解决，重复步骤S14′直至c为0时判断验证通过并同步至远程代码仓库。进一步的，所述代码储存库包括工作区间，缓冲区间及本地代码区间。进一步的，所述项目代码预生成包括以下步骤：S21、使用psd文件解析库解析图层信息；S22、对解析得到的散列函数（hash）内容进行遍历，将整个文档遍历成多叉树，并通过节点实例化对应的对象；S23、将遍历得到的节点数据转换为一一对应的层叠样式表（css）和超文本标记语言（html），将代码生成项目模块并判断是否使用。进一步的，所述代码提示与补全包括以下步骤：S31、对输入内容进行监听获取输入内容；S32、使用决策树算法对输入内容进行判断匹配，给出对应代码提示；S33、利用以下公式计算，并按照概率大小依次排列提示和补全的代码；；其中，s是s个数据样本的集合，m表示类标号属性具有的不同值数量，Ci=(i=1，m)，Si是类C中的样本数，I（S1，S2，S3）代表一个给定的样本分类所需的期望信息，Pi=Si/s是任意样本输入Ci的概率。进一步的，所述决策树的建立包括：S321、通过训练样本集，建立目标变量关于各输入变量的分类预测模型；S322、全面实现输入变量和目标变量不同取值下的数据分组；S323、对新数据对象进行分类和预测。进一步的，所述打包与部署包括以下步骤：S41、通过微软脚本环境拉取代码；S42、将拉好的包通过自定义命令进行打包并上传。进一步的，所述上传方式包括用户自己部署拉取打包后的部署包与通过微软脚本环境上传替换文件进行部署。本专利技术的有益效果为：1、项目环境无需重复集成，只需要部署一次就可以正常使用，从而减少后期维护成本，大大减少开发的步骤，提高效率。2、代码开发量减少，提供组件机制，减少代码重复开发，从而降低开发难度，减少开发周期，避免出现代码冗余。3、可以部署在公网或私网环境下的服务器作为代码开发服务，线上编程随时随地修改代码增加开发效率，从而避免开发场地的限制，同时提高代码更新与维护的效率。4、统一集成开发工具版本统一，减少不必要的兼容性错误，从而扩展开发环境的适应场景，提高灵活性。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是根据本专利技术实施例的一种图形化前端工程化框架构建方法的主流程图；图2是根据本专利技术实施例的一种图形化前端工程化框架构建方法的原理图。具体实施方式为进一步说明各实施例，本专利技术提供有附图，这些附图为本专利技术揭露内容的一部分，其主要用以说明实施例，并可配合说明书的相关描述来解释实施例的运作原理，配合参考这些内容，本领域普通技术人员应能理解其他可能的实施方式以及本专利技术的优点，图中的组件并未按比例绘制，而类似的组件符号通常用来表示类似的组件。根据本专利技术的实施例，提供了一种图形化前端工程化框架构建方法。现结合附图和具体实施方式对本专利技术进一步说明，如图1-2所示，根据本专利技术实施例的图形化前端工程化框架构建方法，该方法包括以下步骤：S1、项目仓库创建；S2、项目代码预生成；S3、代码提示与补全；S4、打包与部署。在一个实施例中，所述项目仓库创建包括本地创建与在线创建中的其本文档来自技高网...

【技术保护点】
1.一种图形化前端工程化框架构建方法，其特征在于，该方法包括以下步骤：/nS1、项目仓库创建；/nS2、项目代码预生成；/nS3、代码提示与补全；/nS4、打包与部署。/n

【技术特征摘要】
1.一种图形化前端工程化框架构建方法，其特征在于，该方法包括以下步骤：
S1、项目仓库创建；
S2、项目代码预生成；
S3、代码提示与补全；
S4、打包与部署。


2.根据权利要求1所述的一种图形化前端工程化框架构建方法，其特征在于，所述项目仓库创建包括本地创建与在线创建中的其中一种。


3.根据权利要求所述2的一种图形化前端工程化框架构建方法，其特征在于，所述本地创建包括以下步骤：
S11、选择前端框架类型，创建前端脚手架；
S12、在弹出选项框内输入代码设置本地项目配置，并将其存储在默认的代码存储库中；
S13、缓冲区间对代码进行校验，若代码有冲突错误，则返回消息给工作区间，若代码没有冲突错误，则同步本地代码区间内容。


4.根据权利要求3所述的一种图形化前端工程化框架构建方法，其特征在于，所述在线创建包括以下步骤：
S11′、选择前端框架类型，创建前端脚手架；
S12′、在弹出选项框内输入代码设置本地项目配置，并将其存储在默认的代码存储库中；
S13′、利用远程缓冲区间拷贝当前远程仓库代码；
S14′、缓冲区间通过对比分析算法对代码进行校验，算法公式如下：

；
其中，Xi代表本地代码仓库序列，Yj代表远程代码仓库序列，c[i，j]代表序列Xi和Yj的最长公共子序列的长度，Xi=<x1，x，…，xi>，Yj=<y1，y2，…，yj>；
S15′、若计算得到c中有重复内容则判断为冲突项，对冲突进行解决，重复步骤S14′直至c为0时判断验证通过并同步至远程代码仓库。


5.根据权利要求4所述的一种图形化前端工程化框架构建方法，其特征在于，所述代码储存库包括工作区间，缓冲区间及本地代码区间。

<...

【专利技术属性】
技术研发人员：张洁，陈克，翟铖杰，
申请(专利权)人：南京铉盈网络科技有限公司，南京智盈人工智能研究院有限公司，
类型：发明
国别省市：江苏;32