乐趣区

关于typescript:如果你用TypeScript写Vue3你可以来看看这篇文章

jiezi

① 我的项目介绍

我的项目的装置与初始化请先查看宿主我的项目

https://gitee.com/hamm/AirPowerDemo

为了满足前端开发标准化、工程化、系统化等等需要，咱们设计并开发了一个开发组件库和罕用类库和办法库的汇合根底脚手架，其中蕴含了一些页面通用的布局、罕用的弹窗和交互、提示信息以及网络申请，强类型面向对象的束缚标准等，以满足日常开发的快捷、持重、标准化等要求。

② 我的项目依赖

AirPower 目前依赖 Vue + TypeScript + Element Plus + class-transformer 等组件，其中还蕴含了一些第三方模块的依赖，具体能够参考我的项目的 package.json。

③ 模块阐明

AirPower 内置了以下一些模块：

  • component 组件

    蕴含了罕用的 AInput AButton ATable AToolBar APage等罕用的组件；

  • config 配置

    蕴含了 实体配置、字段在 Table Search Form 中的个性配置、Props传参配置、图像配置等罕用的配置类、配置办法等；

  • decorator 装璜器：

    提供了表格配置、表单配置、类和属性自定义名称配置、搜寻配置等装璜器；

  • dto 数据传输模型

    蕴含了一些分页、排序、罕用类、形象基类等规范的数据传输模型；

  • enum 枚举

    提供了目前曾经达成规范和标准的一些枚举信息，如色彩、日期格局、反馈图标款式、搜寻类型、HTTP 参数等；

  • feedback 反馈

    基于 Element Plus 提供的规范反馈组件，定义了标准的一些弹窗、确认框、告诉信息等反馈组件；

  • helper 助手类

    提供了工夫日期、文件、数据转换、弹窗、随机与加解密、路由等快捷操作的助手类和办法；

  • interface 接口

    提供了一些罕用数据结构的标准化配置以及须要被实现的标准接口；

  • model 数据模型

    提供一些根底的数据模型与操作方法；

  • service 服务

    提供了一些根底的 CRUD 办法的根底网络申请服务和一些罕用的 API；

  • view 页面

    提供了谬误页等罕用的内置页面；

④ 开发理念

  • CaaS 配置即服务

    为了防止大量反复代码的呈现，咱们尽可能通过 TypeScript 的装璜器将一些类或属性的配置写入到原型链中，在须要应用这些配置的中央通过反射将保留的参数配置取出应用即可。

    其中，如果波及一些默认值，将默认值通过 AirConfig 作为根底配置进行初始化到零碎中，通过配置项的应用范畴和配置老本进行调整后，应用方能够最小配置的形式进行零碎业务的接入和开发。

  • 强面向对象的反对

    在雷同或类似业务中，咱们应用规范的强面向对象进行实现，基于继承、封装等个性进行代码的复用，通过泛型、接口等形式将类似的业务逻辑进行标准化束缚，实现类似但又不完全相同的一些灵便业务的疾速开发。

  • 数据和类的转换器

    为了在后端因业务要求进行属性调整后前端不须要做大量的查找替换进行修复，咱们引入了 class-transformer 这个第三方库进行数据转换，通过自由选择 Expose 字段和配置转换规则来实现仅在配置层即可解决字段属性变更的问题。具体请浏览对于数据转换的局部。

⑤ 设计要点

  • 1️⃣ TypeScript 装璜器篇

    装璜器是 TypeScript 引入相似 Java 注解 的一个编程形式，依赖装璜器，可无侵入式的在业务前后运行其余的业务代码而无需改变原有的业务代码。

    装璜器的实质就是一个 Function 类、办法、属性、参数等在标记了装璜器后，会执行装璜器的相干办法，而后通过原型链或者反射的形式，对操作的对象进行一些数据的解决或逻辑的限度。

  • AirPower 应用的一般装璜器
    @ClassName('用户') // 为类标记一个可读的名称
