first commit

2024-09-27 00:48:07 +08:00
commit 342c8c1b1b
95 changed files with 23969 additions and 0 deletions
--- a/思路.txt
+++ b/思路.txt
@@ -0,0 +1,115 @@
+需要被实现的功能
+
+  将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<any> { }
+
+  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<string>;
+  }
+
+  3：原本步骤5中再依赖注入 XxxModel，从 XxxModel 中获取数据，然后渲染Vue的Tsx页面，实现的效果如下：
+
+   @Inject()
+   public readonly IndexModel!: IndexTestModel;
+
+   <ul>
+     {
+       this.IndexModel.myLike.map(v => {
+         return <li>{ v }</li>
+       })
+     }
+   </ul>
+
+
+对于步骤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可以实现很多其他骚操作或者常用的
+     一些方法，方便拓展！
+