前后台分离的项目中,如何优雅的传输boolean类型的参数

更新时间:2023-06-12 10:29:30 阅读: 评论:0

前后台分离的项⽬中,如何优雅的传输boolean类型的参数前⾔:需求
这是⼀个Spring + Angular前后台分离的项⽬,⽬前有⼀个查看作业列表的功能,并且已经设置了分页和⼏个查询参数,如图。
现在需要增加⼀个已评阅和未评阅的查询功能。
龟兔赛跑原文
Work实体的属性如下:
id: number;
content: string;单方告别打一成语
郑州占地面积createTime: Date;
item = new Item();
score: number;
student = new Student();
updateTime: Date;
reviewed: boolean;
attachments = new Array<Attachment>();
已评阅对应的属性是reviewed,是boolean类型。
⽬前前台服务层的代码:
// 已经写了分页参数、按学⽣姓名查找作业、按学号查找作业,共5个参数
getAll(params: {page: number, size: number, studentName?: string, studentSno?: string, itemId?: number }): Obrvable<Page<Work>> {
const _params = {
page: LocaleString(),
size: LocaleString(),
studentName: params.studentName ? params.studentName : null,
studentNo: params.studentSno ? params.studentSno : null,
itemId: params.itemId ? LocaleString() : null
};
return <Page<Work>>(`${this.url}/getAll`, {params: _params});
}
由于前后台中间隔着⼀层Http,并且boolean具有特殊性,所以向后台传值⽐较困难,作为新⼿,我⾸先能想到⼏种⽅法:后台不动,直接在前台过滤
直接把boolean的变量作为参数
把boolean转换为string类型,通过http传输,到后台转换为boolean
不增加参数,在后台建⽴三个⽅法,前台分别请求不同的⽅法,达到传输boolean的⽬的
尝试⼀、前台过滤(失败)
这个是最简单的,因为后台不⽤动,直接请求整页的数据,只在前台显⽰未批阅的作业即可。
/**
* 单选框被⽤户点击时
风起的日子* @param $event 弹射值
* @param reviewed 评阅状态码1默认2已评阅3未评阅
*/
onCheckBoxChange($event: Event, reviewed: number) {
this.load();
}
那么问题来了,由于请求的是⼀整页(10条)数据,如果这⼀页都是已批阅,那么这页直接就是⽩的...⼀条数据也没有。
虽然不符合操作逻辑,但这个⼜不算错误,系统不会报错...
前台过滤,失败。
尝试⼆:直接传boolean(失败)
直接在前台的M层加⼊参数:
reviewed: viewed ? viewed : null,
那么问题来了,httpClient只能传输String和对象(即使是传输对象,也是序列化变成字符串再传输的)
,不能传输number、boolean等类型。
对于number,需要转化成String类型来传输,⽐如:
itemId: params.itemId ? LocaleString() : null
捣练图但对于boolean类型,并没有直接转化成String类型的⽅法。
因此,直接传boolean类型的参数的⽅式,失败。
尝试三、转化成String类型(成功)
除了Http请求,其他位置继续⽤Boolean传值,到发起请求的时候转化为String。
这样的好处是:只需要在前台的服务层和后台的C层增加转化代码,其他位置继续按照常规的逻辑,直接⽤Boolean。在前台向后台的传输过程中:
true -> "true" -> true
fal -> "fal" -> fal
undefined -> 前台不传值 -> null
这样就⽤三个值表⽰了“已评阅”“未评阅”“全部”三种状态。
缺点也⽐较明显,布尔值只有true和fal,如果判断写成:
reviewed: viewed ? 'true' : null,
那么undefined 和fal都按fal来处理,都不会传值。大行宫地铁站
所以就必须分开处理undefined和fal,可以⽤⼀个嵌套判断来实现:
reviewed: viewed === undefined ? null : viewed ? '1' : '0',
同理,后台也需要判断,转化成Boolean:
Boolean _reviewed = null;
if (reviewed != null){
switch (reviewed) {
ca "1": _reviewed = true;break;
ca "0": _reviewed = fal;break;
}
}
现在,实现了效果:
蝉养殖转化为字符串的⽅法,成功。
代码逻辑:
尝试四、通过不同⽅法间接传输参数(成功)
“尝试三”的写法,主要有两个问题:
分别处理undefined和fal⽐较⿇烦
代码可读性差
由于boolean具有特殊性,只有两个值,所以可以不传输这个参数,通过调⽤不同的⽅法,间接传输boolean。现有的后台C层⽅法:
/**
* 获取所有作业
* @param pageable 分页信息
* @return 所有作业
*/
@GetMapping("getAll")
@JsonView(GetAllJsonView.class)
public Page<Work> findAll(
@RequestParam(required = fal) Long itemId,
@RequestParam(required = fal) String studentName,
@RequestParam(required = fal) String studentNo,
Pageable pageable) {
return All(
itemId,
studentName,
studentNo,
pageable);
}
⽬前有三个参数,如果不想增加参数,就再增加两个⽅法,⽽参数不变:
// 原C层的⽅法
public Page<Work> findAll(){}
// 获取已评阅的作业
public Page<Work> findAllReviewed(){}
// 获取未评阅的作业
public Page<Work> findAllUnReviewed(){}
写到这⾥⼤家应该明⽩了:在前台向后台的传输过程中
true -> 请求findAllReviewed() -> true
fal -> 请求findAllUnreviewed() -> fal
undefined -> 请求findAll() -> null
所以前台这么写:
getAll(params: {page: number, size: number, studentName?: string, studentSno?: string, itemId?: number, reviewed?: boolean}):    Obrvable<Page<Work>> {
// 准备参数
const _params = {
page: LocaleString(),
size: LocaleString(),
studentName: params.studentName ? params.studentName : null,
studentNo: params.studentSno ? params.studentSno : null,
itemId: params.itemId ? LocaleString() : null
};
月经少怎么回事
// 判断,向对应的⽅法发起请求
switch (viewed) {
ca true: return <Page<Work>>(`${this.url}/getAllReviewed`, {params: _params}); break;
ca fal: return <Page<Work>>(`${this.url}/getAllUnReviewed`, {params: _params}); break;
}
// 默认请求getAll()
return <Page<Work>>(`${this.url}/getAll`, {params: _params});
}
然后,后台的三个⽅法都调⽤同⼀个服务层,这时候就可以按照常规逻辑,传⼊Boolean类型了。
代码逻辑:

本文发布于:2023-06-12 10:29:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/936520.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:传输   参数   评阅   后台   前台   作业   增加
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图