上一篇写到 使用.net core ABP和Angular模板构建博客管理系统（创建前端菜单及页面）：http://www.jianshu.com/p/4ff4ddeae917
实现添加方法
在note-service.service.ts中添加Create方法
Create(input: CreateNoteDto): Observable<NoteDto> {
const url_ = NoteApiUrls.Create;
const content_ = JSON.stringify(input);
const options_ = {
body: content_,
method: 'post',
headers: new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json'
})
};
return this.http.request(url_, options_).flatMap((response_) => {
return this.processCreate(response_);
}).catch((response_: any) => {
if (response_ instanceof Response) {
try {
return this.processCreate(response_);
} catch (e) {
return <Observable<NoteDto>><any>Observable.throw(e);
}
} else {
return <Observable<NoteDto>><any>Observable.throw(response_);
}
});
};
在note.component.ts中添加createNote方法，
createNote() {
const input = new CreateNoteDto();
input.textType = 0;
this.noteService.Create(input).subscribe(m => this.refresh()); // 一定要执行subscribe这个请求才会发出去
}
在note.component.html中使用createNote方法
<button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createNote()">
<i class="material-icons">add</i>
</button>
简单实现添加功能
抽象一个基类
我们看见这样有太多的重复代码，我们抽象一个基类出来吧。
如下新建一个文件：
新建文件
写入以下内容,自己封装一下get，put，post，delete请求
import { Observable } from 'rxjs/Observable';
import { Http, Headers, Response } from '@angular/http';
import { SwaggerException } from '@shared/service-proxies/service-proxies';
export abstract class ApiServiceBaseService {
protected jsonParseReviver: (key: string, value: any) => any = undefined;
constructor(protected http: Http) { }
protected get<T>(url_: string): Observable<T> {
const options_ = {
method: 'get',
headers: new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json'
})
};
return this.p(url_, options_)
}
protected post<T, F>(url_: string, input: F): Observable<T> {
const content_ = JSON.stringify(input);
const options_ = {
body: content_,
method: 'post',
headers: new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json'
})
};
return this.p<T>(url_, options_)
}
protected put<T, F>(url_: string, input: F): Observable<T> {
const content_ = JSON.stringify(input);
const options_ = {
body: content_,
method: 'put',
headers: new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json'
})
};
return this.p<T>(url_, options_)
}
protected delete(url_: string): Observable<void> {
const options_ = {
method: 'delete',
headers: new Headers({
'Content-Type': 'application/json',
})
};
return this.p<void>(url_, options_)
}
private p<T>(url_: string, options_): Observable<T> {
return this.http.request(url_, options_).flatMap((response_) => {
return this.process<T>(response_);
}).catch((response_: any) => {
if (response_ instanceof Response) {
try {
return this.process<T>(response_);
} catch (e) {
return <Observable<T>><any>Observable.throw(e);
}
} else {
return <Observable<T>><any>Observable.throw(response_);
}
});
}
private process<T>(response: Response): Observable<T> {
const status = response.status;
const _headers: any = response.headers ? response.headers.toJSON() : {};
if (status === 200) {
const _responseText = response.text();
let result200: any = null;
const resultData200 = _responseText === '' ? null : JSON.parse(_responseText, this.jsonParseReviver);
result200 = resultData200 ? resultData200 as T : null;
return Observable.of(result200);
} else if (status === 401) {
const _responseText = response.text();
return this.throwException('服务器错误', status, _responseText, _headers);
} else if (status === 403) {
const _responseText = response.text();
return this.throwException('服务器错误', status, _responseText, _headers);
} else if (status !== 200 && status !== 204) {
const _responseText = response.text();
return this.throwException('意料之外的出现', status, _responseText, _headers);
}
return Observable.of<T>(<any>null);
}
protected throwException(message: string, status: number, response: string,
headers: { [key: string]: any; }, result?: any): Observable<any> {
if (result !== null && result !== undefined) {
return Observable.throw(result);
} else {
return Observable.throw(new SwaggerException(message, status, response, headers, null));
}
}
}
note-service.service.ts 就可以简化了
import {ApiServiceBaseService} from '@shared/service-base/api-service-base.service';
export class NoteServiceService extends ApiServiceBaseService {
constructor(http: Http) {
super(http);
}
Create(input: CreateNoteDto): Observable<NoteDto> {
const url_ = NoteApiUrls.Create;
return this.post<NoteDto, CreateNoteDto>(url_, input)
};
// 对于get请求我们要把参数拼接到url上面，这是api的特殊地方
GetAll(MaxResultCount = 20, SkipCount = 0, key = ''): Observable<PageOfNoteDto> {
let url_ = NoteApiUrls.GetAll + '?';
url_ += 'SkipCount=' + encodeURIComponent('' + SkipCount) + '&';
url_ += 'MaxResultCount=' + encodeURIComponent('' + MaxResultCount) + '&';
url_ += 'key=' + encodeURIComponent('' + key);
url_ = url_.replace(/[?&]$/, '');
return this.get<PageOfNoteDto>(url_);
}
}
完善服务
添加两个dto
export class PublicNoteDto {
id: number;
title: string;
content: string;
des: string;
img: string;
tags: string;
}
export class UpdateNoteDto {
id: number;
title: string;
content: string;
}
增加3个方法
Update(input: UpdateNoteDto): Observable<NoteDto> {
const url_ = NoteApiUrls.Update;
return this.put<NoteDto, UpdateNoteDto>(url_, input)
}
Delete(id: number): Observable<void> {
let url_ = NoteApiUrls.Delete + '?';
url_ += 'Id=' + encodeURIComponent('' + id);
return this.delete(url_);
}
PublicNote(input: PublicNoteDto): Observable<void> {
const url_ = NoteApiUrls.PublicNote;
return this.post<void, PublicNoteDto>(url_, input);
}
测试一下删除方法，在note.component.ts中实现删除方法
protected delete(note: NoteDto): void {
this.noteService.Delete(note.id).subscribe(m => this.refresh())
}
删除方法可以用
思考
1、 列表页面继承了PagedListingComponentBase类，这个类到底提供了些什么。
2、在处理的时候应该有提示和遮罩层显得更加友好。
3、作者用了哪些UI组件。
