使用.net core ABP和Angular模板构建博客管理系统（完善前台服务）

易兒善

发布于 2018-08-21 15:25:56

5110

发布于 2018-08-21 15:25:56

文章被收录于专栏：挖坑填坑

上一篇写到使用.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组件。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.11.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

使用.net core ABP和Angular模板构建博客管理系统（完善前台服务）

使用.net core ABP和Angular模板构建博客管理系统（完善前台服务）

实现添加方法

抽象一个基类

完善服务

思考

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