使用.net core ABP和Angular模板構(gòu)建博客管理系統(tǒng)（實(shí)現(xiàn)編輯頁(yè)面功能）

返回目錄

初步實(shí)現(xiàn)編輯更新功能

新建一個(gè)edit-note模塊如下：

編輯模塊

我們看看作者的新建頁(yè)面用到了什么，
用到了ngx-bootstrap的彈出層。官網(wǎng)地址: https://valor-software.com/ngx-bootstrap/#/modals#modal-directive
然后是一個(gè)基類AppComponentBase

edit-user.component.ts

在我們頁(yè)面引入相關(guān)組件

import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import {NoteServiceService, NoteDto, UpdateNoteDto} from '@app/blog/note-service.service';
import { AppComponentBase } from '@shared/app-component-base';

定義一些東西

export class EditNoteComponent extends AppComponentBase {
    active = false; // 彈出層內(nèi)容是否有效
    note: UpdateNoteDto; // 編輯的文章
    preViewContent = ''; // 文章預(yù)覽內(nèi)容，轉(zhuǎn)換層html后的
    @ViewChild('editNoteModal') modal: ModalDirective;  // 彈出層
    @ViewChild('modalContent') modalContent: ElementRef; // 彈出層內(nèi)的內(nèi)容

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>(); // 頁(yè)面間傳值，這相當(dāng)于一個(gè)自定義事件
  constructor(injector: Injector, private noteServer: NoteServiceService) {
      super(injector);
  }
// 顯示
    show(id: number): void {
        this.noteServer.GetNote(id).subscribe(m => {
            this.note = m;
            this.active = true;
            this.modal.show();
        });
    }
    // 關(guān)閉
    close(): void {
        this.updateNote();
        this.active = false;
        this.modal.hide();
    }

    // 更新
    updateNote(): void {
        this.noteServer.Update(this.note).subscribe(m => {

        });
    }

}

edit-note.component.html編輯頁(yè)面初步布局如下

<div bsModal #editNoteModal="bs-modal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="editNoteModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="container">

        <div #modalContent>
            <div *ngIf="active">
                <div class="m-editer-area">
                    <!--************* 頂部，文章標(biāo)題和一些菜單  ****************-->
                    <header>
                        <div class="u-title">
                            <input type="text" [(ngModel)]="note.title" class="form-control">
                        </div>
                    </header>
                    <!--************* 中間部分，編輯和預(yù)覽區(qū)域  ****************-->
                    <section>
                        <!--************* 中間部分左邊，編輯區(qū)域  ****************-->
                        <div class="u-wirte z-half">
                            <textarea id="editer" [(ngModel)]="note.content"></textarea>
                        </div>
                        <!--************* 中間部分右邊，預(yù)覽區(qū)域  ****************-->
                        <div class="u-view z-half">
                            <article [innerHTML]="preViewContent"></article>
                        </div>
                    </section>
                    <!--************* 底部，  ****************-->
                    <footer>
                        <div class="u-count">
                            <p>共{{note.content.length}}字節(jié)</p>
                        </div>
                        <div class="u-menu">
                            <a>發(fā)布</a>
                            <a (click)="close()">關(guān)閉</a>
                        </div>
                    </footer>
                </div>
            </div>
        </div>

    </div>
</div>

我們?cè)趀dit-note.component.css寫點(diǎn)樣式

.m-editer-area {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    background: rgba(91, 28, 111, 0.8);
    transition: all .5s;
}
.m-editer-area header, .m-editer-area footer {
    text-align: right;
    font-size: 0;
}
.m-editer-area a {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
    transition: all .5s;
}
.m-editer-area a:hover {
    background: rgba(0,0,0,0.2);
}
.m-editer-area a.z-atv {
    color: #dd3c1f;
    background: rgba(255,255,255,0.8);
}
.m-editer-area footer a {
    padding: 0 10px;
}

.m-editer-area footer a:active, a.u-screen-tab:active {
    background: #dd3c1f;
    color: #fff;
    transition: none;
}
.m-editer-area footer p {
    float: left;
    line-height: 50px;
    margin-left: 15px;
    color: #fff;
}
.m-editer-area section {
    position: relative;
    height: 400px;
    background: #fff;
    overflow: hidden;
}
.m-editer-area section>div {
    transition: all .5s;
}
.u-wirte {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.u-wirte textarea {
    width: 98%;
    height: 100%;
    padding: 0 1%;
    line-height: 150%;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    font-family: "微軟雅黑"
}

.u-view {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: auto;
    padding: 1%;
    background: #fff;
    box-shadow: 0 0 10px #000 inset;
    transform: translateX(100%);
}

.u-view article {
    padding: 0;
    background: transparent;
}

.u-view.z-half {
    left: 50%;
    transform: translateX(0);
}

.u-wirte.z-half {
    right: 50%;
}

.u-view.z-atv {
    transform: translateX(0);
}

.z-full {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0;
}

.z-full section {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 50px;
    right: 0;
    height: auto;
}

.z-full footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
header {
    padding:10px 0;
}
header .u-title{
    width: 65%;
}
header .u-title input{
    background-color: transparent;
    color: whitesmoke;
    border: none;
}
footer .u-count{
    width: 20%;
    float: left;
    color: white;
    font-size: 16px;
}
footer .u-menu{
    width: 70%;
    float: right;
}
footer .u-menu *{
    float: right;
}

引用編輯功能

在note.component.ts中如下使用。添加引用，添加編輯方法。

import {EditNoteComponent} from '@app/blog/note/edit-note/edit-note.component';



@ViewChild('editNoteModal') editNoteModal: EditNoteComponent;
   editNote(note: NoteDto) {
       this.editNoteModal.show(note.id);
   }

在 note.component.html中添加模塊并調(diào)用editNote()

 <ul class="dropdown-menu pull-right">
    <li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="editNote(note)"><i class="material-icons">create</i>編輯</a></li>
    <li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="delete(note)"><i class="material-icons">delete_sweep</i>刪除</a></li>
</ul>

<app-edit-note #editNoteModal ></app-edit-note>
簡(jiǎn)單實(shí)現(xiàn)

可以看出來(lái)還有很多不足，后面一點(diǎn)一點(diǎn)來(lái)完善。

  • 返回列表后也沒(méi)有自動(dòng)更新
  • 預(yù)覽處也沒(méi)實(shí)現(xiàn)實(shí)時(shí)預(yù)覽
  • 自動(dòng)更新也沒(méi)有實(shí)現(xiàn)
  • 發(fā)布功能還沒(méi)有實(shí)現(xiàn)
  • 界面不夠美觀

返回列表更新

這個(gè)就要用到angular的父子頁(yè)面?zhèn)髦怠?br> 還記得之前定義了@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();這個(gè)還沒(méi)有用么。

    // 關(guān)閉
    close(): void {
        this.updateNote();
        this.active = false;
        this.modal.hide();
        this.modalSave.emit(this.note.title); // 我們這里還可以傳一個(gè)值過(guò)去
    }

