Angular + NG-ZORRO พัฒนาระบบแบ็กเอนด์อย่างรวดเร็ว

ในไม่กี่วันที่ผ่านมาของบทความ เราได้เรียนรู้มากมายเกี่ยวกับ angular คราวนี้เราจะมากับผลิตภัณฑ์ขนาดเล็ก

angualr ถูกรวมเข้ากับ ng-zorro เพื่อพัฒนาระบบแบ็กเอนด์อย่างรวดเร็วและเป็นมาตรฐาน [คำแนะนำการสอนที่เกี่ยวข้อง: "การสอนเชิงมุม"]

ฟังก์ชั่นของระบบมีดังต่อไปนี้:

• รายชื่อผู้ใช้
• หน้ายินดีต้อนรับ
ผู้ใช้
• การแก้ไขผู้ใช้
• ใหม่
• ผู้ใช้ ลบ

บริการทั้งหมดใช้ข้อมูลจำลอง

มาทำกัน.

angular ui ที่ได้รับความนิยมมากขึ้น

รวมกับ ng-zorro

• กรอบงาน UI ที่กำหนดอย่างเป็นทางการของ Angular Material
• NG-ZORRO หรือที่รู้จักในชื่อ Ant Design of

Ant Design คุ้นเคยกับมัน ดังนั้นเราจึงรวมมันเข้ากับเฟรมเวิร์ก NG-ZORRO หากคุณคุ้นเคยกับ Ant Design เวอร์ชัน Vue หรือ React ฉันเชื่อว่าคุณสามารถเชื่อมต่อได้อย่างราบรื่น ~

เราใช้ angular-cli ซ้ำเพื่อสร้างโครงการ ng-zorro

การเพิ่ม ng-zorro นั้นง่ายมาก: ป้อนไดเรกทอรีรากของ ng-zorro และดำเนินการ ng add ng-zorro-antd

แน่นอน คุณยังสามารถดำเนินการ npm install ng-zorro-antd เพื่อเพิ่มเข้าไปได้ แต่ไม่แนะนำ

หลังจากรวม ng-zorro แล้ว เราจะรันโปรเจ็กต์ npm run start และคุณจะเห็นภาพต่อไปนี้ในหน้า http://localhost:4200

ไม่เลวเลยพี่ชาย

การกำหนดเส้นทาง

เป็น hash และเพิ่มการกำหนดเส้นทางผู้ใช้แล้ว เราจำเป็นต้องทำการแก้ไขเล็กน้อยเท่านั้น

แนวคิด:

• ขั้นแรกให้เพิ่มหน้ารายชื่อ user เพจ ใช้ส่วนประกอบ table ใน ng-zorro

• เพื่อเพิ่มและเปลี่ยนหน้าของผู้ใช้เพื่อแชร์หน้า ng-zorro form

• ฟังก์ชันการลบหน้าส่วนประกอบของแบบฟอร์มใน ng-zorro เพื่อใช้ข้อความแจ้งป๊อปอัปโดยตรง ให้ใช้ ng-zorro

• จะแนะนำองค์ประกอบ ng-zorro ตามความจำเป็นเพื่อ

• ปรับไฟล์เส้นทาง

ตามแนวคิดนี้ เราต้องแนะนำมันใน ng-zorro :

// app.module.ts

นำเข้า { ReactiveFormsModule } จาก '@ เชิงมุม/แบบฟอร์ม';
นำเข้า { NzTableModule } จาก 'ng-zorro-antd/table';
นำเข้า { NzModalModule } จาก 'ng-zorro-antd/modal';
นำเข้า { NzButtonModule } จาก 'ng-zorro-antd/button';
นำเข้า { NzFormModule } จาก 'ng-zorro-antd/form';
นำเข้า { NzInputModule } จาก 'ng-zorro-antd/input';


-

การนำเข้า: [ // เพิ่มในการนำเข้าแทนที่จะประกาศ NzTableModule ในการประกาศ
  NzModalโมดูล,
  NzButtonโมดูล,
  NZFormModule,
  โมดูลปฏิกิริยา
  NzInputModule
]

หลักการที่เรียบง่ายและเข้าใจง่าย เราไม่ใช้ children เพื่อซ้อนการกำหนดเส้นทาง:

// app.routing.module.ts

