CN116225415A - 一种前端工程化方法及*** - Google Patents

一种前端工程化方法及*** Download PDF

Info

Publication number
CN116225415A
CN116225415A CN202310228616.3A CN202310228616A CN116225415A CN 116225415 A CN116225415 A CN 116225415A CN 202310228616 A CN202310228616 A CN 202310228616A CN 116225415 A CN116225415 A CN 116225415A
Authority
CN
China
Prior art keywords
project
template
target
development
visualized
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.)
Pending
Application number
CN202310228616.3A
Other languages
English (en)
Inventor
李军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jinmao Cloud Technology Service Beijing Co ltd
Original Assignee
Jinmao Cloud Technology Service Beijing Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Jinmao Cloud Technology Service Beijing Co ltd filed Critical Jinmao Cloud Technology Service Beijing Co ltd
Priority to CN202310228616.3A priority Critical patent/CN116225415A/zh
Publication of CN116225415A publication Critical patent/CN116225415A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30—Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)

Abstract

本申请公开了一种前端工程化方法及***，本方法首先根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；然后在前端开发项目中配置与目标工程的后端框架建立连接API接口，最后根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。本发明将项目开发自动化、智能化，进一步提升了开发效率。

Description

一种前端工程化方法及***
技术领域
本发明涉及网络货运行业诚信评估领域，特别涉及一种前端工程化方法及***。
背景技术
随着网络的发展，出现了越来越多智能设备中的应用程序，现有的各种应用程序大多需要经过前端开发工程化***来进行开发，以方便技术人员。
通常前端开发人员在项目日常迭代中会遇到以下几种情况：
1、创建前端项目：创建前端项目的时候要去下载一个前端框架并安装依赖经常会遇到框架太老没办法运行或者安装依赖的时候由于版本号混乱导致各种报错；
2、新建页面：新建页面的时候需要修改路由然后添加页面入口整个操作需要各种切换编辑页面流程重复繁琐经常忘记步骤且容易出错；
3、创建后端项目：开发人员想创建后端项目但是网上鱼龙混杂(如expresskoaegg)等没有一个标准可用的后端框架就算找到了运行以后也要进行二次封装和修改才能达到可用的状态极其复杂；
4、缺少统一规范：有的项目启动命令是npmrunstart有的项目是npmrun dev当多个项目切换容易忘记；
然而现有业界前端框架vuereact都有内置的cli工具vue-cli、react-cli此类工具也仅仅是基于框架做了简单的封装，对于业务的复杂性和定制化并没有做过多干预。
发明内容
基于此，本申请实施例提供了一种前端工程化方法及***，能够解决现有技术存在的问题，并将项目开发自动化、智能化，进一步提升了开发效率。
第一方面，提供了一种前端工程化方法，该方法包括：
根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
可选地，所述根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目，包括：
根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
可选地，所述创建目标工程的可视化前端开发项目，还包括：
根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
可选地，所述方法还包括：
在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
可选地，所述目标工程的后端框架至少可以包括koa2。
第二方面，提供了一种前端工程化***，该***包括：
创建模块，用于根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
连接模块，用于在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
生成模块，用于根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
可选地，所述创建模块包括：
根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
可选地，所述创建目标工程的可视化前端开发项目，还包括：
根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
可选地，所述***还包括：
构建模块，用于在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
可选地，所述目标工程的后端框架至少可以包括koa2。
本申请实施例提供的技术方案带来的有益效果至少包括：
本申请实施例提供的技术方案中首先根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；然后在前端开发项目中配置与目标工程的后端框架建立连接API接口，最后根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。可以看出，本发明的有益效果在于：
1、有利于团队技术栈统一特别针对团队项目过多的问题，前端技术栈通过基于模板生成项目有利于团队技术栈统一，便于团队后续协作和针对统一技术栈做深入的学习；
2、降低开发搭建成本一键生成脚手架可及时响应新的项目可以立刻投入到业务开发中降低新项目搭建成本；
3、减少人为操作导致的项目问题本发明支持快速生成页面和生成接口，正常开发中需要手动去创建页面，创建路由操作多个文件，特别容易出错通过***创建保证效率的同时也保证了准确性；
4、减少运维成本一键发布，工具内集成了对项目的编译和打包并部署到测试环境的脚本通过一键部署，可以及时更新到测试环境。
附图说明
为了更清楚地说明本发明的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引申获得其它的实施附图。
图1为本申请实施例提供的前端工程化方法步骤流程图；
图2为本申请实施例提供的开发流程示意图；
图3为本申请实施例提供的Node服务框架示意图；
图4为本申请实施例提供的开发者工具示意图；
图5为本申请实施例提供的技术端实现示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
在本发明的描述中，术语“包括”、“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包括了一系列步骤或单元的过程、方法、***、产品或设备不必限于已明确列出的那些步骤或单元，而是还可包含虽然并未明确列出的但对于这些过程、方法、产品或设备固有的其它步骤或单元，或者基于本发明构思进一步的优化方案所增加的步骤或单元。
基于上述背景，现有开发团队承接多个项目后续可能会更多，为了让团队快速搭建脚手架更多的关注业务开发，本申请提供了一种前端工程化方法和***，主要聚焦于将项目开发自动化智能化提升开发效率通过网络代理和自动发布等定制计划功能解决开发中的痛点。
具体地，请参考图1，其示出了本申请实施例提供的一种前端工程化方法的流程图，该方法可以包括以下步骤：
步骤101，根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目。
其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序。在本申请实施例中，根据用户输入的操作指令确定目标工程的前端开发项目的模板工程并配置初始化信息；
根据初始化信息从项目模板库中获取与模板工程对应的项目模板，以完成前端开发项目的创建。其中还可以根据输入的指令生成前端开发项目的前端页面；其中，前端页面至少包括侧边栏、目录。
步骤102，在前端开发项目中配置与目标工程的后端框架建立连接API接口。
步骤103，根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
在步骤103之后还包括在接收到用户指令时调用生产环境的项目代码对目标页面进行开发构建。
如图2，给出了本申请技术体系流程图，其中表示了本申请中jm技术体系为前端框架、node后端框架以及开发者工具cli所构成，其中开发者工具cli充当开发桥梁，将前后端项目连接起来，让开发自动化、智能化。本申请所提供的cli工具本质上是一个npm包在bin目录通过node执行相关脚本文件，如图3给出了Node服务框架示意图，其可以补足前端能力，扩展更多边界。基于Node相关包(commanderinquirershelljs)通过在终端输入init可以快捷创建一个前端项目和一个基于koa2的后端框架并且自动化安装依赖。其中前端项目和后端你项目会建立一个模板仓库基于模板仓库可以clone出多个子项目项目内置eslintjest等常用稳定版本的包通过再终端输入page就可以快速创建一个前端页面并且自动配置好页面代码页面路由页面侧边栏入口并且还能生成页面目录让你的页面有更高的灵活度通过api可以快速创建后端接口服务自动配置好controller接口路由接口配置等等。
同时支持一键部署测试环境通过publish可以对项目进行编译生成可部署到生产环境的项目代码，以上给出了通过命令行工具实现的过程，但其包括以下几个痛点：
(1)传统命令行工具复杂难用；
(2)级联操作对新手不友好；
(3)没办法预览页面模板；
(4)功能相对臃肿。
所以在本申请实施例中，继而可以通过将终端terminal和可视化后的CLI嵌入到electron里将级联流程合并操作可视化支持预览和添加模板页面。如图4，给出了本申请所提供的开发者工具CLI的示意图，可以通过开发者工具cli将项目开发自动化、智能化，提升开发效率；并且，提供网络代理和自动发布等定制化功能，解决开发中的痛点。
如图5给出了本申请各个端技术实现的示意图，其中：
整个交互测基于bininquirecommanderactrions；
脚手架中包括：frontserverfullstackextends；
文件***包括：fsfs-exrtraFile-systemshelljs；
桌面应用采用：electron
本申请实施例还提供的一种前端工程化***。***包括：
创建模块，用于根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
连接模块，用于在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
生成模块，用于根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
在本申请可选的实施例中，所述创建模块包括：
根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
在本申请可选的实施例中，所述创建目标工程的可视化前端开发项目，还包括：
根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
在本申请可选的实施例中，所述***还包括：
构建模块，用于在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
在本申请可选的实施例中，所述目标工程的后端框架至少可以包括koa2。
本申请实施例提供的前端工程化***用于实现上述前端工程化方法，关于前端工程化***的具体限定可以参见上文中对于前端工程化方法的限定，在此不再赘述。上述前端工程化***中的各个部分可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于设备中的处理器中，也可以以软件形式存储于设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种前端工程化方法，其特征在于，所述方法包括：
根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
2.根据权利要求1所述的方法，其特征在于，所述根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目，包括：
根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
3.根据权利要求1所述的方法，其特征在于，所述创建目标工程的可视化前端开发项目，还包括：
根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
5.根据权利要求1所述的方法，其特征在于，所述目标工程的后端框架至少可以包括koa2。
6.一种前端工程化***，其特征在于，所述***包括：
创建模块，用于根据预先建立的模板仓库，将可视化后的CLI嵌入到electron工具中，创建目标工程的可视化前端开发项目；其中，具体包括创建工程的目录和文件，并根据项目模板安装所需依赖程序；
连接模块，用于在所述前端开发项目中配置与目标工程的后端框架建立连接API接口，
生成模块，用于根据用户输入的编译操作指令，通过publish对项目进行打包和编译处理，生成可部署到生产环境的项目代码。
7.根据权利要求6所述的***，其特征在于，所述创建模块包括：
根据用户输入的操作指令确定所述目标工程的前端开发项目的模板工程并配置初始化信息；
根据所述初始化信息从所述项目模板库中获取与所述模板工程对应的项目模板，以完成前端开发项目的创建。
8.根据权利要求6所述的***，其特征在于，所述创建目标工程的可视化前端开发项目，还包括：
根据输入的指令生成前端开发项目的前端页面；其中，所述前端页面至少包括侧边栏、目录。
9.根据权利要求6所述的***，其特征在于，所述***还包括：
构建模块，用于在接收到用户指令时调用所述生产环境的项目代码对目标页面进行开发构建。
10.根据权利要求6所述的***，其特征在于，所述目标工程的后端框架至少可以包括koa2。
CN202310228616.3A 2023-03-10 2023-03-10 一种前端工程化方法及*** Pending CN116225415A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310228616.3A CN116225415A (zh) 2023-03-10 2023-03-10 一种前端工程化方法及***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310228616.3A CN116225415A (zh) 2023-03-10 2023-03-10 一种前端工程化方法及***