@FieldName('实在姓名') // 为属性标记一个可读的名称
@Description('这是用户的名称') // 为属性标记一个可读的形容

    标记了 ClassName FieldName Description 装璜器的类或属性，可应用类的原型或者类的对象进行获取

    #### 应用场景介绍

    当咱们须要频繁的批改某些实体的名字，如 AppEntity 从 利用 改为 应用程序，姓名改为实在姓名，咱们往往须要去查找替换，所以咱们间接标记到对应的 AppEntity 类上，其余中央对立从实体中间接获取。

  • AirPower 应用的表格配置装璜器
    @TableField() // 为实体类的属性标记 是否为表格应用的字段

    TableField 注解反对传入一个 ITableFieldConfig 接口束缚下的 JSON 配置项，可对表格的列名称、宽度、是否自定义列、是否枚举列等进行一系列的配置。

    应用时，可通过类的原型或类的对象进行读取并传入给 ATable 组件。获取办法如下：

    UserEntity.prototype.getTableFieldConfigList()
// 或者
const user = new UserEntity()
user.getTableFieldConfigList() // 用户列表的表格显示字段配置信息数组
  • AirPower 应用的搜寻配置装璜器
    @SearchField() // 为实体类的属性标记 是否为搜寻应用的字段

    SearchField 注解反对传入一个 ISearchFieldConfig 接口束缚下的 JSON 配置项，可对搜寻的输入 key、是否枚举列等进行一系列的配置。

    应用时，可通过类的原型或类的对象进行读取并传入给 AToolBar 组件。获取办法如下：

    UserEntity.prototype.getSearchFieldConfigList()
// 或者
const user = new UserEntity()
user.getSearchFieldConfigList() // 用户搜寻字段配置信息数组
  • AirPower 应用的表单配置装璜器
    @FormField() // 为实体类的属性标记 是否为表单应用的字段

    FormField 注解反对传入一个 IFormFieldConfig 接口束缚下的 JSON 配置项，可对搜寻的输入 key、是否枚举列等进行一系列的配置。

    应用时，可通过类的原型或类的对象进行读取并传入给 AInput 组件。获取办法如下：

    <AInput v-model.name="user.name" :entity="UserEntity"/>

  • 2️⃣ 数据转换篇

  • class-transformer 简介

    在日常的 API 接口对接过程中，接口中不免产生很多无用的属性，亦或者某些属性须要前端进行转换后能力应用，AirPower 采纳了 类 + class-transformer 库来实现前端和后端的接口数据处理。

    class-transformer 是 TypeScript 下一个基于 装璜器 + Reflect-metadata 实现的一个数据转换库，能依据实体属性上标记的相干装璜器规定进行 类到 JSON、JSON 到类 的转换，具体的相干操作文档能够查看 npm-class-transformer

  • class-transformer 的装璜器
    // 将 userName 属性裸露为 username 来解决后端和前端字段不对立的问题
@Expose({name:"username"}) userName!: string;
// 标记属性不被来去转换 AirModel 中配置必须 Expose 所以这个个别很少应用
@Exclude() password
// 标记属性必须被转为什么类型 反对简略类型 简单类型
@Type(()=>String) password
// 自定义转换规则 可在指定的转换方向上进行数据的转换 
// 如工夫戳转可视化工夫等操作
@Transform(({value}) => {
       // custom transform code here
       return something;
},{toClassOnly | toPlainOnly : boolean})

    当然, 咱们将 class-transformer 和 Reflect-metadata 进行了一系列的封装, 请看上面的内容.

  • AirClassTransformerHelper 转换助手类

    咱们将下面的两个库进行了更适宜咱们的业务封装, 实现了 AirClassTransformerHelper 一系列的装璜器和反射高级编程的性能.

    其中提供了两个静态方法:

    // 将一般的 JSON 对象转换到申明的实体类中, 不便字段的调用和数据转换
