使用.net core ABP和Angular模板构建博客管理系统(实现博客列表页面)

创建服务

新建一个服务文件

ng g service blog/note-service

我们可以参考shared\service-proxies\service-proxies.ts文件来写我们的服务文件,这是模板提供的,看最上面的介绍,说的好像是用NSwag自动生成的,博主现在是用不了这个工具,有办法用的请指教。

image.png

service-proxies.ts

先把后台Api地址拷过来吧

// api域名
const ApiHost = 'http://localhost:21021';
// api地址
const NoteApiUrls = {
    Create: ApiHost + '/api/services/app/NoteAppServer/Create',
    PublicNote: ApiHost + '/api/services/app/NoteAppServer/PublicNote',
    Update: ApiHost + '/api/services/app/NoteAppServer/Update',
    GetAll: ApiHost + '/api/services/app/NoteAppServer/GetAll',
    GetNote: ApiHost +  '/api/services/app/NoteAppServer/GetNote',
    Delete:  ApiHost + '/api/services/app/NoteAppServer/Delete'
};

现在使用typeScript来写代码,创建服务基本和我们写后台的service差不多了。现在我们来定义数据的载体DTO,基本和后台一样。所以这个能用代码生成器生成也是很能理解的。

export class PageOfNoteDto {
    totalCount: number;
    items: NoteDto[];
}

export class CreateNoteDto {
    textType: number
}
// 首字母必须小写
export class NoteDto {
    title: string;
    creationTime: string;
    id: number;
    like: number;
    collect: number;
    scan: number;
    isPublic: boolean;
}

先照着写一个方法吧

import {SwaggerException} from '@shared/service-proxies/service-proxies';

export class NoteServiceService {
    protected jsonParseReviver: (key: string, value: any) => any = undefined;

    constructor(private http: Http) {

    }
    // 对于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(/[?&]$/, '');

        const options_ = {
            method: 'get',
            headers: new Headers({
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            })
        };
        return this.http.request(url_, options_).flatMap((response_) => {
            return this.processGetAll(response_);
        }).catch((response_: any) => {
            if (response_ instanceof Response) {
                try {
                    return this.processGetAll(response_);
                } catch (e) {
                    return <Observable<PageOfNoteDto>><any>Observable.throw(e);
                }
            } else
                return <Observable<PageOfNoteDto>><any>Observable.throw(response_);
        });
    }

    protected processGetAll(response: Response): Observable<PageOfNoteDto> {
        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 PageOfNoteDto : new PageOfNoteDto();
            console.log(_responseText);
            console.log(result200);
            console.log(resultData200);
            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<PageOfNoteDto>(<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.component.ts中引入来看看我们服务对不对。

import { Component, OnInit, Injector } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { PagedListingComponentBase, PagedRequestDto } from 'shared/paged-listing-component-base';
import {NoteDto, NoteServiceService, PageOfNoteDto} from '@app/blog/note-service.service'

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.css'],
    animations: [appModuleAnimation()]
})
export class NoteComponent extends PagedListingComponentBase<NoteDto> {

  constructor(private noteService: NoteServiceService,
              injector: Injector) {
      super(injector);
  }

    protected list(request: PagedRequestDto, pageNumber: number, finishedCallback: Function): void {
        this.noteService.GetAll(20, 0 )
            .finally(() => {
                finishedCallback();
            })
            .subscribe((result: PageOfNoteDto) => {
                console.log(result);
            });
    }

    protected delete(user: NoteDto): void {

    }

}

出错了,服务没有提供

是因为在app.module.ts里面没有引入的原因:

import {NoteServiceService} from '@app/blog/note-service.service'
    providers: [
        NoteServiceService
    ]

再试一下呢。

没有权限啊~~~

在角色管理页面给当前用户的角色添加notes这个权限。因为我们后台添加了访问权限的

给当前用户添加权限

控制台没有报错,还打印出来一些东西,貌似就是我们后台传来的数据

看来通信正常,可以继续完善页面了。

 notes: NoteDto[]; // 文章列表
    protected list(request: PagedRequestDto, pageNumber: number, finishedCallback: Function): void {
        this.noteService.GetAll(request.maxResultCount, request.skipCount)
            .finally(() => {
                finishedCallback();
            })
            .subscribe((result: PageOfNoteDto) => {
                this.notes = result.items;
                this.showPaging(result, pageNumber);
            });
    }

把用户页面(users.component.html)的内容拷贝过来,放在我们note.component.html文件里,进行如下修改。

