Estoy comenzando con Angular y hago un ejercicio básico, en el cual se valide que el usuario que ingresan en un login este en la base de datos, si es correcto que pase a una pagina de menú, sino que mande un mensaje de error, tengo el siguiente método que consulta a una base de datos en mysql
@CrossOrigin(origins= "http://localhost:4200")
@RestController
public class LoginController {
@Autowired
private LoginService loginService;
@GetMapping(value = { "/listaUsuario/{usuario}" })
public List<Login> buscaUsuario(@PathVariable("usuario") String usuario) {
return loginService.consultaUsuario(usuario);
}
}
y tengo mi formulario en Angular, app.comoponent.html
<app-header></app-header>
<div class="wrapper fadeInDown">
<div id="formContent">
<form>
<h2>Login</h2>
<input type="text" id="usuario" class="form-control" name="usuario" placeholder="Usuario">
<br>
<input type="text" id="password" class="form-control" name="password" placeholder="Password">
<br>
<button (click)="Enviar()" class="btn btn-primary">Acceder</button>
</form>
</div>
</div>
en el app.component.ts hice el método Enviar() el cual debe redireccionarte a la pagina menú
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'proyecto-vuelos';
constructor(private router:Router){}
Enviar(){
this.router.navigate(["menu"])
}
}
y en el app.module.ts importe el componente Menu
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { LoginComponent } from './Login/login/login.component';
import { MenuComponent } from './Menu/menu/menu.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
LoginComponent,
MenuComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
y en el app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MenuComponent } from './Menu/menu/menu.component';
const routes: Routes = [{path: 'menu', component: MenuComponent}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
pero no se como conectar con mi método back para realizar la validación, que desde mi formulario se envié el usuario y llegue a mi método back para que consulte en la base de datos si existe o no, como se realiza eso?