发表于： 2019-10-31 22:22:09
1 948
今天完成的事情：
任务6-10 修复一些BUG，看了微信任务，整理我完成angular功能
明天计划的事情：
微信任务
看下es6
angular一些基础
遇到的问题：
无
收获：
我们要求做一个增加后台数据的项目功能
首先你要先把接口数据写好，而根据增加你需要用到HTTP，POST请求类似向服务器端发送数据来增加后台数据类容。
图片
通过传递上面的名字和图片来增加数据，
那么代码如下
UI组件代码
<div class="clearfix">
<nz-upload nzAction="/a/u/img/task" nzListType="picture-card" [(nzFileList)]="article.img"
[nzPreview]="handlePreview" (nzChange)='change($event)'>
<i nz-icon nzType="plus"></i>
<div class="ant-upload-text">Upload</div>
</nz-upload>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
(nzOnCancel)="previewVisible = false">
<ng-template #modalContent>
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
</ng-template>
</nz-modal>
</div>
这里主要就是需要UI组件配图的代码
首先你要在api弄清除它的一些功能比如 nzAction="/a/u/img/task" 这个功能就是直接让我图片传递到后台数据一个专门放图片的文件里面
这里要注意 当我把图片传递进去的时候是分3步 第一步 是开始状态 ，第二步是进行状态 第三步才是我们最后成功所需要的值，要注意的是 数据时专门保存一个专门保存图片的后台数据会传递一个参数，然后在用这个参数来传递到后台数据进行保存，不然会出现图片错误，因为图片类型是string类型 是字符串类型不是对象类型 需要进行改变。
如图
你会发现 打印的时候会出现3个打印的 但是最后一个的图片路径就是我们专门传递给后台数据而返回来的访问图片路径的地址，只需要在增加的时候把这个填写上去就行了
TS文件
创建一个对象数值
public article: any = {
title: '',
type: '',
status: 0,
img: [],
content: '',
url: '',
industry: '',
}
然后调用图片函数的回调
//图片回调
change(girl) {
if (girl.type == "success") {
this.article.img[0] = girl.file.response.data;
console.log(this.article);
console.log("成功");
}
console.log(girl);
}
然后通过点击事件触发函数方法
click() {
let params = JSON.parse(JSON.stringify(this.article));
params.img = params.img[0].url;
params.status = 2;
console.log(params);
if (params.status === 2) {
this.cs.postA(params).subscribe((res: any) => {
console.log(res);
});
console.log(params.img);
}
console.log(this.article.img);
console.log(this.article);
}
这样就直接把数据传递给后台数据了
首先在做查询功能之前，要先把接口写好 这地方要看你的接口文档
服务接口代码
//查询接口
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
}
这样 一共专递后台数据就是分页数据外加搜索值的对象。这样我点击分页的时候显示出来的还是我搜索对象的值。
首先要先好接口调用这里要看你的接口文档。
接口文档
说明下 我这个传递进去不是参数 是直接传递一个接口跟着ID这样就会返回我的那个ID对象里面的所以值。
首先写一个编辑按钮，通过点击事件进行跳转如图
我们要把这个13801 这个ID信息把值转递到下个页面编辑页面，也是新增页面。
HTML
<a
nz-popconfirm
[nzCondition]='true'
(nzOnConfirm)="compile(data)" >编辑 </a>
我这里写的是一个 气泡定位， 也就是通过UI组件邦迪的函数进行回调可以得到我想要的值
也就是说我点击这个编辑，compile(data) data这个参数会返回值 会返回上面我点击的里面的所有类容
TS代码
compile(e){
this.params = {
id:e.id
}
console.log(e);
this.route.navigate(["/list/compile"],{
queryParams: this.params,
});
}
我们来看下 返回参数E的值是什么
我们看到里面是这个点击表单所以类容，这里需要通过对象选取你需要的类容。
然后我就通过url进行传递值，把ID传递到下个页面也就是上面我那种写法，当然还有种写法是直接写到 HTML进行传递
代码如下
[routerLink]="['right'] queryParams = """
后面需要跟参数需要你在TS文件创建一个函数。
当我们把值传递过去是需要进行处理的如图
我们要把传递过去的值处理下 渲染到页面上面，那么这里需要双向绑定 ，得看你绑定的HTML是什么对象我创建对象时
public article: any = {
title: '',
type: '',
status:'' ,
img: [],
content: '',
url: '',
industry: '',
}
这里要注意下，那个选择器UI组件 不知道什么原因你传递的数值 industry是number数值而是不会在类型上面进行显示因为它要的是字符串，所以你要把你的数字类型转换成 字符串类型，
原因：暂时还不知道是什么导致的。
代码如下
type:rul.data.article.type.toString(),
这里就需要你通过URL回调函数来获取上面的ID
代码如下
this. activated.queryParamMap.subscribe((a:any) => {
this.id = a.params.id
})
通过获取到的函数a 也就是id 然后重新赋值给一个变量。（当然 这里你可以把接口方法写在URL获取函数里面，这样就会少一个创建变量直接通过a.params.id 进行传递参数。）
this.cs.personData(this.id ).subscribe(((rul:any)=>{
this.article = rul.data.article
console.log(typeof rul.data.article.type);
this.compile = {
type:rul.data.article.type.toString(),
img: [{url: rul.data.article.img}],
}
this.article = Object.assign(this.article,this.compile);
console.log(typeof this.article.type);
}));
当获得id 然后传递给服务写好封装完成的服务里面
代码如下
personData(id){
return this.http.get(`${this.person}/${id}`);
}
这里要注意下 这里是传递ID是在路基后面跟着 不是叫你传递值 所以这里是拼接写法，我这种写法是模版字符串 ES6的写法比较简洁，以前写法是用+好 来代表2边的值进行拼接不建议用+代表。
这里只是把数据传递过来还需要能进行更改，这里要记住 更改会给你专门的接口文档和上面的差不多，不然你就会写成增加数据。
文档
这里要注意下小错误，一定要看明白文档不要把接口写错了不然结果就是得不到你想要的而页面还不报错，这种不报错很难找到问题所在需要一个一个的去尝试很浪费时间。
通过ID来写一个判断 当你点击事件的是增加数据还是编辑数据
TS代码
if (this.id) {
this.cs. compilesData(this.id,params).subscribe((res:any)=>{
console.log(res)
console.log('编辑成功')
})
}else{
this.cs.postA(params).subscribe((res: any) => {
console.log(res);
console.log('增加成功')
});
}
这里的判断就通过ID来进行判断 如果ulr有传递过来ID 那么它就是编辑文档，如果不是那么就是增加文档
通过编辑文档 我们要转递2个参数值 一个是ID 老样子进行拼接，另一个就是要改变的数值params
服务代码写法
compilesData(id,data){
const cs = typeof (data) === 'object' && String(data) !== '[object File]' ? this.paramFormat(data) : data;
return this.http.put(`${this.compiles}/${id}`,cs,{
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded"
})
})
}
这里要注意下 你那边转递是2个值 那么你这边接收就一定是2个值而且顺序一定要对。
当然你要看下你后台数据接不接收你JSON类型 如果不接收就需要序列话下 全变成拼接字符串。
返回列表
评论