优化web应用系统开发的方法及web前端项目结构技术方案

本发明专利技术公开了一种优化web应用系统开发的方法，包括：通过Swagger统一web应用开发前后端接口定义与对接的规范与风格，使用Java作为开发语言，并使用springboot或springmvc作为开发框架；在web应用后端定义API并集成Swagger，通过Swagger生成对应的web接口文档和接口类型定义文件；在web应用前端使用有javascript运行能力的引擎作为开发的支持环境，web应用前端查看并获取web应用后端生成的web接口文档和接口类型定义文件，通过脚本将接口类型定义文件转为web应用前端开发中可用的接口方法。本发明专利技术方法通过统一web应用前后端定义API的框架，使用Swagger作为桥梁起到简化流程、提高效率的效果。

Optimizing the Development Method of Web Application System and the Structure of Web Front-end Project

【技术实现步骤摘要】
优化web应用系统开发的方法及web前端项目结构
本专利技术涉及使用Typescript开发web应用的前后端研发
，特别涉及一种优化web应用系统开发的方法及web前端项目结构。
技术介绍
目前市场上web应用普遍流行使用前后端分离的开发技术，即前后端同时进行开发，此种开发模式使前后端能够并发的进行工作，加快项目的诞生。但在此种模式下定义API以及前后端的沟通与对接会消耗大量的时间。在web后端的开发领域，Java一直占有很大的比例，截止到目前，多采用springmvc(或springboot)作为开发框架，maven作为包管理，使用Swagger作为定义RESTFUL接口的API框架。web应用前端开发自前后端独立开发后有较大的发展，特别是node的诞生使得前端的开发人员能更加独立的开发。目前，常采用nodeJs作为前端页面开发的支持环境，使用React/Vue/Angular作为开发框架。但在实际开发中Javascript的弱类型一直饱受诟病，很多问题不能及时发现和解决，只能通过全面测试或者上线问题暴露后再解决。在此种环境下，Typescript的应运而生使得前端开发又进一步。
技术实现思路
本专利技术的目的是克服上述
技术介绍
中不足并基于上述
技术介绍
，提供一种优化web应用系统开发的方法及web前端项目结构，旨在以目前主流开发技术的环境下，使web应用前后端的开发者能减少接口定义以及沟通成本,从而更多的关注自身业务研发。为了达到上述的技术效果，本专利技术采取以下技术方案：一种优化web应用系统开发的方法，用于优化web应用系统开发的方法，包括：通过Swagger统一web应用开发前后端接口定义与对接的规范与风格，使用Java作为开发语言，并使用springboot或springmvc作为开发框架；实际中，也可选用其他可以继承Swagger的开发语言或框架；在web应用后端定义API并集成Swagger，同时，通过Swagger生成对应的web接口文档和接口类型定义文件；其中，具体是通过注解或其他方式自动生成如json、yaml或其他类型的web接口文档；在web应用前端使用有javascript运行能力的引擎如nodeJs作为开发必须的支持环境，web应用前端实时查看并获取所述web应用后端生成的web接口文档和接口类型定义文件，并通过javascript或Typescrip语言编写的脚本将所述接口类型定义文件转为web应用前端开发中可用的接口方法；其中，web应用后端虽然会对每个API做详细的类型以及参数类型定义，但名称一般不太友好，故本方案中，web应用前端会根据API接口类型再自定义接口类型，然后进行集中管理和使用，从而使前端项目结构更加缜密。进一步地，所述web应用后端集成Swagger并生成对应的web接口文档和接口类型定义文件时具体包括以下步骤：S1.所述web应用后端采用可以集成Swagger框架的语言如Java语言作为开发语言并采用可以集成Swagger的框架如springmvc或springroot框架作为开发框架；S2.所述web应用后端通过集成Swagger，在定义API的过程中生成详细的接口类型定义文件并通过SwaggerUI将此接口类型定义文件以web页面形式作为展现，直接作为web形式的web接口文档。进一步地，所述接口类型定义文件是通过Swagger生成的如json或yaml等能定义详细数据结构以及类型的文档。进一步地，所述接口类型定义文件中包括：接口的请求host、公有请求路径、每个详细的API模块私有请求路径、对每个详细的API模块分别包含或部分包含增删改查的数据操作方式、对每一种操作中包含对应的请求参数名称以及类型定义、对每一种操作中包含对应的请求参数所处位置定义、对每一种操作定义进行全部定义或部分定义请求接口的返回状态码以及对应的返回数据格式及内容。进一步地，所述web应用前端具体使用node作为前端开发的环境支持，且web应用前端使用Typescript作为前端开发语言，通过nodeJs运行脚本的方式以网络请求获取接口类型定义文件，且所述web应用前端开发中可用的接口方法为Typescript方法。进一步地，通过javascript或Typescrip语言编写的脚本将所述接口类型定义文件转为web应用前端开发中可用的接口方法时，所述脚本通过nodeJs执行，且包括以下步骤：S1.所述脚本根据web应用后端集成Swagger后产生服务的网络地址，使用nodeJs的request模块请求所述接口类型定义文件；其中，若脚本先在请求接口类型定义文件中若遇到请求不到或权限限制或其他问题时，则需要web应用前端与web应用后端协调使整个过程能顺利进行；S2.所述脚本将接口类型定义文件转为针对一个个独立的API访问方法来访问web应用后端的参数结构与类型定义，并以所述API访问方法的形参结构与类型来展现。进一步地，所述步骤S2中脚本将接口类型定义文件转为针对一个个独立的API访问方法时，具体包括以下步骤：S101.提取所述接口类型定义文件的公有请求路径组成API的基础访问路径；S102.按一定顺序提取每个详细的API模块私有请求路径，并遍历对应请求类型，以小驼峰的方式组成对每个详细的API模块每种请求方式的API访问方法的方法名；S103.根据所述web应用后端定义的参数位置类型生成所述API访问方法的参数的传递类型；如包括但不限于body，path，query等；S104.根据所述返回状态码以及对应的返回数据格式及内容，定义所述API访问方法的返回值与类型；S105.结合所述web前端使用的网络请求架构，将对应的网络请求方法注入到每个所述API访问方法中。进一步地，所述API访问方法的形参结构与类型包括所述接口类型定义文件所定义的参数结构、参数类型与必填类型，其中，所述必填类型通过Typescript所中Partial的方式来体现，其具体的写法为参数定义中是否含有“？”；所述步骤S104中所述返回状态码为request协议的网络请求状态码，所述步骤S105中所述网络请求架构包括axios或ajax，所述注入到每个所述API访问方法具体是将所有API统一放置到一个Service的Generate方法中，通过外部传入请求模块的配置来实现。进一步地，所述web应用前端实时查看所述web接口文档的同时也使用所述web接口文档做实时请求，并自定义请求参数和查看接口详细的返回数据，则所述web应用后端的接口类型定义有变化时，只需刷新所需web接口文档便可立即查看更新，其中，web应用前端可以通过浏览器访问web应用后端集成SwaggerUI后产生的服务地址查看具体的接口定义，若web应用前端不能访问web接口文档时，则需要与web应用后端协商使其能正常工作。同时，本专利技术还公开了一种web前端项目结构，包括：基础组件模块，用于存放web前端项目的全局公用基础组件；构建模块，用于存放和项目相关的脚本文件，其中，所述脚本文件至少包括API生成脚本；接口服务模块，用于存放使用所述API生成脚本生成的API模块以及对API模块进行二次封装，或实现对全局API请求的拦截与注入的方法；功能本文档来自技高网...

