AngularJS6+SpringBoot1.5.15前后端分离SPA博客系统实战《五》

1.管理后台广告列表分页条件查询。

使用ng generate component admin/adv-mng添加广告管理组件，其中分页组件样式文件、NG-ZORRO封装的分页nz-table插件代码，adv-mng.component.ts的核心分页调用方法封装分别如下：

nz-content.body{padding:0 50px;}
nz-breadcrumb{margin:15px 0;}
.main{padding:24px 0; background: #fff;}
.main .content{padding: 0 24px; min-height: 450px;}
.main .left-nav{width: 200px}
.thumb{max-height: 50px;}

<nz-table id="advTable" #ajaxTable nzBordered nzSize="small" nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet"
[nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="size" (nzPageIndexChange)="searchData()"
(nzPageSizeChange)="searchData(true)">
	<thead (nzSortChange)="sort($event)" nzSingleSort>
        <tr>
            <th>广告名</th>
            <th>缩略图</th>
            <th>链接</th>
            <th width="100px">广告类型</th>
            <th width="100px">广告位</th>
            <th width="160px">添加时间</th>
            <th width="240px">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of ajaxTable.data">
            <td>{{item.advName}}</td>
            <td><img *ngIf="item.thumb" src="{{siteUrl}}{{item.thumb}}" alt="无缩略图" class="thumb" /></td>
            <td>{{item.advUrl}}</td>
            <td>{{item.advType}}</td>
            <td>{{item.positionId}}</td>
            <td>{{item.createTime | date:"yyyy-MM-dd HH:mm"}}</td>
            <td>
                <button [routerLink]="['/admin/adv/detail',item.id]" [queryParams]="{module:'index',opt:'adv'}" class="default">查看</button>
                <button [routerLink]="['/admin/adv/edit',item.id]" [queryParams]="{module:'index',opt:'adv'}" class="primary">编辑</button>
                <button (click)="delete(item.id)" class="danger">删除</button>
            </td>
        </tr>
    </tbody>
</nz-table>

/**
 * 搜索数据
 */
searchData(reset: boolean = false): void {
    if (reset) {
        this.pageNumber = 1;
    }
    this.loading = true;
    this.advService.page(this.pageNumber - 1, this.size, this.sort,
    this.advName, this.advUrl, this.advType,this.positionId,this.status).subscribe((response: any) => {
        this.loading = false;
        if(response.code == "200"){
            this.dataSet = response.data.content;
            //处理将结果数据的“类型”、“广告位”等下拉菜单的key转换成对应的value
            if(this.dataSet != null && this.dataSet.length > 0){
                var rowList = this.dataSet;
                for(var i=0;i<rowList.length;i++){
                    var advType = this.commonService.transAdsType(rowList[i].advType);
                    var positionId = this.commonService.transPositionId(rowList[i].positionId);
                    rowList[i].advType = advType;
                    rowList[i].positionId = positionId;
                }
            }
            this.total = response.data.totalElements;
        }else{
            this.dataSet = [];
            this.total = 0;
        }
    });
}

service层的admin.service.ts使用http.get发送请求到后端服务，进行分页条件查询，代码封装如下：

/**
 * 分页条件查询
 */
getAdminPage(pageNumber: number = 0, size: number = 10, sort: string, 
    username: string,nickName: string,status : string): Observable<{}> {
    const params = new HttpParams().set('page', `${pageNumber}`)
    .set('size', `${size}`).set('sort', sort)
    .set('username', username).set('nickName', nickName).set('status', status);
    return this.http.get(`${this.siteUrl}` + "/1.0/admin/page",{params}); 
}

2.管理后台广告添加。

（1）.使用(change)事件绑定图片更换时进行图片上传，使用[(ngModel)]对表单数据进行双向绑定，使用(click)事件绑定表单提交，代码如下：

<form class="admin-form">
    <div nz-row nzGutter="24">
        <div class="form-group">
            <input type="text" class="form-ipt" placeholder="请输入广告标题" [(ngModel)]="adv.advName" name="advName" />
        </div>
        <div class="form-group">
            <label>广告图片</label>
            <input type="file" (change)="uploadImg('adv',$event)" name="file" />
            <img *ngIf="adv.thumb" src="{{siteUrl}}{{adv.thumb}}" alt="请上传缩略图" class="thumb" />
        </div>
        <div class="form-group">
            <input type="text" class="form-ipt" placeholder="请输入链接地址" [(ngModel)]="adv.advUrl" name="advUrl" />
        </div>
        <div class="form-group">
            <select name="advType" class="form-select" [(ngModel)]="adv.advType">
                <option *ngFor="let item of typeSelect" [value]="item.key">{{item.value}}</option>
            </select>
        </div>
        <div class="form-group">
            <select name="positionId" class="form-select" [(ngModel)]="adv.positionId">
                <option *ngFor="let item of positionSelect" [value]="item.key">{{item.value}}</option>
            </select>
        </div>
        <div class="form-group">
            <input type="number" class="form-ipt" placeholder="请输入排序" [(ngModel)]="adv.reorder" name="reorder" />
        </div>
        <div class="form-group">
            <select name="isBlank" class="form-select" [(ngModel)]="adv.isBlank">
                <option *ngFor="let item of isBlankSelect" [value]="item.key">{{item.value}}</option>
            </select>
        </div>
        <div class="form-group">
            <select name="status" class="form-select" [(ngModel)]="adv.status">
                <option *ngFor="let item of statusSelect" [value]="item.key">{{item.value}}</option>
            </select>
        </div>
        <div class="form-group">
            <button nz-button="" (click)="sendForm()" nztype="primary" class="ant-btn ant-btn-primary">
                提交
            </button>
            <button (click)="goBack()" nz-button="" nztype="default" class="ant-btn ant-btn-default">
                返回上一步
            </button>
        </div>
    </div>
</form>

 调用后端服务进行图片上传的ts代码如下：

/**
 * 图片上传
 */
uploadImg(title: string,file: any): Observable<any>{
    let formData = new FormData();
    formData.append('file',file);
    return this.http.post(`${this.siteUrl}` + "/1.0/upload/image?dirPath=" + title, formData, httpOptions).pipe(
        catchError(this.handleError('upload', file))
    );
};

 广告添加核心ts代码如下：

/**
 * 保存广告信息
 */
sendForm(): void{
    if(!this.checkForm()){
        return;
    }
    this.advService.save(this.adv).subscribe(response => {
        if(response != null && JSON.stringify(response) != "{}"){
            if(response.code == "200"){
                //处理成功
                const modal = this.modalService.success({nzTitle: '添加广告成功'});
                modal.afterClose.subscribe(() => this.router.navigateByUrl("/admin/adv/list?module=index&opt=adv"));
            }else{
                this.modalService.error({nzTitle: response.msg});
            }
        }
    });
}

3.管理后台广告修改。

service层修改广告ts如下：

/**
 * 修改广告对象
 */
edit(adv: Adv): Observable<any>{
    return this.http.put<Adv>(`${this.siteUrl}` + "/1.0/adv/update", adv, httpOptions).pipe(
        catchError(this.handleError('edit', adv))
    );
}

4.管理后台广告删除。

/**
 * 删除广告 
 */
delete(id: number): void{
    this.modalService.confirm({
        nzTitle: '确定要删除此广告?',
        nzOkText: '是',
        nzOkType: 'danger',
        nzOnOk: () => {
            this.advService.delete(id).subscribe((response: any) => {
                if(response.code == "200"){
                    //处理成功
                    const modal = this.modalService.success({nzTitle: '删除广告成功'});
                    //调用重新查询分页数据
                    this.searchData();
                }else{
                    this.modalService.error({nzTitle: response.msg});
                }
            });
        },
        nzCancelText: '否',
        nzOnCancel  : () => {}
    });
}