需要被实现的功能 将ajax请求到的数据存和数据中间层model进行映射,数据存入model中,model可以对数据key进行任意命名,然后vue的tsx页面组件可以依赖注入model 然后使用model进行页面的渲染! 好处: 实现中间层的目的在于完全解耦了数据和页面的绑定,如果后端进行接口字段的大量修改,可以在不修改前端页面代码字段的情况下只需要修改model即可!! 原本程序思路整理: 1:Tsx组件在对应的logic逻辑中使用service层发送请求,核心代码细节: @Inject() public readonly UserServiceImpl!: UserServiceImpl; await this.UserServiceImpl.IndexTest({ type: 1, page: 1 }); 2:虽然service层的方法被logic组件调用,但是方法只是空壳,方法内部无法编写任何逻辑和返回,请求发送在 请求装饰器中实现,代码细节: @GET({ useHandle: false, header: { test: '1111' } }) public async IndexTest(params: object): Promise { } 3:装饰器 @GET() 会根据方法名 IndexTest 去 配置文件 configure.config.ts 中自动寻找对应key的接口地址来自动 发送请求。 4:请求成功后,装饰器会根据参数 useHandle 的true or false 决定是否把数据 返还给方法,如果数据需要特殊处理,那么设置为true 方法的入参 IndexTest(params: object) params 会被装饰器调用存放ajax请求到的数据,我们可以对数据进行处理然后再把数据交给页面来 渲染展示。代码实现细节: descriptor.value = async (data: { [key:string]: any }) => await OldMethods.apply(target, [ // @ts-ignore await AxioDao[methods]({ url: Params.url, data: data, header: Params.header }) ]) 5:TSX 页面组件拿到数据,可以渲染页面了! 改造思路分析: 1:需要拦截 步骤4 到 步骤5 的过程,在步骤4 和 步骤5 中间实现Model层,在请求装饰器中拿到ajax的数据后应该把数据给 中间层 Model基类, 中间层Model存储数据。 2:用户自定义的 XxxModel 继承 Model类,用户自定义的 XxxModel 通过自定义的装饰器实现和Model中存储 的ajax数据进行数据的映射和复制,伪代码如下 // ajax 数据 { name: '刘兵', age: 18, like: ['编程','骑车'] } // 基类Model class Model {} // 关联基类Model 和 ajax 数据的具体model, // 核心数据关联在 装饰器 @Mapping() 中实现。 @Injectable() export class IndexTestModel extends Model { @Mapping("name") public myName: string; @Mapping("id") public myId: number; @Mapping("like") public myLike!: Array; } 3:原本步骤5中再依赖注入 XxxModel,从 XxxModel 中获取数据,然后渲染Vue的Tsx页面,实现的效果如下: @Inject() public readonly IndexModel!: IndexTestModel; 对于步骤1 和 步骤2 实现具体过程的详细思路拆解和代码过程 状态:待思考 ---> 思考介绍 ---> 待实现! 角色: 1:基类Model 主要封装对存放在存取器里面的数据进行增删改读的一些操作 2:GET,POST 等..这些请求装饰器,获取到数据后,将数据构造为对象,格式为: { IndexTestModel: ajax 数据 } 然后存入存取器中。 3:在用户在自定义的Model中,例如 IndexTestModel 中使用属性装饰器 @Mapping("字段名")装饰类的属性, @Mapping 可以获取被装饰属性的类,根据类名去存取器中获取对应的ajax数据, 然后 @Mapping 装饰器可也以获得被装饰属性的名称,使用名称key去寻找ajax里面的值value 最后在 @Mapping装饰器中将数值取出,赋值给被装饰的类属性 4:页面上使用 用户自定的model,因为model继承基类model,所以基类model可以实现很多其他骚操作或者常用的 一些方法,方便拓展!