AirClassTransformerHelper.parse()
// 将一个对象拷贝到一个新的对象上, 防止深浅拷贝的难堪
AirClassTransformerHelper.copy()

  • 3️⃣ 面向对象篇

  • AirModel 根底模型类

    AirModel 是 AirPower 中通过 class-transformer 库 实现了 json 到类 相互转换的一系列办法的一个数据模型基类。
    咱们倡议，所有与后端对接的数据类都必须根继承至 AirModel, 比方 数据实体 分页对象 搜寻对象 等等。而后你就能够通过 class-transformer 提供的相干装璜器对指定数据类进行字段的裸露、转换等操作。

  • AirEntity 实体基类

    AirEntity 束缚子类必须蕴含 ID 字段，请自行实现一个继承 AirEntity 实体基类的 BaseEntity 来进行比选字段的裸露和配置，也能够在 BaseEntity 中增加子系统业务相干的其余必须的业务字段。

  • 应用面向对象继承缩小反复接口的申明

    咱们在 AirPower 里实现了一个 AirAbstractService 服务基类，实现了单表 减少 、 删除 、 批改 、 查问分页 、 查问数组 等相干根底办法，业务中如无非凡业务需要，无需再次实现单表业务中这些反复的办法，但咱们倡议：宿主初始化一个继承了AirAbstrtactService 的两头基类 BaseService 以应答不合乎 AirPower 标准的场景，你能够在 BaseService 两头接口类中重写相干的接口。

  • 在正当的场景下应用 interface 作为数据结构

    interface 在面向对象中可作为束缚来对业务进行标准，但 TypeScript 很多使用者都习惯应用 interface 来作为限度对象属性的工具，咱们倡议：

    只在装璜器参数、与第三方库的数据转换场景下应用 interface 作为数据格式的间接限度应用，其余任何场景不应用 interface 作为间接限度。

通过 Demo 宿主我的项目来体验一把

应用阐明

咱们应用的是 Vite 构建, 包治理应用的是 yarn, 请先装置前叙的相干工具后持续接下来的操作：）

外围包仓库: https://gitee.com/hamm/airpower

一、初始化仓库(举荐 ssh)

倡议 windows 开发者应用 git bash 不要应用 windows 自带的拉垮的 cmd powershell 等。否则接下来的脚本可能呈现问题，你只能通过本人手动去操作。

任选一个形式的脚本一键初始化我的项目

  • ssh 形式

    git clone git@gitee.com:hamm/AirPowerDemo.git &&
cd AirPowerDemo/src && 
git clone git@gitee.com:hamm/airpower.git && cd ../ &&
yarn && cp .env.dev .env && yarn s

  • https 形式

    git clone https://gitee.com/hamm/AirPowerDemo.git &&
cd AirPowerDemo/src && 
git clone https://gitee.com/hamm/airpower.git && cd ../ &&
yarn && cp .env.dev .env && yarn s

二、批改环境变量

按需批改配置

VITE_APP_NAME = "开发环境"
VITE_APP_API_URL = "/api/"
VITE_APP_STATIC_URL = "/static/"

三、启动和打包

启动项目前，咱们倡议你敞开 visual studio code 的 Vetur 插件，防止 vue2 和 vue3 产生抵触。

# 启动我的项目
yarn s              #缩写指令

# 打包我的项目
yarn dev            #开发环境 应用.env.dev
yarn test           #测试环境 应用.env.test
yarn production     #生产环境 应用.env.production

四、其余命令

# 应用规范 commit 模板
yarn c   

#更新我的项目和 AirPower
yarn u   

#查看 Git 格式化日志
yarn l

五、举荐的 VSCODE 插件扩大

  • TypeScript Vue Plugin (Volar)
  • Vue Language Features (Volar)
  • ESLint
  • SCSS Formatter

如碰到其余兼容问题，倡议在工作区禁用以上四个插件之外的其余插件，特地是Vetur。

And now, enjoy your coding!

退出移动版