【技术保护点】
1.一种优化web应用系统开发的方法，用于提升web应用前后端定义与对接API的效率，其特征在于，包括：通过Swagger统一web应用开发前后端接口定义与对接的规范与风格，使用Java作为开发语言，并使用springboot或springmvc作为开发框架；在web应用后端定义API并集成Swagger，同时，通过Swagger生成对应的web接口文档和接口类型定义文件；在web应用前端使用有javascript运行能力的引擎作为开发必须的支持环境，web应用前端实时查看并获取所述web应用后端生成的web接口文档和接口类型定义文件，并通过javascript或Typescrip语言编写的脚本将所述接口类型定义文件转为web应用前端开发中可用的接口方法。

【技术特征摘要】
1.一种优化web应用系统开发的方法，用于提升web应用前后端定义与对接API的效率，其特征在于，包括：通过Swagger统一web应用开发前后端接口定义与对接的规范与风格，使用Java作为开发语言，并使用springboot或springmvc作为开发框架；在web应用后端定义API并集成Swagger，同时，通过Swagger生成对应的web接口文档和接口类型定义文件；在web应用前端使用有javascript运行能力的引擎作为开发必须的支持环境，web应用前端实时查看并获取所述web应用后端生成的web接口文档和接口类型定义文件，并通过javascript或Typescrip语言编写的脚本将所述接口类型定义文件转为web应用前端开发中可用的接口方法。2.根据权利要求1所述的一种优化web应用系统开发的方法，其特征在于，所述web应用后端集成Swagger并生成对应的web接口文档和接口类型定义文件时具体包括以下步骤：S1.所述web应用后端采用可以集成Swagger框架的语言作为开发语言并采用可以集成Swagger的框架作为开发框架；S2.所述web应用后端通过集成Swagger，在定义API的过程中生成详细的接口类型定义文件并通过SwaggerUI将此接口类型定义文件以web页面形式作为展现，直接作为web形式的web接口文档。3.根据权利要求2所述的一种优化web应用系统开发的方法，其特征在于，所述接口类型定义文件是通过Swagger生成的能定义详细数据结构以及类型的文档。4.根据权利要求3所述的一种优化web应用系统开发的方法，其特征在于，所述接口类型定义文件中包括：接口的请求host、公有请求路径、每个详细的API模块私有请求路径、对每个详细的API模块分别包含或部分包含增删改查的数据操作方式、对每一种操作中包含对应的请求参数名称以及类型定义、对每一种操作中包含对应的请求参数所处位置定义、对每一种操作定义进行全部定义或部分定义请求接口的返回状态码以及对应的返回数据格式及内容。5.根据权利要求4所述的一种优化web应用系统开发的方法，其特征在于，所述web应用前端具体使用node作为前端开发的环境支持，且web应用前端使用Typescript作为前端开发语言，通过nodeJs运行脚本的方式以网络请求获取接口类型定义文件，且所述web应用前端开发中可用的接口方法为Typescript方法。6.根据权利要求5所述的一种优化web应用系统开发的方法，其特征在于，通过javascript或Typescrip语言编写的脚本将所述接口类型定义文件转为web应用前端开发中可用的接口...

【专利技术属性】
技术研发人员：岳锐，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51