从"Blog"仓库中分离出来

admin/src/app/pages/links-manager/links.component.html

@@ -0,0 +1,59 @@
+<div class="admin-content" id="links-manager">
+    <div class="admin-content-body">
+        <div>
+            <strong class="part-title">友链管理</strong>
+            <button nz-button nzType="primary" nzGhost="true" style="margin-left: 30px;" (click)="add()">新增</button>
+        </div>
+
+        <div>
+            <div class=" scrollable-horizontal" *ngIf="linkService.currentPage">
+                <table class="table ">
+                    <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>友链名称</th>
+                        <th>友链链接</th>
+                        <th>状态</th>
+                        <th>管理</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr *ngFor="let link of linkService.currentPage.list">
+                        <td>{{link.id}}</td>
+                        <td class="text-truncate" style="max-width: 150px" [title]="link.name">{{link.name}}</td>
+                        <td><a [href]="link.url" target="_blank">{{link.url}}</a></td>
+                        <td><input type="checkbox" [checked]="link.open" disabled="disabled"></td>
+                        <td>
+                            <div class="btn-group">
+                                <a (click)="edit(link)">编辑</a>
+                                <nz-divider nzType="vertical"></nz-divider>
+                                <a nz-popconfirm nzTitle="是否要删除这条友链?" (nzOnConfirm)="doDel(link.id)">删除</a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    </tbody>
+                    <nz-pagination align="center" [nzPageIndex]="pageNum" [nzHideOnSinglePage]="true"
+                                   [nzTotal]="linkService.currentPage.total" [nzPageSize]="pageSize"
+                                   (nzPageIndexChange)="toPage($event)"></nz-pagination>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- 带输入框的弹出层 -->
+<nz-modal [(nzVisible)]="showPupup" nzTitle="友链编辑" (nzOnCancel)="showPupup=!showPupup" (nzOnOk)="update()">
+    <label style="margin-left: 10%;">网站名称:</label>
+    <input nz-input style="width: 80%;margin-left: 10%" [(ngModel)]="updateReqBody.name">
+    <label style="margin-left: 10%;">网站链接:</label>
+    <input nz-input style="width: 80%;margin-left: 10%" [(ngModel)]="updateReqBody.url">
+    <label style="margin-left: 10%;">是否公开显示:</label>
+    <select [(ngModel)]="updateReqBody.open">
+        <option value="">请选择</option>
+        <option value="true">显示</option>
+        <option value="false">不显示</option>
+    </select>
+
+</nz-modal>

admin/src/app/pages/links-manager/links.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LinksManagerComponent } from './links.component';
+
+describe('LinksComponent', () => {
+  let component: LinksManagerComponent;
+  let fixture: ComponentFixture<LinksManagerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LinksManagerComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinksManagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

admin/src/app/pages/links-manager/links.component.ts

@@ -0,0 +1,104 @@
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {LinkService} from '../../services/link/link.service';
+import {Link} from '../../classes/link';
+
+@Component({
+    selector: 'app-links',
+    templateUrl: './links.component.html',
+    styleUrls: ['./links.component.css']
+})
+export class LinksManagerComponent implements OnInit {
+
+    constructor(public linkService: LinkService, private message: NzMessageService) {
+    }
+
+    pageNum: number = 1;
+    pageSize: number = 10;
+
+    showPupup = false;
+
+    updateReqBody = new Link();
+
+    isUpdate;
+
+    ngOnInit() {
+        this.getData();
+    }
+
+    getData() {
+        this.linkService.getLinks(this.pageNum, this.pageSize);
+    }
+
+    toPage(e: number) {
+        this.pageNum = e;
+        this.getData();
+    }
+
+    edit(link) {
+        this.showPupup = true;
+        this.updateReqBody = link;
+        this.isUpdate = true;
+    }
+
+    update() {
+        if (this.updateReqBody.name === '') {
+            this.message.warning('友链名称不能为空');
+            return;
+        }
+        if (this.updateReqBody.url === '') {
+            this.message.warning('友链链接不能为空');
+            return;
+        }
+        // @ts-ignore
+        // tslint:disable-next-line:triple-equals
+        if (this.updateReqBody.open == '') {
+            this.message.warning('友链状态不能为空');
+            return;
+        }
+        this.showPupup = false;
+        if (this.isUpdate) {
+            this.linkService.update(this.updateReqBody).subscribe(data => {
+                if (data.code === 0) {
+                    this.message.success('更新成功');
+                    this.getData();
+                } else {
+                    this.message.error('更新失败，原因：' + data.msg);
+                }
+                this.updateReqBody.name = null;
+                this.updateReqBody.url = null;
+                this.updateReqBody.open = null;
+            });
+        } else {
+            this.linkService.create(this.updateReqBody).subscribe(data => {
+                if (data.code === 0) {
+                    this.message.success('新增成功');
+                    this.getData();
+                } else {
+                    this.message.error('新增失败，原因：' + data.msg);
+                }
+                this.updateReqBody.name = null;
+                this.updateReqBody.url = null;
+                this.updateReqBody.open = null;
+            });
+        }
+    }
+
+    add() {
+        this.showPupup = true;
+        this.isUpdate = false;
+    }
+
+    doDel(id) {
+        this.linkService.delete(id).subscribe(data => {
+            if (data.code === 0) {
+                this.message.success('删除成功！');
+                this.getData();
+            } else {
+                this.message.error('删除失败，原因：' + data.msg);
+            }
+        });
+    }
+
+
+}