发表于： 2020-07-28 22:08:53
0 2349
今天完成的事情：今天给后台的添加页面添加了表单验证以及修复了一些bug
明天计划的事情：继续后续的学习
遇到的问题：想了一些修复方法都花里胡哨的不如返璞归真简单的写
收获：添加了表单验证
<form nz-form #Form="ngForm">
<nz-form-item>
<nz-form-label [nzSpan]="2">标题</nz-form-label>
<nz-form-control [nzSpan]="12" nzErrorTip="标题是必填项！">
<input nz-input [(ngModel)]="imgObj.title" name="title" required />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">类型</nz-form-label>
<nz-form-control [nzSpan]="12" nzValidateStatus="validating">
<nz-select name="type" [(ngModel)]="imgObj.type">
<nz-option nzValue="0" nzLabel="首页banner"></nz-option>
<nz-option nzValue="1" nzLabel="找职位banner"></nz-option>
<nz-option nzValue="2" nzLabel="找精英banner"></nz-option>
<nz-option nzValue="3" nzLabel="行业大图"></nz-option>
</nz-select>
<nz-select name="industry" [(ngModel)]="imgObj.industry" *ngIf="imgObj.type == 3">
<nz-option nzValue="0" nzLabel="移动互联网"></nz-option>
<nz-option nzValue="1" nzLabel="电子商务"></nz-option>
<nz-option nzValue="2" nzLabel="企业服务"></nz-option>
<nz-option nzValue="3" nzLabel="O2O"></nz-option>
<nz-option nzValue="4" nzLabel="教育"></nz-option>
<nz-option nzValue="5" nzLabel="金融"></nz-option>
<nz-option nzValue="6" nzLabel="游戏"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">说明</nz-form-label>
<nz-form-control [nzSpan]="12" nzErrorTip="必填项!最多输入30个字符！">
<input nz-input [(ngModel)]="imgObj.content" name="content" required maxlength="30" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">链接</nz-form-label>
<nz-form-control [nzSpan]="12" nzErrorTip="必填项!最少输入10个字符！">
<input nz-input [(ngModel)]="imgObj.url" name="url" required minlength="10" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">配图</nz-form-label>
<nz-form-control [nzSpan]="12">
<div class="clearfix">
<nz-upload nzAction="/a/u/img/task" nzListType="picture-card" [(nzFileList)]="fileList"
[nzPreview]="handlePreview" (nzChange)='change($event)' [nzShowButton]="fileList.length < 1">
<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>
</nz-form-control>
</nz-form-item>
<nz-form-item class="lastItem">
<nz-form-control [nzOffset]="2" class="submit">
<button nz-button nzType="primary" (click)="online()"
[disabled]="(!Form.form.valid || imgObj.img == undefined) || onBtn">立即上线</button>
<button nz-button nzType="primary" (click)="draft()"
[disabled]="(!Form.form.valid || imgObj.img == undefined) || offBtn">存为草稿</button>
</nz-form-control>
<button nz-button nzType="danger" class="cancel"(click) = "goBack()" >取消</button>
</nz-form-item>
ts部分
export class DetailComponent implements OnInit {
public onBtn: boolean = false; //图片锁定的变量
public offBtn: boolean = false; //图片锁定的变量
以及在一些情况下解锁按钮
online() {
this.onBtn = true; //防止网络差时，连续点击按钮连续向后台发送请求
let params = JSON.parse(JSON.stringify(this.imgObj)) //深拷贝
params.status = 2;
console.log(params);
if (params.id) {
//修改数据
this.ser.putData(params).subscribe((haha: any) => {
if (haha.code == 0) {
this.rou.navigate(['/page/article'])
} else {
this.onBtn = false; //解锁按钮
}
})
} else {
//新增数据
this.ser.upload(params).subscribe((res: any) => {
console.log(res);
if (res.code == 0) {
this.rou.navigate(['/page/article'])
} else {
this.onBtn = false; //解锁按钮
}
})
}
}
想了下最后还是直接写在html里做一个判断最简单
重点是想清楚条件的判断
<button nz-button nzType="primary" (click)="online()"
[disabled]="(!Form.form.valid || imgObj.img == undefined) || onBtn">立即上线</button>
<button nz-button nzType="primary" (click)="draft()"
[disabled]="(!Form.form.valid || imgObj.img == undefined) || offBtn">存为草稿</button>
运用disabled属性
修复的分页的bug
nz-table [nzData]="responseData" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]='totalNum'
[nzPageSize]="sizeNum" [nzPageIndex]='savePagebug' (nzPageIndexChange)="change($event)">
<!-- 第一个不绑定"bbb",页面下方就会出现暂无数据空白，剩下几个是page分页用到的 -->
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>类型</th>
<th>图片</th>
<th>发布时间</th>
<th>修改时间</th>
<th>发布者</th>
<th>状态</th>
<th class="operate">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of responseData">
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.type| type }}</td>
<td><img src="{{ item.img }}" style="width: 100px; height: 100px;"></td>
<td>{{ item.createAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.updateAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.author }}</td>
<td>{{ item.status| status }}</td>
<td style="display: flex;align-items: center;justify-content: space-around;height: 133px;">
<a nz-popconfirm [nzTitle]="item.status === 2?'确定下线?':'确定上线？'" nzPopconfirmPlacement="top"
(nzOnConfirm)="confirm(item.id,item.status)" >{{item.status === 2?'下线':'上线'}}</a>
<nz-divider nzType="vertical"></nz-divider>
<a (click)="edit(item.id)">编辑</a>
<nz-divider nzType="vertical"></nz-divider>
<a nz-popconfirm nzTitle="确定删除?" nzPopconfirmPlacement="top" (nzOnConfirm)="delete(item.id)" >删除</a>
</td>
</tr>
</tbody>
运用分页组件的时候翻页每次刷新都会出现页面显示bug
//分页刷新的页码bug修复，无参数时默认第一页
if (!Boolean(this.savePage.page)) {
this.savePagebug = 1
}
else {
this.savePagebug = this.savePage.page
}
解决就是在页面刷新的时候做一个判断来显示正常的页面或者默认唯一
花里胡哨写了一堆搞得bug更多了全删了还不如直接写个if，以后要想想不能为了修复bug把问题搞得更复杂
明天继续看看vue的内容和找一下还有没有bug
返回列表
评论