前后台分离的项⽬中，如何优雅的传输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类型了。
代码逻辑：
