【技术实现步骤摘要】
本专利技术涉及一种web应用前端代码生成方法及系统，尤其涉及一种基于ts的web应用前端代码生成方法及系统。
技术介绍
1、在web技术不断发展的今天，主流技术栈不断地迭代更新，对项目交付的要求也越来越高，如何能快速的、高质量的交付前端项目是迫切需要解决的问题之一。目前前端工程已经逐渐成熟，但是还解决不了前端生产效率的问题，对于同一个功能，由于技术栈不同或者前端展示形式不同，势必会有大量开发工作。在前后端分离的项目中，特别是以ts为主要技术栈的项目中，大量的基础工作需要开发人员完成，前端生产效率过低。
2、在现有的前后端分离项目中，前端并不关注软件设计阶段抽象出的实例对象，当引入ts(typescript)以后，后端接口返回的实例对前端是有意义，如果前后端对于同一业务实例不统一，则会导致开发过程中无法发挥出ts的最大优势，如果不能发挥出ts的最大优势，那么在前端项目中引入ts只能是徒增前端工作量。针对ts类型检查的interface，会根据接口逐一完成每个ts的interface，造成代码冗余。针对国际化词条，如果没有实例对象，同一对象的同一属性，会产生多个词条，导致代码冗余。在业务开发阶段，针对某一业务对象的增删改查基础操作仍然需要开发，包括配套的路由、导航菜单等功能开发。针对后端固定的一些枚举和映射关系，在传递过程中容易丢失。重复和繁重的基础代码开发对前端开发资源造成浪费，而且难免会产生bug，达不到让开发者只关注核心业务、减少简单繁琐的工作、提高生产的效率。
技术实现思路p>
1、为了解决上述技术所存在的不足之处，本专利技术提供了一种基于ts的web应用前端代码生成方法及系统。
2、为了解决以上技术问题，本专利技术采用的技术方案是：一种基于ts的web应用前端代码生成方法，包括以下步骤：
3、步骤s1：通过将用于开发前端的每个技术栈的项目模板上传至git仓库中，预设web应用的项目模板；对web应用的项目模板进行初始化，即在本地生成模板项目系统；
4、步骤s2：根据软件项目工程理论，在web应用中抽象出若干个实体对象；将实体对象的实体属性利用go.js绘制成e-r图，并录入模板项目系统中；
5、步骤s3：利用web应用的前端托拉拽配置方式录入实体对象的实体属性信息于前端页面中，通过node.js服务，模板项目系统生成具有实体属性信息的e-r图、数据库文档和数据库脚本，并以文件的形式进行下载；后端依据数据库文档和数据库脚本，通过虚拟接口服务向前端提供接口服务；
6、步骤s4：使用node.js的fs模块中readfile函数读取实体属性信息的e-r图，通过writefile函数将读取的实体属性信息生成为ts的interface文件；
7、步骤s5：使用node.js服务，通过writefile函数将读取的步骤s3中生成的interface文件中实体对象的实体属性名称生成为国家化词条和常量文件；
8、勾选多个实体对象，完善各实体对象的配置项，利用node.js中的fs模块生成业务代码。
9、进一步地，步骤s1中，每个技术栈的项目模块中自带有已经开发完成的部分公共功能，部分公共功能包括登陆、权限路由、个人信息查看和修改、密码修改、首页、左侧导航；并以npm package的形式，将每个技术栈中部分公共功能安装至web应用中。
10、进一步地，步骤s1中通过使用前端脚手架对web应用进行初始化；在使用前端脚手架之前，要预设脚手架参数；脚手架参数包括开发者信息、项目类型、项目信息、项目名称、所使用的技术栈的项目模板和版本号；基于commander执行命令行命令，通过inquire以询问的方式收集项目信息、项目名称、所使用的技术栈的项目模块和版本号，在git仓库中找到web应用的项目模块地址，将收集的项目信息替换至web应用的项目模块中；替换完成后，通过download-git-repo将web应用模板下载到本地，达到对web应用的项目模块进行初始化。
11、进一步地，步骤s2中实体属性包括实体名称、各实体属性名称、实体属性字段类型、实体属性字段长度、实体间的关系、实体间如何关联。
12、进一步地，步骤s4中实体属性信息对应的各实体属性均生成一个单独的interface文件；所述步骤s5中实体属性信息对应的各实体属性均生成一个单独的国际化词条文件；根据对实体属性的备注判断是否生成常量文件，若当前实体属性的备注为0，则对应的实体属性的属性值为非常量，则生成国际化词条文件；若当前实体属性的备注为1，则对应的实体属性的属性值为常量，则所有此实体属性生成为常量文件。
13、进一步地，步骤s6中实体对象的配置项为实体对象中实体属性的集合，包括业务是否显示在导航菜单中、路由的配置、查询条件的选择、列表展示项目的选择、接口选择、表单项的选择。
14、进一步地，步骤s5中业务代码包括可勾选实体对象的增删改查代码、路由代码和导航菜单代码，利用node.js服务调用通用的增删改查代码，使用步骤s4中生成的ts的interface文件中的实体属性名称和步骤s5中生成的国家化词条将通用的增删改查代码中的字段名称进行逐一替换，生成所述步骤s5中的可勾选实体对象的增删改查代码。
15、进一步地，读取所述路由代码，利用fs模块将路由节点插入到路由树中进行保存，将在导航才到中展示业务代码实现的业务；在业务代码生成后，重新启动模块项目系统进行验证；
16、将步骤s4中生成的interface文件、步骤s5中的国际化词条和常量文件、步骤s5中生成的业务代码分别保存到web应用的项目模板中对于interface文件、国际化词条、常量文件、业务代码的指定目录中。
17、一种基于ts的web应用前端代码生成系统，其特征在于，所述系统包括：软件设计模块、ts代码生成模块、公共代码生成模块、业务代码生成模块；
18、软件设计模块用于预设web应用的项目模板，利用前端脚手架对web应用的项目模板进行初始化，在本地生成模板项目系统；
19、ts代码生成模块用于node.js服务读取e-r图中的实体信息，并在web应用的指定位置上生成为ts代码的interface文件；
20、公共代码生成模块用于node.js服务读取interface文件中的实体对象的实体属性名称，并将每个实体对象生成为国际化词条文件和常量文件；
21、业务代码生成模块用于在系统中勾选多个实体对象，完善实体对象的配置项，使用node.js服务生成所勾选的实体对象的增删改查代码、路由代码和导航菜单代码。
22、进一步地，在软件设计模块中，使用vite中进行配置生成的模块项目系统，实现仅在本地开发时加载软件设计模块。
23、本专利技术公开了一种基于ts的web应用前端代码生成方法及系统，通过前端脚手架，将各个技术栈的项目模板进行整合，以询问的方式实现本文档来自技高网...
【技术保护点】
1.一种基于TS的Web应用前端代码生成方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S1中，每个技术栈的项目模块中自带有已经开发完成的部分公共功能，部分公共功能包括登陆、权限路由、个人信息查看和修改、密码修改、首页、左侧导航；并以npm package的形式，将每个技术栈中部分公共功能安装至Web应用中。
3.根据权利要求1所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S1中通过使用前端脚手架对Web应用进行初始化；在使用前端脚手架之前，要预设脚手架参数；脚手架参数包括开发者信息、项目类型、项目信息、项目名称、所使用的技术栈的项目模板和版本号；基于commander执行命令行命令，通过inquire以询问的方式收集项目信息、项目名称、所使用的技术栈的项目模块和版本号，在Git仓库中找到Web应用的项目模块地址，将收集的项目信息替换至Web应用的项目模块中；替换完成后，通过download-git-repo将Web应用模板下载到本地，达到对Web应用的项目模块进行初始化
4.根据权利要求1所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S2中实体属性包括实体名称、各实体属性名称、实体属性字段类型、实体属性字段长度、实体间的关系、实体间如何关联。
5.根据权利要求4所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S4中实体属性信息对应的各实体属性均生成一个单独的interface文件；所述步骤S5中实体属性信息对应的各实体属性均生成一个单独的国际化词条文件；根据对实体属性的备注判断是否生成常量文件，若当前实体属性的备注为0，则对应的实体属性的属性值为非常量，则生成国际化词条文件；若当前实体属性的备注为1，则对应的实体属性的属性值为常量，则所有此实体属性生成为常量文件。
6.根据权利要求1所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S6中实体对象的配置项为实体对象中实体属性的集合，包括业务是否显示在导航菜单中、路由的配置、查询条件的选择、列表展示项目的选择、接口选择、表单项的选择。
7.根据权利要求6所述的基于TS的Web应用前端代码生成方法，其特征在于：所述步骤S5中业务代码包括可勾选实体对象的增删改查代码、路由代码和导航菜单代码，利用Node.js服务调用通用的增删改查代码，使用步骤S4中生成的TS的interface文件中的实体属性名称和步骤S5中生成的国家化词条将通用的增删改查代码中的字段名称进行逐一替换，生成所述步骤S5中的可勾选实体对象的增删改查代码。
8.根据权利要求7所述的基于TS的Web应用前端代码生成方法，其特征在于：读取所述路由代码，利用fs模块将路由节点插入到路由树中进行保存，将在导航才到中展示业务代码实现的业务；在业务代码生成后，重新启动模块项目系统进行验证；
9.一种基于TS的Web应用前端代码生成系统，其特征在于，所述系统包括：软件设计模块、TS代码生成模块、公共代码生成模块、业务代码生成模块；
10.根据权利要求9所述的基于TS的Web应用前端代码生成系统，其特征在于：所述软件设计模块中生成的模板项目系统，是在vite中进行配置的，仅在本地开发时加载软件设计模块。
...【技术特征摘要】
1.一种基于ts的web应用前端代码生成方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的基于ts的web应用前端代码生成方法，其特征在于：所述步骤s1中，每个技术栈的项目模块中自带有已经开发完成的部分公共功能，部分公共功能包括登陆、权限路由、个人信息查看和修改、密码修改、首页、左侧导航；并以npm package的形式，将每个技术栈中部分公共功能安装至web应用中。
3.根据权利要求1所述的基于ts的web应用前端代码生成方法，其特征在于：所述步骤s1中通过使用前端脚手架对web应用进行初始化；在使用前端脚手架之前，要预设脚手架参数；脚手架参数包括开发者信息、项目类型、项目信息、项目名称、所使用的技术栈的项目模板和版本号；基于commander执行命令行命令，通过inquire以询问的方式收集项目信息、项目名称、所使用的技术栈的项目模块和版本号，在git仓库中找到web应用的项目模块地址，将收集的项目信息替换至web应用的项目模块中；替换完成后，通过download-git-repo将web应用模板下载到本地，达到对web应用的项目模块进行初始化。
4.根据权利要求1所述的基于ts的web应用前端代码生成方法，其特征在于：所述步骤s2中实体属性包括实体名称、各实体属性名称、实体属性字段类型、实体属性字段长度、实体间的关系、实体间如何关联。
5.根据权利要求4所述的基于ts的web应用前端代码生成方法，其特征在于：所述步骤s4中实体属性信息对应的各实体属性均生成一个单独的interface文件；所述步骤s5中实体属性信息对应的各实体属性均生成一个单独的国际化词条文件...
【专利技术属性】
技术研发人员：刘鹏威，王美佳，王策，庞景秋，齐井春，
申请(专利权)人：长春嘉诚信息技术股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。