发表于: 2019-10-27 21:54:19
1 973
今天完成的事情:
跟师弟讲解查询功能 巩固自己的查询
明天计划的事情:
看下微信小程序,和删除
遇到的问题:
无
收获:
首先在做查询功能之前,要先把接口写好 这地方要看你的接口文档
服务接口代码
//查询接口
id: string = '/a/u/article/';
设置好自己的接口
通过http协议调用接口
代码如下
return this.http.post(this.url, params, {
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded"
})
});
这里要注意下你的后台数据接不接受JSON类型 如果不接收就需要序列话一下。
TS文件代码
seekType() {
//算元表达式,来进行判断this.time判断这个是否存在,存在就把new Date(this.time).valueOf()值 赋给它不然就是后面的空值赋给他
this.nTime = this.time ? new Date(this.time).valueOf() : "";
this.nTimes = this.times ? new Date(this.times).valueOf()+86399999 : "";
if (this.typeNz == undefined) {
this.typeNz = "";
}
if (this.sss == null) {
this.sss = ""
}
this.params = {
type: this.typeNz,
startAt: this.nTime,
endAt: this.nTimes,
status: this.sss,
}
console.log(this.params.startAt);
console.log(this.params.endAt);
console.log(this.params.type);
this.route.navigate(["/list/right"], {
queryParams: this.params,
});
}
我是直接通过双向绑定把输入框的值直接传递给我的后台绑定的数据然后传递到我创建的对象
this.params = {
type: this.typeNz,
startAt: this.nTime,
endAt: this.nTimes,
status: this.sss,
}
这些搜索类容分别是时间 类型 和职业。3种方式进行搜索,由于我是用ULR进行传递的所以在单个点击搜索的时候会出现 undefined 而这些数值传递到后台数据是不能呗接受也就是说,后台数据时识别不了我传递的对象值,所以这里需要写个判断但我里面没有值的时候我要让这个对象时空。
通过传递到ULR上面 。
ULR代码
this.aRoute.queryParamMap.subscribe(a => {
console.log(this.aRoute.queryParamMap)
this.getRight(a);
console.log(a);
this.paGe = a;
console.log(this.paGe);
});
因为 的ULR上面的代码是直接传递到上面返回给后台数据然后通过,后台数据 this.getRight(a);方法传递
this.getRight(a); 方法是我已经写好发封装 不管是什么参数传递进去都会执行 get方法
代码如下
getRight(params ? : any) {
//这就是通过get请求到的参数
this.loading=true;
params && (this.params = Object.assign(this.params, params.params)); //对象拼接
params && (this.typeNz = params.params.type);
console.log(this.params)
this.cs.get(this.params).subscribe((response: any) => {
this.listOfData = response.data.articleList;
// console.log(this.listOfData);
this.total = response.data.total;
this.size = response.data.size;
this.loading=false;
});
};
我们看到 这是已经封装好的,可以直接把你想要的数据传递进去,它会自己传递到后台接口然后返回你需要的数据接下就是在页面上渲染出来就行了。
我这里是通过ULR直接往后台传递数据的,首先 数据时带有分页的所以我们需要在点击搜索的时候点击分页通过是根据我搜索的类容展示。
注意:
如果你传递的后台数据没分页也就是重新刷新的,也就是说你点击下一页就没有搜索类容了
代码如下
//分页点击回调后台数据
pageIndexChange() {
this.params = {
page: this.page
};
//Object对象拼接
this.paGe = JSON.parse(JSON.stringify(this.paGe))
this.params = Object.assign(this.paGe.params, this.params);
console.log(this.params);
this.route.navigate(["/list/right"], {
queryParams: this.params,
});
};
所以这里就需要我传递2个数值 ,一个是我搜索的对象的数值 一个是我分页数值, 通过拼接对象的方法把2个值一起传递给后台数据返回我需要的参数
Object.assign(this.paGe.params, this.params);
这个意思就是 后面的数值赋给前面的对象 也就是 这2个是个对象 分别是 分页对象
this.params = {
page: this.page
};
和
this.params = {
type: this.typeNz,
startAt: this.nTime,
endAt: this.nTimes,
status: this.sss,
}
对象 他们其实就是合并一起 检查前面对象有没有后面的 如果没有就合并 如果对象名字相同那么就后面的对象数值覆盖到前面数值 最后结果就是
{
type: this.typeNz,
startAt: this.nTime,
endAt: this.nTimes,
status: this.sss,
page: this.page
}
这样 一共专递后台数据就是分页数据外加搜索值的对象。这样我点击分页的时候显示出来的还是我搜索对象的值。
评论