使用.net core ABP和Angular模板构建博客管理系统(完善前台服务)
来源:互联网 发布:搜索引擎优化案例分析 编辑:程序博客网 时间:2024/05/16 09:47
返回目录
上一篇写到 使用.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组件。
阅读全文
0 0
- 使用.net core ABP和Angular模板构建博客管理系统(完善前台服务)
- 使用.net core ABP和Angular模板构建博客管理系统(创建后端服务)
- 使用.net core ABP和Angular模板构建博客管理系统(实现博客列表页面)
- 使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)
- 使用.net core ABP和Angular模板构建博客管理系统(实现自己的业务逻辑)
- 开始使用ABP.CORE模板 (ASP.NET Core with Angular)
- ABP+AdminLTE+Bootstrap Table权限管理系统第一节--使用ASP.NET Boilerplate模板创建解决方案
- Abp项目模板使用Oracle数据库包括系统权限管理
- NET使用ABP框架搭建博客项目(一)
- Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台)
- abp构建Web API服务
- 博客管理系统完善日志之一
- NET使用ABP框架搭建博客项目(二) 用户模块
- NET使用ABP框架搭建博客项目(二) 认证模块
- .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法
- ABP官方文档(四十一)【ASP.NET Core】
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用
- 博客前台模板
- FPGA_CLOCK
- 关于浏览器内核及其 CSS 写法
- 设置右键菜单可以选择使用qtcreator打开
- ssm框架使用druid数据库连接池(带事务配置和session监听)
- HTML-doctype,meta
- 使用.net core ABP和Angular模板构建博客管理系统(完善前台服务)
- Android生成签名文件并用其对apk文件进行签名(Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]错误完美解决)
- 12月10日周日下午广州Linuxer聚会(4大演讲主题+蜗窝大侠郭健主持)
- [ARC085]F
- 笔记:解决redis连接错误:MISCONF Redis is configured to save RDB snapshots, but it is currently not able to...
- AOE网上的关键路径
- 数据结构之并查集
- Virsh管理kvm虚拟机认证和加密
- 【LeetCode】695. Max Area of Island