修改路径

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

@@ -0,0 +1,41 @@
+<div class="inner-content">
+    <nz-card nzTitle="文章管理" nzSize="small">
+        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="page"
+                  [nzPageSize]="pageSize" [nzLoading]="loading"
+                  (nzPageIndexChange)="getArticle()" nzFrontPagination="false">
+            <thead>
+            <th>标题</th>
+            <th>发布日期</th>
+            <th>更新日期</th>
+            <th>文章类型</th>
+            <th>阅读量</th>
+            <th>是否可见</th>
+            <th>操作</th>
+            </thead>
+            <tbody>
+            <tr *ngFor="let data of table.data">
+                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.title" nzTooltipPlacement="right"
+                    nz-tooltip>{{data.title}}</td>
+                <td>{{data.publishDateFormat}}</td>
+                <td>{{data.updateDateFormat}}</td>
+                <td>
+                    <nz-tag nzColor="green" *ngIf="data.original">原创</nz-tag>
+                    <nz-tag nzColor="#ff5500" *ngIf="!data.original">转载</nz-tag>
+                </td>
+                <td>
+                    <nz-tag [nzColor]="'purple'">{{data.readingNumber}}</nz-tag>
+                </td>
+                <td><input type="checkbox" [checked]="data.open" disabled></td>
+                <td>
+                    <a routerLink="/write" [queryParams]="{id:data.id}" class="edit-opr">编辑</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a [routerLink]="'/article'+data.id" class="show-opr">查看</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这篇文章吗?" nzOkText="删除" nzCancelText="点错了"
+                       (nzOnConfirm)="deleteArticle(data.id)" class="del-opr">删除</a>
+                </td>
+            </tr>
+            </tbody>
+        </nz-table>
+    </nz-card>
+</div>

src/app/view/admin/admin-article/admin-article.component.less

@@ -0,0 +1,3 @@
+td {
+  max-width: 200px;
+}

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

@@ -0,0 +1,50 @@
+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';
+import {Title} from '@angular/platform-browser';
+
+@Component({
+    selector: 'app-admin-article',
+    templateUrl: './admin-article.component.html',
+    styleUrls: ['./admin-article.component.less']
+})
+export class AdminArticleComponent implements OnInit {
+
+    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
+    }
+
+    page: number = 1;
+    pageSize: number = 10;
+
+    pageList: PageList<Article> = new PageList<Article>();
+
+    loading: boolean = true;
+
+    ngOnInit(): void {
+        this.title.setTitle('小海博客 | 文章管理')
+        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.loading = false;
+                this.getArticle();
+            },
+            error: err => {
+                this.nzMessage.error(err.msg)
+                this.loading = false
+            }
+        })
+    }
+}

src/app/view/admin/admin-article/admin-article.module.ts

@@ -0,0 +1,31 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {AdminArticleComponent} from './admin-article.component';
+import {
+    NzCardModule,
+    NzDividerModule,
+    NzPopconfirmModule,
+    NzTableModule, NzTagModule,
+    NzToolTipModule,
+    NzTypographyModule
+} from 'ng-zorro-antd';
+
+@NgModule({
+    declarations: [
+        AdminArticleComponent
+    ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild([{path: '', component: AdminArticleComponent}]),
+        NzTableModule,
+        NzTypographyModule,
+        NzToolTipModule,
+        NzCardModule,
+        NzDividerModule,
+        NzPopconfirmModule,
+        NzTagModule,
+    ]
+})
+export class AdminArticleModule {
+}