访客信息管理

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

@@ -1 +1,24 @@
-<p>admin-visitor works!</p>
+<div class="inner-content">
+    <nz-card nzTitle="访客信息管理" nzSize="small">
+        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
+                  [nzPageSize]="pageSize" [nzLoading]="loading"
+                  (nzPageIndexChange)="getVisitors()" nzFrontPagination="false">
+            <thead>
+            <th>ip地址</th>
+            <th>访问日期</th>
+            <th>浏览器类型</th>
+            <th>浏览器版本</th>
+            <th>系统</th>
+            </thead>
+            <tbody>
+            <tr *ngFor="let data of table.data">
+                <td>{{data.ip}}</td>
+                <td>{{data.date}}</td>
+                <td>{{data.browserName}}</td>
+                <td>{{data.browserVersion}}</td>
+                <td>{{data.osname}}</td>
+            </tr>
+            </tbody>
+        </nz-table>
+    </nz-card>
+</div>

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

@@ -1,15 +1,34 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {ApiService} from '../../../api/api.service';
+import {PageList} from '../../../class/HttpReqAndResp';
+import {Visitor} from '../../../class/Visitor';
 
 @Component({
-  selector: 'app-admin-visitor',
+    selector: 'app-admin-visitor',
-  templateUrl: './admin-visitor.component.html',
+    templateUrl: './admin-visitor.component.html',
-  styleUrls: ['./admin-visitor.component.less']
+    styleUrls: ['./admin-visitor.component.less']
 })
 export class AdminVisitorComponent implements OnInit {
 
-  constructor() { }
+    constructor(private apiService: ApiService, private title: Title) {
+    }
 
-  ngOnInit(): void {
+    pageIndex: number = 1;
-  }
+    pageSize: number = 10;
 
+    pageList: PageList<Visitor> = new PageList<Visitor>();
+
+    loading: boolean = true;
+
+    ngOnInit(): void {
+        this.title.setTitle('小海博客 | 访客信息管理')
+        this.getVisitors();
+    }
+
+    getVisitors = () => this.apiService.adminVisitors(false, this.pageSize, this.pageIndex).subscribe({
+        next: data => this.pageList = data.result,
+        complete: () => this.loading = false,
+        error: err => this.loading = false
+    })
 }

index/src/app/view/admin/admin-visitor/admin-visitor.module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminVisitorComponent} from './admin-visitor.component';
+import {NzButtonModule, NzCardModule, NzDividerModule, NzTableModule} from 'ng-zorro-antd';
 
 
 @NgModule({
@@ -10,7 +11,11 @@ import {AdminVisitorComponent} from './admin-visitor.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminVisitorComponent}])
+        RouterModule.forChild([{path: '', component: AdminVisitorComponent}]),
+        NzCardModule,
+        NzTableModule,
+        NzButtonModule,
+        NzDividerModule
     ]
 })
 export class AdminVisitorModule {