1. 创建表格

在数据库中创建名为“users”的表，并添加以下列：

2. 创建Angular和Spring应用程序

创建一个名为“myApp”的Angular应用程序。

创建一个名为“backend”的Spring应用程序。

3. 创建后端端点

在Spring应用程序中创建注册端点：

@PostMapping("/register")
public String register(@RequestBody User user) {
    userService.save(user);
    return "Registered successfully";
}

在Spring应用程序中创建登录端点：

@PostMapping("/login")
public boolean login(@RequestBody User user) {
    return userService.findUserByUsernameAndPassword(user.getUsername(), user.getPassword()) != null;
}

4. 创建服务

在Angular中创建注册服务：

@Injectable({
    providedIn: 'root'
})
export class RegisterService {
    constructor(private httpClient: HttpClient) {}

    register(user: User): Observable {
        return this.httpClient.post(`${environment.apiUrl}/register`, user);
    }
}

在Angular中创建登录服务：

@Injectable({
    providedIn: 'root'
})
export class LoginService {
    constructor(private httpClient: HttpClient) {}

    login(user: User): Observable {
        return this.httpClient.post(`${environment.apiUrl}/login`, user);
    }
}

5. 创建组件

在Angular中创建注册组件：

@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
    constructor(private registerService: RegisterService) {}

    ngOnInit(): void {}

    register(form: NgForm): void {
        const user: User = form.value;
        this.registerService.register(user).subscribe({
            next: (response) => {
                console.log(response);
            },
            error: (error) => {
                console.log(error);
            }
        });
    }
}

在Angular中创建登录组件：

@Component({
    selector: 'app-login',
    templateUrl: './