zheng/blog-frontEnd
1
0
Fork 0
Code Issues 2 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

针对普通用户的界面

Browse Source
This commit is contained in:
小海
2020-05-16 21:55:35 +08:00
parent 1c7f189d11
commit 446d7e06e4
5 changed files with 132 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index/src/app/view/admin/admin-comment/admin-comment.component.ts
View File

@@ -3,6 +3,7 @@ import {NzMessageService} from 'ng-zorro-antd';
import {ApiService} from '../../../api/api.service'; import {ApiService} from '../../../api/api.service';
import {PageList} from '../../../class/HttpReqAndResp'; import {PageList} from '../../../class/HttpReqAndResp';
import {Comment, CommentReq} from '../../../class/Comment'; import {Comment, CommentReq} from '../../../class/Comment';
import {GlobalUserService} from '../../../services/global-user.service';
@Component({ @Component({
selector: 'app-admin-comment', selector: 'app-admin-comment',
@@ -11,7 +12,23 @@ import {Comment, CommentReq} from '../../../class/Comment';
}) })
export class AdminCommentComponent implements OnInit { export class AdminCommentComponent implements OnInit {
constructor(private apiService: ApiService, private messageService: NzMessageService) { constructor(private apiService: ApiService, private messageService: NzMessageService, private userService: GlobalUserService) {
this.userService.watchUserInfo({
next: data => {
if (data.result) {
if (data.result.role === 'admin') {
this.getComment = this.getCommentForAdmin;
} else {
this.getComment = this.getCommentForUser;
}
} else {
this.getComment = this.getCommentForUser;
}
this.getComment()
},
error: null,
complete: null
})
} }
loading: boolean = true; loading: boolean = true;
@@ -23,12 +40,20 @@ export class AdminCommentComponent implements OnInit {
content: new CommentReq(true), content: new CommentReq(true),
editFocus: false, editFocus: false,
} }
getComment: any;// 存放获取评论的方法
ngOnInit(): void { ngOnInit(): void {
this.getComment();
} }
getComment = () => this.apiService.getCommentByTypeForAdmin(true, this.pageIndex, this.pageSize).subscribe({
getCommentForAdmin = () => this.apiService.getCommentByTypeForAdmin(true, this.pageIndex, this.pageSize).subscribe({
next: data => this.pageList = data.result,
complete: () => this.loading = false,
error: err => this.loading = false
})
getCommentForUser = () => this.apiService.getCommentByTypeForUser(true, this.pageIndex, this.pageSize).subscribe({
next: data => this.pageList = data.result, next: data => this.pageList = data.result,
complete: () => this.loading = false, complete: () => this.loading = false,
error: err => this.loading = false error: err => this.loading = false

105
index/src/app/view/admin/admin-dashboard/admin-dashboard.component.html
View File

@@ -1,42 +1,67 @@
<div nz-row> <div *ngIf="userInfo&&userInfo.role==='admin'">
<nz-card nzTitle="统计" nz-col nzSpan="12" nzSize="small"> <div nz-row>
<nz-row [nzGutter]="24"> <nz-card nzTitle="统计" nz-col nzSpan="12" nzSize="small">
<nz-col [nzSpan]="6"> <nz-row [nzGutter]="24">
<nz-statistic [nzValue]="(counts.articleCount | number)!" nzTitle="文章数量"></nz-statistic> <nz-col [nzSpan]="6">
</nz-col> <nz-statistic [nzValue]="(counts.articleCount | number)!" nzTitle="文章数量"></nz-statistic>
<nz-col [nzSpan]="6"> </nz-col>
<nz-statistic [nzValue]="(counts.tagCount | number)!" nzTitle="标签量"></nz-statistic> <nz-col [nzSpan]="6">
</nz-col> <nz-statistic [nzValue]="(counts.tagCount | number)!" nzTitle="标签量"></nz-statistic>
<nz-col [nzSpan]="6"> </nz-col>
<nz-statistic [nzValue]="(counts.categoryCount | number)!" nzTitle="分类数量"></nz-statistic> <nz-col [nzSpan]="6">
</nz-col> <nz-statistic [nzValue]="(counts.categoryCount | number)!" nzTitle="分类数量"></nz-statistic>
<nz-col [nzSpan]="6"> </nz-col>
<nz-statistic [nzValue]="(counts.commentCount | number)!" nzTitle="评论量"></nz-statistic> <nz-col [nzSpan]="6">
</nz-col> <nz-statistic [nzValue]="(counts.commentCount | number)!" nzTitle="评论量"></nz-statistic>
</nz-row> </nz-col>
</nz-card> </nz-row>
<nz-card nzTitle="信息" nz-col nzSpan="11" nzOffset="1" nzSize="small"> </nz-card>
<nz-row [nzGutter]="24"> <nz-card nzTitle="信息" nz-col nzSpan="11" nzOffset="1" nzSize="small">
<nz-col [nzSpan]="8"> <nz-row [nzGutter]="24">
<nz-statistic [nzValue]="(counts.visitorCount | number)!" nzTitle="总访问量"></nz-statistic> <nz-col [nzSpan]="8">
</nz-col> <nz-statistic [nzValue]="(counts.visitorCount | number)!" nzTitle="总访问量"></nz-statistic>
<nz-col [nzSpan]="8"> </nz-col>
<nz-statistic [nzValue]="(dayVisitCount | number)!" nzTitle="日访问量"></nz-statistic> <nz-col [nzSpan]="8">
</nz-col> <nz-statistic [nzValue]="(dayVisitCount | number)!" nzTitle="日访问量"></nz-statistic>
<nz-col [nzSpan]="8"> </nz-col>
<nz-statistic [nzValue]="userInfo.recentlyLandedDate?userInfo.recentlyLandedDate:''" <nz-col [nzSpan]="8">
nzTitle="上次登录"></nz-statistic> <nz-statistic [nzValue]="userInfo.recentlyLandedDate?userInfo.recentlyLandedDate:''"
</nz-col> nzTitle="上次登录"></nz-statistic>
</nz-row> </nz-col>
</nz-card> </nz-row>
</nz-card>
</div>
<div nz-row style="margin-top: 30px">
<nz-card style="width:100%;" nzSize="small" nzTitle="日志" [nzExtra]="reload">
<ng-template #reload>
<a (click)="getLog()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
</ng-template>
<nz-spin [nzSpinning]="logLoading" style="width: 100%;">
<pre style="width: 100%;max-height: 500px;overflow: auto;">{{logText}}</pre>
</nz-spin>
</nz-card>
</div>
</div> </div>
<div nz-row style="margin-top: 30px"> <div *ngIf="userInfo&&userInfo.role==='user'">
<nz-card style="width:100%;" nzSize="small" nzTitle="日志" [nzExtra]="reload"> <div nz-row>
<ng-template #reload> <nz-card nzTitle="信息" nz-col nzSpan="6" nzOffset="1" nzSize="small">
<a (click)="getLog()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a> <nz-statistic [nzValue]="userInfo.recentlyLandedDate?userInfo.recentlyLandedDate:''"
</ng-template> nzTitle="上次登录"></nz-statistic>
<nz-spin [nzSpinning]="logLoading" style="width: 100%;"> </nz-card>
<pre style="width: 100%;max-height: 500px;overflow: auto;">{{logText}}</pre> <nz-card nzTitle="关于此博客" nzSize="small" nz-col nzSpan="6" nzOffset="2">
</nz-spin> <p>此博客由 <a href="https://github.com/xiaohai2271" target="_blank">禾几海(郑海)</a> 设计并实现的</p>
</nz-card> <p>博客自2019年3月开始开发编写 5月开始正式运行至今</p>
<p>博客所有代码都是开源的，你可以随意修改，运行和发布</p>
<p>
<a href="https://github.com/xiaohai2271/blog-backEnd" target="_blank">后端代码可以在此处找到</a>
<nz-divider nzType="vertical"></nz-divider>
<a href="https://github.com/xiaohai2271/blog-frontEnd" target="_blank">前端代码可以在此处找到</a>
</p>
<p>如果觉得博客还不错，请前往Github支持我，给我点一个star吧</p>
</nz-card>
<nz-card nz-col nzSpan="6" nzOffset="2">
<p style="font-style: italic">坚强的信心，能使平凡的人做出惊人的事业。</p>
<p style="text-align: right"> ——马尔顿</p>
</nz-card>
</div>
</div> </div>

12
index/src/app/view/admin/admin-dashboard/admin-dashboard.component.ts
View File

@@ -11,9 +11,6 @@ import {User} from '../../../class/User';
}) })
export class AdminDashboardComponent implements OnInit { export class AdminDashboardComponent implements OnInit {
constructor(private apiService: ApiService, private userService: GlobalUserService, private http: HttpClient) { constructor(private apiService: ApiService, private userService: GlobalUserService, private http: HttpClient) {
this.getLog();
this.getCounts();
this.getDayVisitCount();
this.getUserInfo(); this.getUserInfo();
} }
@@ -50,7 +47,14 @@ export class AdminDashboardComponent implements OnInit {
}) })
getUserInfo = () => this.userService.watchUserInfo({ getUserInfo = () => this.userService.watchUserInfo({
next: data => this.userInfo = data.result, next: data => {
this.userInfo = data.result
if (data.result && data.result.role === 'admin') {
this.getLog();
this.getCounts();
this.getDayVisitCount();
}
},
error: null, error: null,
complete: null complete: null
}) })