在note模塊中做如下修改

<app-edit-note #editNoteModal (modalSave)="test($event)"></app-edit-note>


   // 測(cè)試父子頁(yè)面?zhèn)髦?   test(e) {
       alert(e);
       this.refresh();
   }
測(cè)試父子頁(yè)面?zhèn)髦?/div>

實(shí)現(xiàn)實(shí)時(shí)預(yù)覽

我們之前設(shè)計(jì)是使用markdown語(yǔ)法來(lái)制作這個(gè)編輯功能。我們選用marked組件來(lái)幫助我們，使用參考：https://www.npmjs.com/package/marked
安裝marked

cnpm install marked --save

引入

import marked from 'marked';

使用

    // 顯示
    show(id: number): void {
        this.noteServer.GetNote(id).subscribe(m => {
            this.note = m;
            this.active = true;
            this.modal.show();
            this.preViewContent = marked(this.note.content);
        });
    }
預(yù)覽有了，但是沒(méi)有實(shí)時(shí)同步

要實(shí)現(xiàn)實(shí)時(shí)同步，我們使用angular的FormControl來(lái)幫忙

import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';  // 觸發(fā)間隔
import 'rxjs/add/operator/distinctUntilChanged'; // 防止觸發(fā)兩次

  term = new FormControl();

    // 顯示
    show(id: number): void {
        this.noteServer.GetNote(id).subscribe(m => {
            this.note = m;
            this.active = true;
            this.modal.show();
            this.term.valueChanges  // 監(jiān)測(cè)輸入文本框的變化同步更新預(yù)覽 400ms
                .debounceTime(400)
                .distinctUntilChanged()
                .subscribe(term => {
                   this.preViewContent = marked(this.note.content);
                });
        });
    }

頁(yè)面修改

<div class="u-wirte z-half">
      <textarea id="editer" [(ngModel)]="note.content" [formControl]="term"></textarea>
 </div>

別忘記app.module.ts中也需要引入ReactiveFormsModule

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

    imports: [
        ReactiveFormsModule,
        FormsModule,
    ],
同步預(yù)覽

自動(dòng)更新到服務(wù)器

上面都做到了，自動(dòng)更新就簡(jiǎn)單了

    // 顯示
    show(id: number): void {
        this.noteServer.GetNote(id).subscribe(m => {
            this.note = m;
            this.active = true;
            this.modal.show();
            this.term.valueChanges  // 監(jiān)測(cè)輸入文本框的變化同步更新預(yù)覽 400ms
                .debounceTime(400)
                .distinctUntilChanged()
                .subscribe(term => {
                    this.preViewContent = marked(this.note.content);
                });
            this.term.valueChanges  // 30s自動(dòng)保存到服務(wù)器
                .debounceTime(1000 * 30)
                .subscribe(t => this.updateNote());
        });
    }

實(shí)現(xiàn)發(fā)布功能

    // 發(fā)布
    publicNote(): void {
        this.note.img = 'http://img0.imgtn.bdimg.com/it/u=313511342,2661546070&fm=27&gp=0.jpg';
        this.note.des = '我實(shí)在太懶了，添加描述的功能還沒(méi)有來(lái)得及開發(fā),而且這兩個(gè)字的我后臺(tái)設(shè)置的是必填字段';
        this.noteServer.PublicNote(this.note).subscribe(m => {
            this.active = false;
            this.modal.hide();
            this.modalSave.emit(null);
        });
    }

簡(jiǎn)單優(yōu)化

將新建方法修改如下：

   createNote() {
       const input = new CreateNoteDto();
       input.textType = 0;
       this.noteService.Create(input).subscribe(m => {
           this.editNote(m);
       });
   }

編輯頁(yè)面的樣式也做了調(diào)整，這里就不一一寫了。最后效果如下：

1.gif

好項(xiàng)目是慢慢優(yōu)化出來(lái)的，一口是吃不出一個(gè)大胖子來(lái)的，慢慢優(yōu)化，一步步行動(dòng)起來(lái)，才能遇見(jiàn)更好的自己。

  • 在操作等待的時(shí)候沒(méi)有遮罩層，這種體驗(yàn)很不好。
  • 操作成功或者失敗也沒(méi)有提示。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容