Publications (1)

Publication Number Publication Date
CN116225415A true CN116225415A (zh) 2023-06-06

Family

ID=86578523

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310228616.3A Pending CN116225415A (zh) 2023-03-10 2023-03-10 一种前端工程化方法及***

Country Status (1)

Country Link
CN (1) CN116225415A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116755698A (zh) * 2023-08-22 2023-09-15 之江实验室 基于cli的前端工程创建和升级***及方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116755698A (zh) * 2023-08-22 2023-09-15 之江实验室 基于cli的前端工程创建和升级***及方法
CN116755698B (zh) * 2023-08-22 2023-12-08 之江实验室 基于cli的前端工程创建和升级***及方法

Similar Documents

Publication Publication Date Title
US10572249B2 (en) Software kit release management
CN108845940B (zh) 一种企业级信息***自动化功能测试方法和***
EP2245532B1 (en) Method and apparatus for generating virtual software platform based on component model and validating software platform architecture using the platform
CN100543701C (zh) 一种实现嵌入式软件异常测试的方法及***
CN102289378B (zh) 自动生成应用程序的方法
CN108319460B (zh) 应用程序安装包的生成方法、装置、电子设备及存储介质
CN107704238B (zh) 一种对项目进行打包的方法及装置
CN113076096B (zh) 一种桌面应用程序开发方法、装置、设备及存储介质
CN108923997B (zh) 一种基于python的云服务节点自动测试方法及装置
CN111857801B (zh) 一种移动应用的构建方法
CN101645009A (zh) Web服务集成开发***和方法
CN112148278A (zh) 可视化的区块链智能合约框架及智能合约开发部署方法
Philips et al. Towards tierless web development without tierless languages
CN114115838A (zh) 一种基于分布式组件和云平台的数据交互方法及***
CN116225415A (zh) 一种前端工程化方法及***
CN110928780B (zh) 一种代码质量控制方法、装置、计算机设备及存储介质
CN110647349B (zh) 一种实现iOS APP持续交付的方法
Clerckx et al. Generating context-sensitive multiple device interfaces from design
CN110321138B (zh) 一种程序更新、迁移方法和装置
CN116578282A (zh) 代码生成方法、装置、电子设备及介质
US10732947B2 (en) Information-technology workflow using tiles that declaratively specify datatypes
CN114035786A (zh) 一种基于依赖的微前端兼容迁移方法及***
CN113886008A (zh) 一种虚拟机管理方法、***、设备以及介质
JP7328922B2 (ja) 設定装置、設定方法、及びプログラム
CN110362320A (zh) 一种应用开发平台的命令实现方法和装置

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