Building a blog management system using the. NET core ABP and angular templates (Implementing the blog List page)

Back to directory creation service

Create a new service file

Ng G Service Blog/note-service

We can refer to Shared\service-proxies\ Service-proxies.ts file to write our service files, which is provided by the template, look at the top of the introduction, said to be automatically generated with the Nswag, bloggers are now not use this tool, there are ways to use please advise.

Let's get back to the backend API address.

API domain name
const Apihost = ' http://localhost:21021 ';
API Address
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 '
};

Now use Typescript to write code, create a service basically and we write backstage service almost. Now we're going to define the data vector dto, basically the same as backstage. So this can be generated with the code generator is also very understandable.

Export class Pageofnotedto {
    totalcount:number;
    Items:notedto[];
}

Export class Createnotedto {
    texttype:number
}
//First letter must be lowercase
export class Notedto {
    title:string;
    creationtime:string;
    Id:number;
    Like:number;
    Collect:number;
    Scan:number;
    Ispublic:boolean;
}

Just write a way.

Import {swaggerexception} from ' @shared/service-proxies/service-proxies ';

    Export class Noteserviceservice {protected Jsonparsereviver: (key:string, value:any) => any = undefined;  Constructor (private http:http) {}//For GET requests we have to splice the parameters to the URL, which is a special place for the API GetAll (Maxresultcount = 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 ': ' Applicat
        Ion/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 (resp
        ONSE_);
    }); } protected Processgetall (Response:response): observable<pageofnotedto> {Const STATUS = Response.stat

        us Const _headers:any = response.headers?
        Response.headers.toJSON (): {};
            if (status = =) {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 (' Server error ', status, _responsetext, _headers);
            else if (status = = 403) {Const _RESPONSETEXT = Response.text ();
        return this.throwexception (' Server error ', status, _responsetext, _headers);
            else if (status!== && status!== 204) {Const _RESPONSETEXT = Response.text ();
        Return This.throwexception (' unexpected appearance ', 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 (the new swaggerexception (message, status, response, headers, null)); }
    }
}

Use Services

Introduced in our note.component.ts to see if our service is correct.

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:no
  Teserviceservice, Injector:injector) {super (injector); } protected list (Request:pagedrequestdto, Pagenumber:number, finishedcallback:function): void {this.notes Ervice.
            GetAll (0). Finally (() => {finishedcallback ();
    }). Subscribe ((result:pageofnotedto) => {console.log (result);        }); } protected Delete (User:notedto): void {}}

Because there is no reason to introduce in app.module.ts:

Import {Noteserviceservice} from ' @app/blog/note-service.service '
    providers: [
        noteserviceservice
    ]

Try it again.

Add notes to the role of the current user on the role Management page. Because we've added access rights to the background.

It seems that communication is normal, you can continue to improve the page.

Notes:notedto[]; Article listing
    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);
            });
    

Copy the contents of the user page (users.component.html), put it in our note.component.html file, and make the following modifications.

<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" >