Nos últimos dias de artigos, aprendemos muito sobre angular . Desta vez, apresentaremos um pequeno produto.
angualr é combinado com ng-zorro para desenvolver um sistema backend de forma rápida e padronizada. [Recomendação do tutorial relacionado: "Tutorial Angular"]
As funções do sistema incluem o seguinte:
todos os serviços usar dados simulados.
Vamos fazê-lo.
As angular ui mais populares
combinadas com o ng-zorro
angular incluem:Ant Design que aqueles que fazem desenvolvimento front-end. estão familiarizados com isso. Então aqui combinamos com a estrutura NG-ZORRO . Se você estiver familiarizado com a versão Vue ou React do Ant Design , acredito que você pode se conectar perfeitamente ~
Reutilizamos angular-cli para gerar um projeto ng-zorro .
Adicionar ng-zorro é muito simples: entre ng-zorro e execute ng add ng-zorro-antd .
Claro, você também pode executar
npm install ng-zorro-antdpara adicioná-lo, mas isso não é recomendado.
Após combinar ng-zorro , executamos o projeto npm run start , e você verá a seguinte imagem na página http://localhost:4200 .
Nada mal, mano.
Mudamoso roteamento de configuração
para roteamento hash e adicionamos o roteamento de usuário. Só precisamos fazer algumas pequenas modificações.
Idéia:
primeiro adicione a página de lista user da página, use table no ng-zorro
para adicionar e alterar a página do usuário para compartilhar a mesma página, form ng-zorro
função de exclusão de página do componente de formulário no ng-zorro para usar diretamente o prompt pop-up , use ng-zorro
introduz ng-zorro conforme necessário para
ajustar o arquivo de roteamento
De acordo com a ideia, temos que introduzi-lo em ng-zorro :
// app.module.ts.
importar {ReactiveFormsModule} de '@angular/forms';
importar { NzTableModule } de 'ng-zorro-antd/table';
importar { NzModalModule } de 'ng-zorro-antd/modal';
importar { NzButtonModule } de 'ng-zorro-antd/button';
importar { NzFormModule } de 'ng-zorro-antd/form';
importar { NzInputModule } de 'ng-zorro-antd/input';
// ...
imports: [ // Adicione-o nas importações em vez de declarar NzTableModule nas declarações,
Módulo NzModal,
Módulo NzButton,
NzFormModule,
Módulo Formulários Reativos,
Módulo NzInput
], princípio simples e fácil de entender, não usamos children para aninhar roteamento:
// app.routing.module.ts
importar { NgModule } de '@angular/core';
importar {Rotas, RouterModule, PreloadAllModules} de '@angular/router';
importar { WelcomeComponent } de './pages/welcome/welcome.component';
importar {UserComponent} de './pages/user/user.component';
importar {UserInfoComponent} de './pages/user/user-info/user-info.component';
//Rotas relacionadas const rotas: Rotas = [
{
caminho: '',
pathMatch: 'completo',
redirecionarPara: '/bem-vindo'
},
{
caminho: 'bem-vindo',
componente: WelcomeComponent
},
{
caminho: 'usuário',
componente: UserComponent
},
{
caminho: 'usuário/adicionar',
componente: UserInfoComponent
},
{
caminho: 'usuário/editar/:uuid',
componente: UserInfoComponent
}
];
@NgModule({
importações: [RouterModule.forRoot(
rotas,
{
useHash: true, //Usar pré-carregamento no modo hashStrategy: PreloadAllModules
}
)],
exportações: [RouterModule]
})
export class AppRoutingModule { } Alterar menu
O menu gerado usando scaffolding não corresponde às funções que precisamos desenvolver.
//app.component.html
<nz-layout class="app-layout">
<nz-sider class="barra lateral do menu"
nzCollapsível
nzWidth="256px"
nzBreakpoint="md"
[(nzCollapsed)]="isCollapsed"
[nzTrigger]="nulo">
<div class="logotipo da barra lateral">
<!-- Por padrão, clique no logotipo para ir para a página inicial -->
<a roteadorLink="/bem-vindo">
<img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
<h1>Ng-Zorro</h1>
</a>
</div>
<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
<li nz-submenu nzOpen nzTitle="Gerenciamento de usuários" nzIcon="painel">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Lista de usuários</a>
</li>
</ul>
</li>
</ul>
</nz-sider>
<nz-layout>
<nz-cabeçalho>
<div class="app-header">
<span class="header-trigger" (click)="isCollapsed = !isCollapsed">
<i class="gatilho"
ícone nz
[nzType]="isCollapsed? 'menu-unfold': 'menu-fold'"
</i>
</span>
</div>
</nz-header>
<nz-conteúdo>
<div class="inner-content">
<router-outlet></router-outlet>
</div>
</nz-content>
</nz-layout>
</nz-layout> Exibição do menu, se precisarmos fazer o gerenciamento de permissões, precisamos que o backend coopere com a transferência de valor. Em seguida, renderizamos o menu de permissão relevante para a página
e o substituímos pelo esqueleto básico obtido. é o seguinte:
Complete a lista de usuários.
Em seguida, complete o esqueleto da lista de usuários. Como usamos a estrutura UI , é extremamente conveniente escrever:
Obtenha a lista de usuários
// user.component.html.
<nz-table #basicTable [nzData]="lista">
<thead>
<tr>
<th>Nome</th>
<th>Posição</th>
<th>Ação</th>
</tr>
</thead>
<corpo>
<!-- Percorra os dados obtidos -->
<tr *ngFor="deixar dados de basicTable.data">
<td>{{data.name}}</td>
<td>{{data.position}}</td>
<td>
<a style="color: #f00;">Excluir</a>
</td>
</tr>
</tbody>
</nz-table> Simulamos alguns dados na pasta assets user.json :
{
"Usuários": [
{
"uuid": 1,
"nome": "Jimmy",
"posição": "Front-end"
},
{
"uuid": 2,
"nome": "Jim",
"posição": "Back-end"
}
],
"meio ambiente": "desenvolvimento"
} Depois de escrever o serviço, chamamos para obter os dados do usuário:
//user.component.ts
importar { Componente, OnInit } de '@angular/core';
importar {UserService} de 'src/app/services/user.service';
@Componente({
seletor: 'usuário do aplicativo',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
classe de exportação UserComponent implementa OnInit {
lista pública: qualquer = []
construtor(
userService somente leitura privado: UserService
) { }
ngOnInit(): void {
if(localStorage.getItem('usuários')) {
deixe obj = localStorage.getItem('usuários') ||
esta.lista = JSON.parse(obj)
} outro {
this.getList()
}
}
// Obtém a lista de usuários getList() {
this.userService.getUserList().subscribe({
próximo: (dados: qualquer) => {
localStorage.setItem('usuários', JSON.stringify(data.usuários))
esta.lista=dados.usuários
},
erro: (erro: qualquer) => {
console.log(erro)
}
})
}
} Como nenhum serviço de back-end é introduzido, aqui usamos localstorage para registrar o status.
Depois de completar o acima, obtemos as informações da lista da seguinte forma:
Para adicionar usuários e editar usuários,
simplesmente criamos um formulário, que contém apenas dois campos, nomeadamente name e position . Essas duas funções compartilham um formulário ~
nós o adicionamos em html :
//user-info.component.html
<formulário nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Por favor, digite o nome de usuário!">
<input type="text" nz-input formControlName="nome de usuário" placeholder="Digite o nome de usuário" style="largura: 160px;"
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Por favor, insira uma posição!">
<input type="text" nz-input formControlName="position" placeholder="Por favor, insira a posição" style="width: 160px;"/>
</nz-form-control>
</nz-form-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Confirmar</button>
</form> A página fica assim:
Depois, há o julgamento lógico para adicionar ou modificar. Se a conexão estiver marcada com uuid , significa editar, show you the codes .
//user-info.component.ts
importar { Componente, OnInit } de '@angular/core';
importar {FormBuilder, FormGroup, Validators} de '@angular/forms';
importar { ActivatedRoute, ParamMap } de '@angular/router';
@Componente({
seletor: 'app-user-info',
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss']
})
classe de exportação UserInfoComponent implementa OnInit {
public isAdd: booleano = verdadeiro;
informações públicas do usuário: qualquer = []
uuid público: número = 0;
validarForm!: FormGroup;
construtor(
Facebook privado: FormBuilder,
rota privada: ActivatedRoute,
) { }
ngOnInit(): void {
this.userInfo = JSON.parse(localStorage.getItem('usuários') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// É o estado de edição, defina o identificador if(this.uuid) {
this.isAdd = falso
}
if(this.isAdd) {
this.validateForm = this.fb.group({
nome de usuário: [nulo, [Validators.required]],
posição: [nulo, [Validators.required]]
});
} outro {
deixe atual = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] ||
// Preenchimento de informações this.validateForm = this.fb.group({
nome de usuário: [nome atual, [Validadores.required]],
posição: [posição.atual, [Validadores.requerido]]
})
}
}
enviarFormulário() {
// Caso não esteja de acordo com o envio, será reportado um erro if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: any) => {
if(controle?.inválido) {
control?.markAsDirty();
control?.updateValueAndValidity({ onlySelf: true });
}
})
retornar
}
// Obtém os dados do formulário const data = this.validateForm.value
//Adicionar novo usuário if(this.isAdd) {
deixe lastOne = (this.userInfo.length > 0? this.userInfo[this.userInfo.length-1]: {});
this.userInfo.push({
uuid: (lastOne.uuid? (lastOne.uuid + 1): 1),
nome: dados.nomedeusuário,
posição: dados.posição
})
localStorage.setItem('usuários', JSON.stringify(this.userInfo))
} else { //Editar usuário, atualizar informações let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
retornar {
uuid: este.uuid,
nome: dados.nomedeusuário,
posição: dados.posição
}
}
item de devolução
})
localStorage.setItem('usuários', JSON.stringify(mapList))
}
}
} Primeiro definimos um identificador isAdd , cujo padrão é um novo usuário quando uuid existe, definimos-o com um valor false , indicando que ele está em um estado de edição e preenchemos o formulário com o conteúdo. A operação de envio de um formulário também é julgada de acordo com este identificador. Alteramos diretamente as informações localStorage para garantir a sincronização das informações da lista.
Para a função de exclusão,
introduzimos uma caixa de diálogo modal para perguntar se deseja excluir.
//usuário.component.ts
// Excluir delete(dados: qualquer) {
this.modal.confirm({
nzTitle: '<i>Deseja excluir este usuário?</i>',
nzOnOk: () => {
deixe usuários = JSON.parse(localStorage.getItem('users') || '[]');
deixe filterList = users.filter((item: any) => item.uuid !== data.uuid);
localStorage.setItem('usuários', JSON.stringify(filterList));
this.list=filtroLista
}
});
} 
Encontramos os dados excluídos, os removemos, armazenamos novamente em cache os novos dados do usuário e atualizamos table .
Até agora, concluímos com sucesso um projeto simples. Vamos dar uma olhada nisso como um todo usando Gif .
【sobre】