使用 Angular、.Net 5.0 Web API 和 Microsoft SQL Server 构建待办事项列表应用程序

<form novalidate #registerForm="ngForm" (submit)="register(registerForm)" autocomplete="off">
    <div class="form-group">
        <label>USERNAME</label>
        <input
            class="form-control form-control-lg"
            placeholder="Username"
            name="username"
            #username="ngModel"
            [(ngModel)]="service.registerData.username"
            required
            [class.invalid]="username.invalid && username.touched"
        >
        <div *ngIf="username.touched">
            <p *ngIf="username.errors?.required">Username is required!</p>
        </div>
    </div>
    <div class="form-group">
        <label>EMAIL</label>
        <input
            class="form-control form-control-lg"
            placeholder="Example@sakhile.com"
            name="email"
            #email="ngModel"
            [(ngModel)]="service.registerData.email"
            required
            pattern="^[\w!#$%&'*+\-/=?\^_`{|}~]+(\.[\w!#$%&'*+\-/=?\^_`{|}~]+)*@((([\-\w]+\.)+[a-zA-Z]{2,4})|(([0-9]{1,3}\.){3}[0-9]{1,3}))$"
            [class.invalid]="email.invalid && email.touched"
        >
        <div *ngIf="email.touched">
            <p *ngIf="email.errors?.required">Email is required!</p>
            <p *ngIf="email.errors?.pattern">You have entered an invalid email address!!!</p>
        </div>
    </div>
    <div class="form-group">
        <label>PASSWORD</label>
        <input
            type="password"
            class="form-control form-control-lg"
            placeholder="Password"
            name="password"
            #password="ngModel"
            [(ngModel)]="service.registerData.password"
            required
            pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
            [class.invalid]="password.invalid && password.touched"
        >
        <div *ngIf="password.touched">
            <p *ngIf="password.errors?.required">Password is required!</p>
            <p *ngIf="password.errors?.pattern">
                Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character
            </p>
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-info btn-lg btn-block" type="submit" [disabled]="registerForm.invalid">SUBMIT</button>
    </div>
    <div class="form-group">
        <a [routerLink]="['/login']" routerLinkActive="active"><button class="btn btn-info btn-lg btn-block" type="submit">Login</button></a>
    </div>
    <div class="form-group">
        <a [routerLink]="['']" routerLinkActive="active"><button class="btn btn-info btn-lg btn-block" type="submit">Home</button></a>
    </div>
</form>

todo-item-form.component.ts

该文件有一个创建新待办事项的方法和一个更新现有待办事项的方法。

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { TodoItem } from 'src/app/models/todo-item.model';
import { TodoAppService } from 'src/app/services/todo-app.service';

@Component({
  selector: 'app-todo-item-form',
  templateUrl: './todo-item-form.component.html',
  styles: [
  ]
})
export class TodoItemFormComponent implements OnInit {

  constructor(public service: TodoAppService,
    private toastr: ToastrService) { }

  ngOnInit(): void {

  }

  onSubmit(form: NgForm) {
    console.log(this.service.todoData);
    if (this.service.todoData.itemId == 0) {
      console.log("Hello");
      this.insertRecord(form);
    } else {
      this.updateRecord(form);
    }

  }

  insertRecord(form: NgForm) {
    this.service.postToDoItem().subscribe(
      res => {
        this.resetForm(form);
        this.service.refreshList();
        this.toastr.success("Submitted successfully", "ToDo Item Register");
      },
      err => { console.log(err); }
    );
  }



  updateRecord(form: NgForm) {
    this.service.putToDoItem().subscribe(
      res => {
        this.resetForm(form);
        this.service.refreshList();
        this.toastr.info("Updated successfully", "ToDo Item Register");
      },
      err => { console.log(err); }
    );
  }

  resetForm(form: NgForm) {
    form.form.reset();
    this.service.todoData = new TodoItem();
  }

}

todo-item-form.component.html

该文件具有用于创建待办事项和更新待办事项的表单。项目状态以复选框的形式实现，如果选中该复选框，则完成一个待办事项。

