1 Star 6 Fork 0

编码猿 / VueClassApiTsx

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
思路.txt 4.06 KB
一键复制 编辑 原始数据 按行查看 历史
编码猿 提交于 2020-10-23 01:28 . 移除部分代码
需要被实现的功能
将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可以实现很多其他骚操作或者常用的
一些方法,方便拓展!
TypeScript
1
https://gitee.com/bmycode/vue-class-api-tsx.git
git@gitee.com:bmycode/vue-class-api-tsx.git
bmycode
vue-class-api-tsx
VueClassApiTsx
master

搜索帮助