За последние несколько дней статей мы многое узнали об angular . На этот раз мы представим небольшой продукт.
angualr сочетается с ng-zorro для быстрой и стандартизированной разработки серверной системы. [Рекомендация по соответствующему учебному пособию: «Учебное пособие по Angular»]
Системные функции включают в себя следующее:
всех служб, использование смоделированных данных.
Давай сделаем это.
К более популярным angular ui
в сочетании с ng-zorro
angular относятся: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} из '@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 в объявлениях,
НзМодалМодуль,
НзКнопкаМодуль,
НзФормМодуль,
РеактивныйФормМодуль,
НзИнпутМодуль
], простой и понятный принцип: мы не используем children для вложенной маршрутизации:
// app.routing.module.ts
импортировать { NgModule } из '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
импортировать { WelcomeComponent } из './pages/welcome/welcome.comComponent';
импортировать { UserComponent } из './pages/user/user.comComponent';
импортировать { UserInfoComponent } из './pages/user/user-info/user-info.comComponent';
//Связанные маршруты const маршруты: Routes = [
{
путь: '',
pathMatch: 'полный',
redirectTo: '/добро пожаловать'
},
{
путь: «добро пожаловать»,
компонент: Добро пожаловатьКомпонент
},
{
путь: 'пользователь',
компонент: ПользовательскийКомпонент
},
{
путь: 'пользователь/добавить',
компонент: UserInfoComponent
},
{
путь: 'пользователь/редактировать/:uuid',
компонент: UserInfoComponent
}
];
@NgModule({
импорт: [RouterModule.forRoot(
маршруты,
{
useHash: true, //Использовать режим хеширования preloadingStrategy: PreloadAllModules
}
)],
экспорт: [RouterModule]
})
экспортный класс AppRoutingModule { } Изменить меню
Меню, созданное с помощью scaffolding, не соответствует функциям, которые нам нужно разработать. Давайте его настроим.
// приложение.компонент.html
<nz-layout class="app-layout">
<nz-sider class="меню-боковая панель"
nzСкладной
nzWidth="256 пикселей"
nzBreakpoint="мд"
[(nzCollapsed)]="Свернуто"
[nzTrigger]="нуль">
<div class="sidebar-logo">
<!-- По умолчанию нажмите на логотип, чтобы перейти на главную страницу -->
<a routerLink="/добро пожаловать">
<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">
<ул>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Список пользователей</a>
</li>
</ul>
</li>
</ul>
</nz-сайд>
<nz-макет>
<nz-заголовок>
<div class="app-header">
<span class="header-trigger" (click)="isCollapsed = !isCollapsed">
<я класс="триггер"
nz-значок
[nzType]="isCollapsed ? 'меню-развернуть': 'меню-свернуть'"
></i>
</span>
</div>
</nz-header>
<nz-контент>
<div class="inner-content">
<роутер-выход></роутер-выход>
</div>
</nz-content>
</nz-макет>
</nz-layout> Отображение меню. Если нам нужно выполнить управление разрешениями, нам нужен бэкэнд, который будет сотрудничать с передачей значений. Затем мы отображаем соответствующее меню разрешений на странице
и заменяем его приведенным выше кодом. заключается в следующем:
Заполните список пользователей.
Затем заполните скелет списка пользователей. Поскольку мы используем инфраструктуру UI , нам очень удобно писать:
Получить список пользователей
// user.comComponent.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>
<тд>
<a style="color: #f00;">Удалить</a>
</td>
</tr>
</tbody>
</nz-table> Мы смоделировали некоторые данные в папке assets user.json :
{
"пользователи": [
{
"ууид": 1,
"name": "Джимми",
"position": "Фронтенд"
},
{
«ууид»: 2,
"имя": "Джим",
"position": "Бэкенд"
}
],
«окружающая среда»: «развитие»
} После написания сервиса мы вызываем его для получения данных пользователя:
//user.comComponent.ts
импортировать {Component, OnInit} из '@angular/core';
импортировать { UserService } из «src/app/services/user.service»;
@Компонент({
селектор: 'app-user',
templateUrl: './user.comComponent.html',
styleUrls: ['./user.comComponent.scss']
})
класс экспорта UserComponent реализует OnInit {
публичный список: любой = []
конструктор(
частный userService только для чтения: UserService
) { }
ngOnInit(): пустота {
если (localStorage.getItem('пользователи')) {
let obj = localStorage.getItem('users') ||
this.list = JSON.parse(obj)
} еще {
это.getList()
}
}
// Получаем список пользователей getList() {
this.userService.getUserList().subscribe({
следующий: (данные: любые) => {
localStorage.setItem('пользователи', JSON.stringify(data.users))
этот.список = данные.пользователи
},
ошибка: (ошибка: любая) => {
console.log(ошибка)
}
})
}
} Поскольку серверная служба не представлена, здесь мы используем localstorage для записи статуса.
После выполнения вышеизложенного мы получаем следующую информацию о списке:
Чтобы добавлять и редактировать пользователей,
мы просто создаем форму, которая содержит всего два поля, а именно name и position . Эти две функции имеют общую форму ~
мы добавляем ее в html :
// user-info.comComponent.html
<form 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-form-control>
</nz-form-item>
<nz-форма-элемент>
<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 login-form-margin" [nzType]="'primary'">Подтвердить</button>
</form> Страница выглядит следующим образом:
Затем возникает логическое решение: добавить или изменить. Если соединение отмечено uuid , это означает редактирование, show you the codes .
// пользователь-информация.компонент.ts
импортировать {Component, OnInit} из '@angular/core';
импортировать { FormBuilder, FormGroup, Валидаторы } из '@angular/forms';
импортировать {ActivatedRoute, ParamMap} из '@angular/router';
@Компонент({
селектор: 'app-user-info',
templateUrl: './user-info.comComponent.html',
styleUrls: ['./user-info.comComponent.scss']
})
класс экспорта UserInfoComponent реализует OnInit {
общественный isAdd: логическое значение = true;
общедоступная информация пользователя: любой = []
общедоступный UUID: число = 0;
проверить форму!: FormGroup;
конструктор(
частный Facebook: FormBuilder,
частный маршрут: ActivatedRoute,
) { }
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 = ложь
}
если (this.isAdd) {
this.validateForm = this.fb.group({
имя пользователя: [null, [Validators.required]],
позиция: [null, [Validators.required]]
});
} еще {
let current = (this.userInfo.filter((item: Any) => item.uuid === this.uuid))[0] ||
// Информационное заполнение this.validateForm = this.fb.group({
имя пользователя: [текущее.имя, [Валидаторы.требуются]],
позиция: [текущая.позиция, [Валидаторы.требуются]]
})
}
}
submitForm() {
// Если он не соответствует отправке, будет сообщено об ошибке if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((контроль: любой) => {
если (управление?.инвалид) {
контроль?.markAsDirty();
control?.updateValueAndValidity({ onlySelf: true });
}
})
возвращаться
}
// Получаем данные формы const data = this.validateForm.value
//Добавляем нового пользователя if(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.position
})
localStorage.setItem('users', JSON.stringify(this.userInfo))
} else { //Редактируем пользователя, обновляем информацию let mapList = this.userInfo.map((item: Any) => {
if(item.uuid === this.uuid) {
возвращаться {
uuid: this.uuid,
имя: данные.имя пользователя,
позиция: data.position
}
}
возврат товара
})
localStorage.setItem('пользователи', JSON.stringify(mapList))
}
}
} Сначала мы устанавливаем идентификатор isAdd , который по умолчанию соответствует новому пользователю; если uuid существует, устанавливаем для него false значение, указывающее, что он находится в состоянии редактирования, и заполняет форму содержимым. Операция отправки формы также оценивается по этому идентификатору. Мы напрямую изменяем информацию localStorage , чтобы обеспечить синхронизацию информации списка.
Для функции удаления
мы вводим модальное диалоговое окно с вопросом, следует ли удалять.
// пользователь.компонент.ц
// Удалить delete(data: Any) {
this.modal.confirm({
nzTitle: '<i>Хотите удалить этого пользователя?</i>',
nzOnOk: () => {
пусть пользователи = JSON.parse(localStorage.getItem('users') || '[]');
let filterList = user.filter((item: Any) => item.uuid !== data.uuid);
localStorage.setItem('users', JSON.stringify(filterList));
this.list = список фильтров
}
});
} 
Мы находим удаленные данные, удаляем их, повторно кэшируем новые пользовательские данные и обновляем данные списка пользователей table .
Итак, на данный момент мы успешно завершили простой проект. Давайте посмотрим на это в целом, используя Gif .
【над】