تقوم Angular + NG-ZORRO بتطوير نظام الواجهة الخلفية بسرعة

في الأيام القليلة الماضية من المقالات، تعلمنا الكثير عن angular . هذه المرة سوف نتوصل إلى منتج صغير.

تم دمج angualr مع ng-zorro لتطوير نظام الواجهة الخلفية بسرعة وبشكل موحد. [توصية البرنامج التعليمي ذات الصلة: "Angular Tutorial"]

تتضمن وظائف النظام ما يلي:

مستخدم
• قائمة مستخدمي
• صفحة الترحيب
، مستخدم
• تعديل المستخدم
• الجديد
• ، حذف

جميع الخدمات، استخدام البيانات المحاكاة.

دعونا نفعل ذلك.

angular ui الأكثر شيوعًا

جنبًا إلى جنب مع ng-zorro

• إطار عمل واجهة المستخدم المعين رسميًا من Angular Material
• NG-ZORRO، والمعروف أيضًا باسم Ant Design of Angular، وهو إطار عمل واجهة المستخدم المحلي الأكثر شيوعًا،

Ant Design أن أولئك الذين يقومون بتطوير الواجهة الأمامية على دراية بها. لذا قمنا هنا بدمجه مع إطار عمل NG-ZORRO . إذا كنت معتادًا على إصدار Vue أو React من Ant Design ، فأعتقد أنه يمكنك الاتصال بسلاسة ~

نحن نعيد استخدام 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 } من '@angular/forms'؛
استيراد {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'؛


// ...

imports: [ // أضفه في الواردات بدلاً من الإعلان عن NzTableModule في الإعلانات،
  NzModalModule,
  NzButtonModule,
  نزفورممودول,
  وحدة النماذج التفاعلية,
  NzInputModule
]،

مبدأ بسيط وسهل الفهم، نحن لا نستخدم children لتداخل التوجيه:

// app.routing.module.ts

استيراد { NgModule } من '@angular/core'؛
استيراد { الطرق، RouterModule، PreloadAllModules } من '@angular/router'؛
استيراد {WelcomeComponent} من './pages/welcome/welcome.component'؛
استيراد {UserComponent} من "./pages/user/user.component"؛
استيراد { UserInfoComponent } من './pages/user/user-info/user-info.component'؛

// الطرق ذات الصلة مسارات ثابتة: الطرق = [
  { 
    طريق: ''، 
    pathMatch: "كامل"، 
    إعادة التوجيه إلى: '/مرحبًا' 
  },
  {
    المسار: "مرحبًا" ،
    المكون: مرحبًا بالمكون
  },
  {
    المسار: "المستخدم"،
    المكون: مكون المستخدم
  },
  {
    المسار: "مستخدم/إضافة"،
    المكون: UserInfoComponent
  },
  {
    المسار: "المستخدم/التحرير/:uuid"،
    المكون: UserInfoComponent
  }
];

@NgModule({
  الواردات: [RouterModule.forRoot(
    الطرق,
    {
      useHash: true,// استخدم وضع التجزئة preloadingStrategy: PreloadAllModules
    }
  )]،
  الصادرات: [وحدة التوجيه]
})
فئة التصدير AppRoutingModule { }

تغيير القائمة

القائمة التي تم إنشاؤها باستخدام السقالات لا تتطابق مع الوظائف التي نحتاج إلى تطويرها.

// app.component.html

<nz-layout class="app-layout">
  <nz-sider class="الشريط الجانبي للقائمة"
            nzCollapsible
            nzWidth = "256px"
            nzBreakpoint = "md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <!-- افتراضيًا، انقر على الشعار للانتقال إلى الصفحة الرئيسية -->
      <a routerLink="/welcome">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>نغ-زورو</h1>
      </أ>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="إدارة المستخدم" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/user">قائمة المستخدمين</a>
          </لي>
        </ul>
      </لي>
    </ul>
  </nz-sider>
  <nz-تخطيط>
    <عنوان نيوزيلندي>
      <div class="app-header">
        <span class="header-trigger" (انقر)="isCollapsed = !isCollapsed">
            <أنا الطبقة = "الزناد"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
      </div>
    </nz-header>
    <محتوى نيوزيلندي>
      <div class="inner-content">
        <مخرج التوجيه></مخرج التوجيه>
      </div>
    </nz-content>
  </nz-تخطيط>
</nz-layout>

عرض القائمة، إذا أردنا إدارة الأذونات، فنحن بحاجة إلى تعاون الواجهة الخلفية في نقل القيمة، ثم نعرض قائمة الأذونات ذات الصلة على الصفحة

ونستبدلها بالهيكل الأساسي الذي تم الحصول عليه على النحو التالي:

أكمل قائمة المستخدمين.

بعد ذلك، أكمل الهيكل العظمي لقائمة المستخدمين، نظرًا لأننا نستخدم إطار عمل UI ، فمن السهل جدًا أن نكتب:

احصل على قائمة المستخدمين

// user.component.html.

<nz-table #basicTable [nzData]="list">
  <الرأس>
    <تر>
      <th>الاسم</th>
      <th>الموضع</th>
      <th>الإجراء</th>
    </tr>
  </الرأس>
  <الجسم>
    <!-- اجتياز البيانات التي تم الحصول عليها -->
    <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

استيراد { Component، OnInit } من '@angular/core'؛
استيراد {UserService} من "src/app/services/user.service"؛

