index/src/app/view/admin/admin-article/admin-article.component.html

@@ -1 +1,32 @@
-<p>admin-article works!</p>
+<nz-table *ngIf="pageList" [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="page"
+          [nzPageSize]="pageSize" nzBordered="true" nzHideOnSinglePage="false" nzSimple="false"
+          nzFrontPagination="false" (nzPageIndexChange)="getArticle()" [nzScroll]="{x:'0px'}" [nzLoading]="loading">
+    <thead>
+    <tr>
+        <th>标题</th>
+        <th>发布日期</th>
+        <th>更新日期</th>
+        <th>阅读量</th>
+        <th>文章状态</th>
+        <th>管理</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of pageList.list">
+        <td nz-tooltip [nzTooltipTitle]="data.id+' . '+data.title" nzTooltipPlacement="topLeft">{{ data.title }}</td>
+        <td>{{ data.publishDateFormat }}</td>
+        <td>{{ data.updateDateFormat }}</td>
+        <td>{{ data.readingNumber }}</td>
+        <td>
+            <nz-tag [nzColor]="data.open?'#87d068':'#f50'">{{ data.open ? '可见' : '不可见' }}</nz-tag>
+        </td>
+        <td>
+            <a [routerLink]="'/write?id='+data.id">编辑</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a [routerLink]="'/article/'+data.id">查看</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a (click)="deleteArticle(data.id)">删除</a>
+        </td>
+    </tr>
+    </tbody>
+</nz-table>

index/src/app/view/admin/admin-article/admin-article.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {ApiService} from '../../../api/api.service';
+import {PageList} from '../../../class/HttpReqAndResp';
+import {Article} from '../../../class/Article';
 
 @Component({
     selector: 'app-admin-article',
@@ -7,9 +11,38 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdminArticleComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
+    constructor(private apiService: ApiService, private nzMessage: NzMessageService) {
     }
 
+    page: number = 1;
+    pageSize: number = 10;
+
+    pageList: PageList<Article>;
+
+    loading: boolean = true;
+
+    ngOnInit(): void {
+        this.getArticle();
+    }
+
+    getArticle = () => this.apiService.adminArticles(this.page, this.pageSize).subscribe({
+        next: data => this.pageList = data.result,
+        complete: () => this.loading = false,
+        error: err => this.loading = false
+    })
+
+    deleteArticle(id) {
+        this.loading = true;
+        this.apiService.deleteArticle(id).subscribe({
+            next: data => {
+                this.nzMessage.success('删除成功')
+                this.getArticle();
+            },
+            complete: () => this.loading = false,
+            error: err => {
+                this.nzMessage.error(err.msg)
+                this.loading = false
+            }
+        })
+    }
 }

index/src/app/view/admin/admin.component.less

@@ -5,7 +5,7 @@
 }
 
 nz-layout, nz-sider {
-  height: 100%;
+  min-height: 100%;
 }
 
 .layout {

index/src/app/view/admin/auth.guard.ts

@@ -12,7 +12,9 @@ export class AuthGuard implements CanActivate {
     constructor(private userService: UserService) {
         userService.watchUserInfo({
             complete: () => null,
-            error: (err) => null,
+            error: (err) => {
+                // 未登录 重定向
+            },
             next: data => {
                 this.userInfo = data.result
                 console.log(this.path);