นำเข้า { NgModule } จาก '@ เชิงมุม/หลัก';
นำเข้า { เส้นทาง, RouterModule, PreloadAllModules } จาก '@ เชิงมุม/เราเตอร์';
นำเข้า { WelcomeComponent } จาก './pages/welcome/welcome.component';
นำเข้า { UserComponent } จาก './pages/user/user.component';
นำเข้า { UserInfoComponent } จาก './pages/user/user-info/user-info.component';

// เส้นทางที่เกี่ยวข้อง const เส้นทาง: เส้นทาง = [
  - 
    เส้นทาง: '', 
    pathMatch: 'เต็ม' 
    เปลี่ยนเส้นทางไปที่: '/ ยินดีต้อนรับ' 
  -
  -
    เส้นทาง: 'ยินดีต้อนรับ'
    ส่วนประกอบ: WelcomeComponent
  -
  -
    เส้นทาง: 'ผู้ใช้'
    ส่วนประกอบ: UserComponent
  -
  -
    เส้นทาง: 'ผู้ใช้/เพิ่ม',
    ส่วนประกอบ: UserInfoComponent
  -
  -
    เส้นทาง: 'ผู้ใช้/แก้ไข/:uuid',
    ส่วนประกอบ: UserInfoComponent
  -
-

@NgModule({
  การนำเข้า: [RouterModule.forRoot(
    เส้นทาง
    -
      useHash: จริง // ใช้โหมดแฮช preloadingStrategy: PreloadAllModules
    -
  -
  ส่งออก: [โมดูลเราเตอร์]
-
ส่งออกคลาส AppRoutingModule { }

เปลี่ยนเมนู

เมนูที่สร้างโดยใช้โครงไม่ตรงกับฟังก์ชันที่เราต้องพัฒนา มาปรับเปลี่ยนกัน

// app.component.html

<nz-layout class="app-layout">
  <nz-sider class = "เมนูแถบด้านข้าง"
            nzยุบได้
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="ถูกยุบ"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <!-- ตามค่าเริ่มต้น ให้คลิกที่โลโก้เพื่อข้ามไปยังหน้าแรก -->
      <a routerLink="/ยินดีต้อนรับ">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="โลโก้">
        <h1>อึ้ง-ซอร์โร</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="การจัดการผู้ใช้" nzIcon="แดชบอร์ด">
        <ul>
          <li nz-เมนู-รายการ nzMatchRouter>
            <a routerLink="/user">รายชื่อผู้ใช้</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-รูปแบบ>
    <nz-ส่วนหัว>
      <div class="app-header">
        <span class="header-trigger" (คลิก)="isCollapsed = !isCollapsed">
            <i class="ทริกเกอร์"
               ไอคอน nz
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
      </div>
    </nz-ส่วนหัว>
    <เนื้อหา nz>
      <div class="เนื้อหาภายใน">
        <เราเตอร์-เต้าเสียบ></เราเตอร์-เต้าเสียบ>
      </div>
    </เนื้อหานิวซีแลนด์>
  </nz-เค้าโครง>
</nz-layout>

การแสดงเมนู หากเราจำเป็นต้องจัดการสิทธิ์ เราจำเป็นต้องมีแบ็กเอนด์เพื่อร่วมมือกับการถ่ายโอนค่า จากนั้นเราจะแสดงเมนูสิทธิ์ที่เกี่ยวข้องให้กับเพจ

และแทนที่ด้วยโค้ดด้านบนที่ได้รับ เป็นดังนี้:

กรอกรายชื่อผู้ใช้ให้สมบูรณ์

ต่อไป กรอกโครงร่างของรายชื่อผู้ใช้ เนื่องจากเราใช้กรอบงาน UI จึงสะดวกมากสำหรับเราในการเขียน:

รับรายชื่อผู้ใช้

// user.component.html

<nz-table #basicTable [nzData]="list">
  <หัว>
    <tr>
      <th>ชื่อ</th>
      <th>ตำแหน่ง</th>
      <th>การดำเนินการ</th>
    </tr>
  </หัว>
  <tbody>
    <!-- สำรวจข้อมูลที่ได้รับ -->
    <tr *ngFor="ให้ข้อมูลของ basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.position}}</td>
      <td>
        <a style="color: #f00;">ลบ</a>
      </td>
    </tr>
  </tbody>
</nz-table>

เราจำลองข้อมูลบางส่วนในโฟลเดอร์ assets user.json :

{
  "ผู้ใช้": [
    -
      "uuid": 1,
      "ชื่อ": "จิมมี่",
      "ตำแหน่ง": "ส่วนหน้า"
    -
    -
      "uuid": 2,
      "ชื่อ": "จิม",
      "ตำแหน่ง": "แบ็กเอนด์"
    -
  -
  "สิ่งแวดล้อม": "การพัฒนา"
}

หลังจากเขียนบริการแล้ว เราจะเรียกเพื่อรับข้อมูลของผู้ใช้:

// user.component.ts

นำเข้า { ส่วนประกอบ OnInit } จาก '@ เชิงมุม/หลัก';
นำเข้า { UserService } จาก 'src/app/services/user.service';

@ส่วนประกอบ({
  ตัวเลือก: 'ผู้ใช้แอป'
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
-
คลาสส่งออก UserComponent ใช้ OnInit {

  รายการสาธารณะ: ใดๆ = []

  ตัวสร้าง (
    userService แบบอ่านอย่างเดียวส่วนตัว: UserService
  -

  ngOnInit(): เป็นโมฆะ {
    ถ้า (localStorage.getItem ('ผู้ใช้')) {
      ให้ obj = localStorage.getItem('ผู้ใช้') ||.
      this.list = JSON.parse (obj)
    } อื่น {
      นี้.getList()
    -
  -

  // รับรายชื่อผู้ใช้ getList() {
    this.userService.getUserList().สมัครสมาชิก({
      ถัดไป: (ข้อมูล: ใด ๆ ) => {
        localStorage.setItem('ผู้ใช้', JSON.stringify(data.users))
        this.list = data.users
      -
      ข้อผิดพลาด: (ข้อผิดพลาด: ใด ๆ ) => {
        console.log (ข้อผิดพลาด)
      -
    -
  -

}

เนื่องจากไม่มีบริการแบ็คเอนด์ ที่นี่เราจึงใช้ localstorage เพื่อบันทึกสถานะ

หลังจากกรอกรายละเอียดข้างต้นแล้ว เราจะได้ข้อมูลรายการดังนี้:

หากต้องการเพิ่มผู้ใช้และแก้ไขผู้ใช้

เราเพียงสร้างแบบฟอร์มซึ่งมีเพียงสองฟิลด์ ได้แก่ name และ position ฟังก์ชันทั้งสองนี้ใช้แบบฟอร์มร่วมกัน ~

เราเพิ่มลงใน html :

// user-info.component.html

<ฟอร์ม nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
  <nz-รูปแบบรายการ>
    <nz-form-control nzErrorTip="กรุณากรอกชื่อผู้ใช้!">
      <input type="text" nz-input formControlName="username" placeholder="กรุณากรอกชื่อผู้ใช้" style="width: 160px;"
    </nz-รูปแบบการควบคุม>
  </nz-รูปแบบรายการ>
  <nz-รูปแบบรายการ>
    <nz-form-control nzErrorTip="กรุณาระบุตำแหน่ง!">
      <input type="text" nz-input formControlName="position" placeholder="กรุณาระบุตำแหน่ง" style="width: 160px;"/>
    </nz-รูปแบบการควบคุม>
  </nz-รูปแบบรายการ>
  <button nz-button class="login-form-button เข้าสู่ระบบ-form-margin" [nzType]="'primary'">ยืนยัน</button>
</form>

หน้าเว็บมีลักษณะดังนี้:

จากนั้นจะมีการตัดสินเชิงตรรกะในการเพิ่มหรือแก้ไข หากการเชื่อมต่อถูกทำเครื่องหมายด้วย uuid แสดงว่ากำลังแก้ไข show you the codes

// user-info.component.ts

นำเข้า { ส่วนประกอบ OnInit } จาก '@ เชิงมุม/หลัก';
นำเข้า { FormBuilder, FormGroup, Validators } จาก '@ เชิงมุม/แบบฟอร์ม';
นำเข้า { ActivatedRoute, ParamMap } จาก '@ เชิงมุม/เราเตอร์';

@ส่วนประกอบ({
  ตัวเลือก: 'ข้อมูลผู้ใช้แอป',
  templateUrl: './user-info.component.html',
  styleUrls: ['./user-info.component.scss']
-
คลาสส่งออก UserInfoComponent ใช้ OnInit {

  isAdd สาธารณะ: บูลีน = จริง;
  ข้อมูลผู้ใช้สาธารณะ: ใดๆ = []
  uuid สาธารณะ: หมายเลข = 0;

  validateForm!: FormGroup;

  ตัวสร้าง (
    fb ส่วนตัว: FormBuilder,
    เส้นทางส่วนตัว: ActivatedRoute,
  -

  ngOnInit(): เป็นโมฆะ {
    this.userInfo = JSON.parse (localStorage.getItem ('ผู้ใช้') || '[]')
    this.route.paramMap.subscribe ((พารามิเตอร์: ParamMap)=>{
      this.uuid = parseInt(params.get('uuid') || '0')
    -
    // เป็นสถานะการแก้ไข ให้ตั้งค่าตัวระบุ if(this.uuid) {
      this.isAdd = เท็จ
    -
    
    ถ้า (this.isAdd) {
      this.validateForm = this.fb.group({
        ชื่อผู้ใช้: [null, [Validators.required]],
        ตำแหน่ง: [null, [Validators.required]]
      -
    } อื่น {
      ให้ current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] ||
      // ข้อมูลทดแทน this.validateForm = this.fb.group({
        ชื่อผู้ใช้: [current.name, [Validators.required]],
        ตำแหน่ง: [current.position, [Validators.required]]
      -
    -
    
  -

  ส่งแบบฟอร์ม() {
    // หากไม่สอดคล้องกับการส่ง จะมีการรายงานข้อผิดพลาด if(!this.validateForm.valid) {
      Object.values(this.validateForm.controls).forEach((การควบคุม: ใด ๆ) => {
        ถ้า (ควบคุม?.ไม่ถูกต้อง) {
          ควบคุม?.markAsDirty();
          ควบคุม?.updateValueAndValidity ({ onlySelf: true });
        -
      -
      กลับ
    -

    // รับข้อมูลแบบฟอร์ม const data = this.validateForm.value
    //เพิ่มผู้ใช้ใหม่ if(this.isAdd) {
      
      ให้ LastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {});
      this.userInfo.push({
        uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1),
        ชื่อ: data.ชื่อผู้ใช้,
        ตำแหน่ง: data.position
      -
      localStorage.setItem('ผู้ใช้', JSON.stringify(this.userInfo))
    } else { //แก้ไขผู้ใช้ อัปเดตข้อมูล ให้ mapList = this.userInfo.map((item: any) => {
        ถ้า (item.uuid === this.uuid) {
          กลับ {
            uuid: this.uuid,
            ชื่อ: data.ชื่อผู้ใช้,
            ตำแหน่ง: data.position
          -
        -
        คืนสินค้า
      -
      localStorage.setItem('ผู้ใช้', JSON.stringify(mapList))
    -
  -

}

ขั้นแรกเราตั้งค่าตัวระบุ isAdd ซึ่งเป็นค่าเริ่มต้นสำหรับผู้ใช้ใหม่ เมื่อมี uuid อยู่แล้ว ให้ตั้งค่าเป็นค่า false โดยระบุว่าอยู่ในสถานะแก้ไขและกรอกแบบฟอร์มกลับด้วยเนื้อหา การดำเนินการส่งแบบฟอร์มจะถูกตัดสินตามตัวระบุนี้ด้วย เราเปลี่ยนข้อมูล localStorage โดยตรงเพื่อให้แน่ใจว่าข้อมูลรายการตรงกัน

สำหรับฟังก์ชันการลบ

เราจะแนะนำกล่องโต้ตอบโมดอลเพื่อถามว่าจะลบหรือไม่

// user.component.ts

// ลบ ลบ (ข้อมูล: ใด ๆ ) {
  นี้.modal.confirm({
    nzTitle: '<i>คุณต้องการลบผู้ใช้รายนี้หรือไม่?</i>',
    nzOnOk: () => {
      ให้ผู้ใช้ = JSON.parse(localStorage.getItem('users') || '[]');
      ให้ filterList = users.filter((item: any) => item.uuid !== data.uuid);
      localStorage.setItem('ผู้ใช้', JSON.stringify(filterList));
      this.list = ตัวกรองรายการ
    -
  -
-

เราค้นหาข้อมูลที่ถูกลบ ลบออก แคชข้อมูลผู้ใช้ใหม่อีกครั้ง และอัปเดตข้อมูลรายชื่อผู้ใช้ของ table

จนถึงตอนนี้ เราได้ทำโปรเจ็กต์ง่ายๆ สำเร็จแล้ว มาดูภาพรวมโดยใช้ Gif กัน

【เกิน】