@عنصر({
  المحدد: "مستخدم التطبيق"،
  templateUrl: './user.component.html'،
  styleUrls: ['./user.component.scss']
})
فئة التصدير UserComponent تنفذ OnInit {

  القائمة العامة: أي = []

  منشئ(
    خدمة المستخدم الخاصة للقراءة فقط: UserService
  ) { }

  ngOnInit (): باطل {
    إذا(localStorage.getItem('المستخدمين')) {
      Let obj = localStorage.getItem('المستخدمون') ||
      this.list = JSON.parse(obj)
    } آخر {
      هذه.getList()
    }
  }

  // احصل على قائمة المستخدمين getList() {
    this.userService.getUserList().subscribe({
      التالي: (البيانات: أي) => {
        localStorage.setItem('المستخدمين', JSON.stringify(data.users))
        this.list = data.users
      },
      خطأ: (خطأ: أي) => {
        console.log(خطأ)
      }
    })
  }

}

نظرًا لعدم تقديم أي خدمة خلفية، نستخدم هنا localstorage لتسجيل الحالة.

بعد استكمال ما سبق نحصل على معلومات القائمة كما يلي:

لإضافة مستخدمين وتعديلهم،

نقوم ببساطة بإنشاء نموذج يحتوي على حقلين فقط، وهما name position . تشترك هاتان الوظيفتان في نموذج ~

نضيفه بتنسيق html :

// user-info.component.html

<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzErrorTip="الرجاء إدخال اسم المستخدم!">
      <نوع الإدخال = "نص" nz-input formControlName = "اسم المستخدم" العنصر النائب = "الرجاء إدخال اسم المستخدم" style = "العرض: 160px؛ />".
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="الرجاء إدخال المركز!">
      <input type = "text" nz-input formControlName = "position" placeholder = "يرجى إدخال الموضع" style = "width: 160px؛"/>
    </nz-form-control>
  </nz-form-item>
  <button nz-button class="login-form-button سجل الدخول-فورم-هامش" [nzType]="'primary'">تأكيد</button>
</form>

تبدو الصفحة بهذا الشكل:

ثم هناك الحكم المنطقي للإضافة أو التعديل. إذا تم تمييز الاتصال بـ uuid ، فهذا يعني التحرير، show you the codes .

// معلومات المستخدم.component.ts

استيراد { Component، OnInit } من '@angular/core'؛
استيراد {FormBuilder، FormGroup، Validators } من '@angular/forms'؛
استيراد { ActivatedRoute, ParamMap } من '@angular/router'؛

@عنصر({
  المحدد: "معلومات مستخدم التطبيق"،
  templateUrl: './user-info.component.html'،
  styleUrls: ['./user-info.component.scss']
})
فئة التصدير UserInfoComponent تنفذ OnInit {

  public isAdd: boolean = true;
  معلومات المستخدم العامة: أي = []
  uuid العام: الرقم = 0؛

  validateForm!: FormGroup;

  منشئ(
    الفيسبوك الخاص: FormBuilder،
    طريق خاص: الطريق المنشط،
  ) { }

  ngOnInit (): باطل {
    this.userInfo = JSON.parse(localStorage.getItem('users') || '[]')
    this.route.paramMap.subscribe((params: ParamMap)=>{
      this.uuid = parseInt(params.get('uuid') || '0')
    })
    // إنها حالة التحرير، قم بتعيين المعرف if(this.uuid) {
      this.isAdd = false
    }
    
    إذا (هذا.isAdd) {
      this.validateForm = this.fb.group({
        اسم المستخدم: [فارغ، [Validators.required]]،
        الموضع: [فارغ، [Validators.required]]
      });
    } آخر {
      دع الحالي = (this.userInfo.filter((item: Any) => item.uuid === this.uuid))[0] ||
      // تعبئة المعلومات this.validateForm = this.fb.group({
        اسم المستخدم: [الاسم الحالي، [Validators.required]]،
        المنصب: [الموضع الحالي، [Validators.required]]
      })
    }
    
  }

  إرسال النموذج () {
    // إذا لم يتوافق مع الإرسال، فسيتم الإبلاغ عن خطأ if(!this.validateForm.valid) {
      Object.values(this.validateForm.controls).forEach((التحكم: أي) => {
        إذا (التحكم؟. غير صالح) {
          التحكم؟.markAsDirty();
          control?.updateValueAndValidity({ OnlySelf: true });
        }
      })
      يعود
    }

    // احصل على بيانات النموذج const data = this.validateForm.value
    // أضف مستخدمًا جديدًا إذا (this.isAdd) {
      
      Let lastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {});
      this.userInfo.push({
        uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1)،
        الاسم: data.username،
        الموقف: data.position
      })
      localStorage.setItem('المستخدمين', JSON.stringify(this.userInfo))
    } else { // تحرير المستخدم، تحديث المعلومات Let MapList = this.userInfo.map((item: Any) => {
        إذا (item.uuid === this.uuid) {
          يعود {
            uuid: هذا.uuid،
            الاسم: data.username،
            الموقف: 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') || '[]');
      Let filterList = users.filter((item: Any) => item.uuid !== data.uuid);
      localStorage.setItem('users', JSON.stringify(filterList));
      this.list = filterList
    }
  });
}

نقوم بالعثور على البيانات المحذوفة وإزالتها وإعادة تخزين بيانات المستخدم الجديدة مؤقتًا وتحديث بيانات قائمة مستخدمي table .

لقد أكملنا حتى الآن مشروعًا بسيطًا بنجاح. دعونا نلقي نظرة على الأمر ككل باستخدام Gif .

【زيادة】