<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="header">
                <h2>
                    文章列表
                </h2>
                <ul class="header-dropdown m-r--5">
                    <i class="fa fa-spin fa-spinner" *ngIf="isTableLoading"></i>
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="javascript:void(0);" class=" waves-effect waves-block()" (click)="refresh();"><i class="material-icons">refresh</i> {{l('Refresh')}}</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="body table-responsive">

                <!-- ******************************************************** -->
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>文章标题</th>
                        <th>阅读次数</th>
                        <th>点赞次数</th>
                        <th>
                            <div style="text-align:center">是否发布</div>
                        </th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let note of notes | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }">
                        <td>{{note.title}}</td>
                        <td>{{note.scan}}</td>
                        <td>{{note.like}}</td>
                        <td align="center">
                            <i class="material-icons" *ngIf="note.isPublic" style="color:green;">check_box</i>
                            <i class="material-icons" *ngIf="!note.isPublic" style="color:red;">indeterminate_check_box</i>
                        </td>
                        <td>{{note.creationTime}}</td>
                        <td class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <i class="material-icons">menu</i>
                            </a>
                            <ul class="dropdown-menu pull-right">
                                <li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="editUser(note)"><i class="material-icons">create</i>编辑}</a></li>
                                <li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="delete(note)"><i class="material-icons">delete_sweep</i>修改</a></li>
                            </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- ******************************************************** -->

                <div class="text-align: center;" *ngIf="totalItems > pageSize">
                    <pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
                </div>
                <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createUser()">
                    <i class="material-icons">add</i>
                </button>
            </div>
        </div>
    </div>
</div>

数据库里只有两条测试数据

思考

  • 我们继承了PagedListingComponentBase类,可以仔细看看这个类的定义,学习下高级架构师在封装这些公用基类时都考虑了些什么,我们该如何来扩展。
  • {l('Users')}是什么意思,l是本地化的意思,可以根据我们界面右上角的语言选择来自动显示不同的语言文字。后面将要学习下如何使用,这显得我们的软件更加的国际化。
  • 既然我们用不了代码生成器,那么完全照着抄写service是不是很累? 我们可以自自己写一个dto的代码生成器,至于service我们可以抽象出一个基类来嘛。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动端开发

iOS 测试三方 KIF 的那些事

一: KIF 三方库的配置       今天的广州天气还不错,原本想试试UI测试的,前几天也了解到很多公司都在用 KIF 这这三方框架!!今天也就试着做做,可就...

24560
来自专栏Kubernetes

深入分析Kubernetes Scheduler的优先级队列

从1.9版本开始,Kubernetes实现了基于Pod优先级的调度队列,一方面提供高优先级的Pod优先被调度的能力,另一方面减轻抢占式调度时潜在的High Pr...

80470
来自专栏大内老A

Windows安全认证是如何进行的?[Kerberos篇]

最近一段时间都在折腾安全(Security)方面的东西,比如Windows认证、非对称加密、数字证书、数字签名、TLS/SSL、WS-Security等。如果时...

24070
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十一天 Web商城实战一【悟空教程】

public class BaseServlet extends HttpServlet {

21140
来自专栏全栈架构

Elasticsearch Java API 搜索之Scrolls(四)

首先需要阅读 [scroll documentation](https://www.elastic.co/guide/en/elasticsearch/refe...

57040
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十三天 Web商城实战三【悟空教程】

<a href="${pageContext.request.contextPath}/OrderServlet?method=findByUid">我的订单<...

19110
来自专栏恰童鞋骚年

.NET Core微服务之基于Ocelot+IdentityServer实现统一验证与授权

  这里,假设我们有两个客户端(一个Web网站,一个移动App),他们要使用系统,需要通过API网关(这里API网关始终作为客户端的统一入口)先向Identit...

39140
来自专栏比原链

Derek解读Bytom源码-P2P网络 地址簿

Gitee地址:https://gitee.com/BytomBlockchain/bytom

11530
来自专栏安恒网络空间安全讲武堂

XCTF-赛博地球杯工业互联网安全大赛web部分题解

0x01工控云管理系统项目管理页面解析漏洞 题目首先给出了源码: `http://47.104.156.32:20007/view-source.php` 关键...

89180
来自专栏安恒网络空间安全讲武堂

[HCTF] share write up

从http://share.2018.hctf.io/robots.txt中获取到题目部分源码

10920

扫码关注云+社区

领取腾讯云代金券