116 lines
4.1 KiB
Plaintext
116 lines
4.1 KiB
Plaintext
需要被实现的功能
|
||
|
||
将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可以实现很多其他骚操作或者常用的
|
||
一些方法，方便拓展！
|
||
|