<form novalidate #form="ngForm" (submit)="onSubmit(form)" autocomplete="off">
    <input
        type="hidden"
        name="itemId"
        [value] = "service.todoData.itemId"
    >
    <div class="form-group">
        <label>ITEM NAME</label>
        <input
            class="form-control form-control-lg"
            placeholder="Item Name"
            name="itemName"
            #itemName="ngModel"
            [(ngModel)]="service.todoData.itemName"
            required
            maxlength="50"
            [class.invalid]="itemName.invalid && itemName.touched"
        >
        <div *ngIf="itemName.touched">
            <p *ngIf="itemName.errors?.required">Item name is required!</p>
        </div>
    </div>
    <div class="form-group">
        <label>ITEM DESCRIPTION</label>
        <input
            class="form-control form-control-lg"
            placeholder="Item Description"
            name="itemDescription"
            #itemDescription="ngModel"
            [(ngModel)]="service.todoData.itemDescription"
            required
            maxlength="150"
            [class.invalid]="itemDescription.invalid && itemDescription.touched"
        >
        <div *ngIf="itemDescription.touched">
            <p *ngIf="itemDescription.errors?.required">Item description is required!</p>
        </div>
    </div>
    <div class="form-group">
        <label>ITEM STATUS</label>
        <input
            class="form-control form-control-lg"
            type="checkbox"
            name="itemStatus"
            #itemStatus="ngModel"
            [(ngModel)]="service.todoData.itemStatus"
            [ngModelOptions]="{standalone: true}"
            required
        >
    </div>

    <div class="form-group">
        <button class="btn btn-info btn-lg btn-block" type="submit" [disabled]="form.invalid">SUBMIT</button>
    </div>
</form>

todo-items.component.ts

这个文件有一个显示所有待办事项的方法 populateForm() 和一个删除待办事项的方法。

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { TodoItem } from '../models/todo-item.model';
import { TodoAppService } from '../services/todo-app.service';

@Component({
  selector: 'app-todo-items',
  templateUrl: './todo-items.component.html',
  styles: [
  ]
})
export class TodoItemsComponent implements OnInit {

  constructor(public service: TodoAppService,
    private toastr: ToastrService) { }

  ngOnInit(): void {
    this.service.refreshList();
  }

  populateForm(selectedRecord: TodoItem) {
    this.service.todoData = Object.assign({}, selectedRecord);
  }

  onDelete(id: number) {
    if (confirm("Are you sure you want to delete this record?")) {
      this.service.deleteToDoItem(id)
      .subscribe( res => {
        this.service.refreshList();
        this.toastr.error("Deleted susseccfully", "ToDo Item Register");
      },
      err => {
        console.log(err);
      })
    }
  }

}

<div class="jumbotron py-3">
    <h1 class="display-4 text-center">ToDo Item Register</h1>
</div>

<div class="row">
    <div class="col-md-6">
        <app-todo-item-form></app-todo-item-form>
    </div>
    <div class="col-md-6">
        <table class="table">
            <thead class="table-light">
                <tr>
                    <th>Item Name</th>
                    <th>Item Description</th>
                    <th>Item Status</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let pd of service.list">
                    <td (click)="populateForm(pd)">{{ pd.itemName }}</td>
                    <td (click)="populateForm(pd)">{{ pd.itemDescription }}</td>
                    <td (click)="populateForm(pd)">{{ pd.itemStatus }}</td>
                    <td>
                        <i class="fa fa-trash-o fa-lg text-danger" (click)="onDelete(pd.itemId)"></i>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.IdentityModel.Tokens;
using Microsoft.OpenApi.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using ToDoAPI.Authentication;
using ToDoAPI.Models;

namespace ToDoAPI
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {

            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "ToDoAPI", Version = "v1" });
            });

            services.AddDbContext<ApplicationDbContext>(options =>
           options.UseSqlServer(Configuration.GetConnectionString("SQLConnection")));

            services.AddIdentity<ApplicationUser, IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>()
                .AddDefaultTokenProviders();

            services.AddAuthentication(options =>
            {
                options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
                options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
            })
            .AddJwtBearer(options =>
            {
                options.SaveToken = true;
                options.RequireHttpsMetadata = false;
                options.TokenValidationParameters = new TokenValidationParameters()
                {
                    ValidateIssuer = true,
                    ValidateAudience = true,
                    ValidAudience = Configuration["JWT:ValidAudience"],
                    ValidIssuer = Configuration["JWT:ValidIssuer"],
                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JWT:Secret"]))
                };
            });

            services.AddCors();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseCors(options =>
            options.WithOrigins("http://localhost:4200")
            .AllowAnyMethod()
            .AllowAnyHeader());
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "ToDoAPI v1"));
            }

            app.UseAuthentication();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}