13
index/src/app/view/admin/admin-dashboard/admin-dashboard.module.ts
View File

@@ -2,7 +2,15 @@ import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {AdminDashboardComponent} from './admin-dashboard.component'; import {AdminDashboardComponent} from './admin-dashboard.component';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {NzButtonModule, NzCardModule, NzGridModule, NzIconModule, NzSpinModule, NzStatisticModule} from 'ng-zorro-antd'; import {
NzButtonModule,
NzCardModule,
NzDividerModule,
NzGridModule,
NzIconModule,
NzSpinModule,
NzStatisticModule
} from 'ng-zorro-antd';
@NgModule({ @NgModule({
@@ -15,7 +23,8 @@ import {NzButtonModule, NzCardModule, NzGridModule, NzIconModule, NzSpinModule,
NzButtonModule, NzButtonModule,
NzSpinModule, NzSpinModule,
NzIconModule, NzIconModule,
NzStatisticModule NzStatisticModule,
NzDividerModule
] ]
}) })
export class AdminDashboardModule { export class AdminDashboardModule {

33
index/src/app/view/admin/admin.component.html
View File

@@ -43,10 +43,10 @@
<!-- <span>分类管理</span>--> <!-- <span>分类管理</span>-->
<!-- </li>--> <!-- </li>-->
<!-- <li nz-menu-item routerLink="/admin/userInfo">--> <li nz-menu-item (click)="infoDrawerVisible = true">
<!-- <i nz-icon nzType="idcard" nzTheme="outline"></i>--> <i nz-icon nzType="idcard" nzTheme="outline"></i>
<!-- <span>修改信息</span>--> <span>查看信息</span>
<!-- </li>--> </li>
<li nz-menu-item routerLink="/admin/user" *ngIf="user.role=='admin'"> <li nz-menu-item routerLink="/admin/user" *ngIf="user.role=='admin'">
<i nz-icon nzType="user" nzTheme="outline"></i> <i nz-icon nzType="user" nzTheme="outline"></i>
@@ -95,19 +95,26 @@
<br><br> <br><br>
<nz-descriptions [nzColumn]="1"> <nz-descriptions [nzColumn]="1">
<nz-descriptions-item nzTitle="邮箱"> <nz-descriptions-item nzTitle="邮箱">
<i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i> <!-- 抽屉的宽度是256px -->
<span>{{user.email}}</span> <div style="width: 256px">
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i> <i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i>
<span>{{user.email}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</div>
</nz-descriptions-item> </nz-descriptions-item>
<nz-descriptions-item nzTitle="昵称"> <nz-descriptions-item nzTitle="昵称">
<i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i> <div style="width: 256px">
<span>{{user.displayName}}</span> <i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i> <span>{{user.displayName}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</div>
</nz-descriptions-item> </nz-descriptions-item>
<nz-descriptions-item nzTitle="描述" *ngIf="user.desc"> <nz-descriptions-item nzTitle="描述" *ngIf="user.desc">
<i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i> <div style="width: 256px">
<span>{{user.desc}}</span> <i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i> <span>{{user.desc}}</span>
<i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
</div>
</nz-descriptions-item> </nz-descriptions-item>
</nz-descriptions> </nz-descriptions>