c# - 如何将我的 Angular 10 应用程序与 C#（包含 PostgreSQL 连接）连接？

问题描述

我在 C# 类中创建了一个 Angular 10 登录应用程序和一个 postgreSQL 连接。我创建的项目是一个 ASP.NET Core Web 应用程序。我的 Angular 项目与 C# 项目在同一个项目中，如下所示：

这是我连接到 PostgreSQL 数据库的 Model.cs 文件：

using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;

namespace Model
{
    public class UserContext : DbContext
    { 
        public DbSet<Employee> Employees { get; set; }
        public DbSet<Admin> Admins { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseNpgsql("UserID=postgres;Password=niyu;Host=localhost;Port=5432;Database=UserDB;Pooling=true;");
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder){
            modelBuilder.Entity<Employee>()
                .HasKey(t => t.UserID);
            modelBuilder.Entity<Admin>()
                .HasKey(t => t.UserID);

        }
        public class Employee
        {
            public string UserID { get; set; }
            public string Password { get; set; }
        }

        public class Admin
        {
            public string UserID { get; set; }
            public string Password { get; set; }
        }
    }
}

到目前为止，我有 2 个模拟用户（一个普通用户和一个管理员）可以登录到我的应用程序。我的登录数据：

export class SignInData {
    private userID: string;
    private password: string;

    constructor(userID: string, password: string){
        this.userID = userID;
        this.password = password;
    }

    getUserID(): string
    {
        return this.userID;
    }

    getPassword(): string
    {
        return this.password;
    }
}

我的登录认证服务：

import { Injectable } from '@angular/core';
import { SignInData } from 'src/SignInData';

@Injectable({
    providedIn: 'root'
})
export class LoginauthenticationService {

    private readonly mockedUser = new SignInData('user1', '123');
    private readonly mockedAdmin = new SignInData('admin1', '456');
    isAuthenticated = false;

    constructor() { }

    Authenticate(SignInData: SignInData, selectedRole: string): boolean {
        if (this.CheckLoginDetails(SignInData, selectedRole)) {
            this.isAuthenticated = true;
            return true;
        }
        this.isAuthenticated = false;
        return false;
    }

    private CheckLoginDetails(SignInData: SignInData, selectedRole: string): boolean {
        return this.CheckUserID(SignInData.getUserID(), selectedRole) && this.CheckPassword(SignInData.getPassword(), selectedRole);
    }

    private CheckUserID(userID: string, selectedRole: string): boolean {
        if (selectedRole === 'User') {
          return userID === this.mockedUser.getUserID();
        }
        else{
          return userID === this.mockedAdmin.getUserID();
        }
    }

    private CheckPassword(password: string, selectedRole: string): boolean {
        if (selectedRole === 'User') {
          return password === this.mockedUser.getPassword();
        }
        else{
          return password === this.mockedUser.getUserID();
        }

    }
}

最后是我的登录组件：

import { Component, ElementRef, Input, OnInit, ViewChild, NgModule } from '@angular/core';
import {NgForm} from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import {MatRadioModule} from '@angular/material/radio';
import { stringify } from 'querystring';
import {BrowserModule} from '@angular/platform-browser';
import { LoginauthenticationService } from "../loginauthentication.service";
import { SignInData } from 'src/SignInData';
import { UserpageComponent } from '../userpage/userpage.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  constructor(private router: Router, private loginAuthenticationService: LoginauthenticationService)  { }

  ngOnInit(): void {
  }

  alertmessage = false;
  selectedRole='User';

  userID = '';
  password = '';
  
  RoleSelection(role){
    this.selectedRole = role;
}
  Login(){

    const logindata = new SignInData(this.userID, this.password)
    if(this.selectedRole === 'User' && this.loginAuthenticationService.Authenticate(logindata, this.selectedRole)){
      this.router.navigate(['/userpage'])
      
    }
    else if (this.selectedRole === 'Admin' && this.loginAuthenticationService.Authenticate(logindata, this.selectedRole)){
      this.router.navigate(['/adminpage'])
    }
    else{
      this.alertmessage = true;
    }
  }

  GoToRegistration()
    {
      this.router.navigate(['/registration'])
    }
}

现在我希望能够连接到 PostgreSQL 数据库并从那里检索用户 ID 和密码，而不是从我的模拟用户（如我的登录身份验证服务中看到的）。我从未将数据库连接到 Angular，现在我分别拥有前端（角度）和后端（C#），我想知道如何连接这两者。

标签： c#angularpostgresqlasp.net-core

c# - 如何将我的 Angular 10 应用程序与 C#（包含 PostgreSQL 连接）连接？

问题描述

解决方案

推荐阅读