介绍

在本文中，我们将使用最新技术以一种简单易懂的方式从头开始开发一个 Web 应用程序。

• 后端 = ASP.NET Core Web API
• 数据库 = SQL Server
• 前端 = ANGULAR 12.

首先，我们将创建一个数据库、表并插入一些数据。

其次，我们使用ASP.NET Core Web API开发 API。

第三，我们使用 angular 12 开发前端。

步骤 1 -（数据库相关活动）

打开 SQL Server Management Studio 并连接到本地数据库后，创建一个名为 StudentDB 的数据库。

CREATE DATABASE StudentDB;
CREATE TABLE dbo.Student (StudentId int IDENTITY(1,1) NOT NULL,FullName nvarchar(max) NULL,Class nvarchar(max) NULL
);INSERT INTO dbo.Student VALUES ('Litan Sarker', 'Nine');
INSERT INTO dbo.Student VALUES ('Rohit Sarker','Six');

第 2 步 -（Web API 相关活动）

现在，在打开 Visual Studio 2019 后创建一个新项目。




第 3 步 – 现在更改启动类

首先，安装这些，

• Microsoft.AspNetCore.Mvc.NewtonsoftJson
• System.Data.SqlClient

来自管理用于 JSON 序列化和数据库的 Nuget 包。

我们启用 CORS 以禁用安全性并允许来自其他域的请求。安装 NewtonSoft.json 后，我们默认使用 JSON 序列化程序。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Newtonsoft.Json.Serialization;namespace WebAPI
{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){//Enable Corsservices.AddCors(c =>{c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());});//Json Serializerservices.AddControllersWithViews().AddNewtonsoftJson(options =>options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore).AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver= new DefaultContractResolver());services.AddControllers();}// 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.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}app.UseRouting();app.UseAuthorization();app.UseEndpoints(endpoints =>{endpoints.MapControllers();});}}
}

第四步

现在，创建一个名为 Models 的文件夹并添加两个名为 Student.cs、department.cs 的类文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;namespace WebAPI.Models
{public class Student{public int StudentId { get; set; }public string FullName { get; set; }public string Class { get; set; }}
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;namespace WebAPI.Models
{public class Department{public int DepartmentId { get; set; }public string DepartmentName { get; set; }}
}

现在，打开 appsettings.json 文件并将其替换为以下内容，

{"ConnectionStrings": {"StudentAppCon": "Data Source=.; Initial Catalog=StudentDB; Integrated Security=true"},"Logging": {"LogLevel": {"Default": "Information","Microsoft": "Warning","Microsoft.Hosting.Lifetime": "Information"}},"AllowedHosts": "*"
}

第 6 步

现在，添加 StudentController。

现在，在 StudentController 中进行以下更改，在这里我们实现依赖注入并使用原始 SQL 查询执行 CRUD 操作。

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;
using WebAPI.Models;namespace WebAPI.Controllers
{[Route("api/[controller]")][ApiController]public class StudentController : ControllerBase{private readonly IConfiguration _configuration;public StudentController(IConfiguration configuration){_configuration = configuration;}[HttpGet]public JsonResult Get(){string query = @"Select StudentId, FullName, Class from dbo.Student";DataTable table = new DataTable();string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");SqlDataReader myReader;using(SqlConnection myCon = new SqlConnection(sqlDataSource)){myCon.Open();using (SqlCommand myCommand = new SqlCommand(query, myCon)){myReader = myCommand.ExecuteReader();table.Load(myReader);myReader.Close();myCon.Close();}}return new JsonResult(table);}[HttpPost]public JsonResult Post(Student objStudent){string query = @"Insert into dbo.Student values('" + objStudent.FullName + "','" + objStudent.Class + "')";DataTable table = new DataTable();string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");SqlDataReader myReader;using (SqlConnection myCon = new SqlConnection(sqlDataSource)){myCon.Open();using (SqlCommand myCommand = new SqlCommand(query, myCon)){myReader = myCommand.ExecuteReader();table.Load(myReader);myReader.Close();myCon.Close();}}return new JsonResult("Added Successfully");}[HttpPut]public JsonResult Put(Student objStudent){string query = @"Update dbo.Student setFullName = '" + objStudent.FullName + @"',Class='" + objStudent.Class + "' where StudentId = " + objStudent.StudentId;DataTable table = new DataTable();string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");SqlDataReader myReader;using (SqlConnection myCon = new SqlConnection(sqlDataSource)){myCon.Open();using (SqlCommand myCommand = new SqlCommand(query, myCon)){myReader = myCommand.ExecuteReader();table.Load(myReader);myReader.Close();myCon.Close();}}return new JsonResult("Updated Successfully");}[HttpDelete("{id}")]public JsonResult Delete(int id){string query = @"Delete from dbo.Student where StudentId = " + id;DataTable table = new DataTable();string sqlDataSource = _configuration.GetConnectionString("StudentAppCon");SqlDataReader myReader;using (SqlConnection myCon = new SqlConnection(sqlDataSource)){myCon.Open();using (SqlCommand myCommand = new SqlCommand(query, myCon)){myReader = myCommand.ExecuteReader();table.Load(myReader);myReader.Close();myCon.Close();}}return new JsonResult("Deleted Successfully");}}
}

步骤 7 – Angular（前端）相关活动

现在，让我们创建一个 Angular 项目。

首先，通过以下方式从 https://nodejs.org/en/download/ 和 angular CLI 安装 Node.js，

npm install -g @angular/cli

现在在特定文件夹中，打开命令提示符并通过以下方式创建一个 angular 项目，

ng new angular12

? Would you like to add Angular routing? (y/N) y

CSS

需要几分钟才能完成。

现在，通过以下命令创建组件，

• ng g c student
• ng g c student/show-stu
• ng g c student/add-edit-stu

然后，打开app.module.ts，修改如下代码，

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentComponent } from './student/student.component';
import { ShowStuComponent } from './student/show-stu/show-stu.component';
import { AddEditStuComponent } from './student/add-edit-stu/add-edit-stu.component';import { HttpClientModule } from "@angular/common/http";
import { SharedService } from "./shared.service";
import { FormsModule,ReactiveFormsModule } from "@angular/forms";
import { DepartmentComponent } from './department/department.component';
import { ShowDepComponent } from './department/show-dep/show-dep.component';
import { AddEditDepComponent } from './department/add-edit-dep/add-edit-dep.component';@NgModule({declarations: [AppComponent,StudentComponent,ShowStuComponent,AddEditStuComponent,DepartmentComponent,ShowDepComponent,AddEditDepComponent],imports: [BrowserModule,AppRoutingModule,HttpClientModule,FormsModule,ReactiveFormsModule],providers: [SharedService],bootstrap: [AppComponent]
})
export class AppModule { }

现在，让我们创建一个共享服务。

ng g s shared

导入 HttpCient 和 observables 模块。Observables 用于处理异步请求和响应。

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";@Injectable({providedIn: 'root'
})
export class SharedService {readonly APIUrl = "http://localhost:5000/api";constructor(private http: HttpClient) {}getStudentList(): Observable < any[] > {return this.http.get < any > (this.APIUrl + '/Student');}addStudent(val: any) {return this.http.post(this.APIUrl + '/Student', val);}updateStudent(val: any) {return this.http.put(this.APIUrl + '/Student', val);}deleteStudent(id: any) {return this.http.delete(this.APIUrl + '/Student/' + id);}getDepartmentList(): Observable < any[] > {return this.http.get < any > (this.APIUrl + '/Department');}addDepartment(val: any) {return this.http.post(this.APIUrl + '/Department', val);}updateDepartment(val: any) {return this.http.put(this.APIUrl + '/Department', val);}deleteDepartment(id: any) {return this.http.delete(this.APIUrl + '/Department/' + id);}
}

步骤 9

现在，在 app.routing.ts 文件中进行以下更改。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StudentComponent } from "./student/student.component";
import { DepartmentComponent } from "./department/department.component";const routes: Routes = [{path:'student', component:StudentComponent},{path:'department', component:DepartmentComponent}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

第 10 步

为设计添加引导程序文件。

打开 index.html 并使用 BootStrap 安装更改它。

<!doctype html>
<html lang="en">
<head><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"><meta charset="utf-8"><title>Angular12</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

现在打开 student.component.html 并将其替换为以下代码，

<app-show-stu></app-show-stu>

现在，打开 show-stu.component.ts 并将其替换为以下代码

import { Component, OnInit } from '@angular/core';
import { SharedService } from "src/app/shared.service";@Component({selector: 'app-show-stu',templateUrl: './show-stu.component.html',styleUrls: ['./show-stu.component.css']
})
export class ShowStuComponent implements OnInit {studentList:any = [];modalTitle:any;activateAddEditStuCom:boolean = false;student:any;constructor(private sharedService: SharedService) { }ngOnInit(): void {this.refreshStudentList();}refreshStudentList() {this.sharedService.getStudentList().subscribe(data =>{this.studentList = data;});}AddStudent(){this.student={StudentId:0,FullName:"",Class:""}this.modalTitle = "Add Student";this.activateAddEditStuCom = true;}EditStudent(item: any){this.student = item;this.activateAddEditStuCom = true;this.modalTitle = "Update Student";}deleteClick(item: any){if(confirm('Are you sure??')){this.sharedService.deleteStudent(item.StudentId).subscribe(data =>{alert(data.toString());this.refreshStudentList();})}}closeClick(){this.activateAddEditStuCom=false;this.refreshStudentList();}
}

现在，打开 show-stu.component.html 并将其替换为以下代码

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="AddStudent()" data-keyborad="false">Add Student
</button><!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">{{modalTitle}}</h5><button type="button" class="btn-close" (click)="closeClick()" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><app-add-edit-stu [student]="student" *ngIf="activateAddEditStuCom"></app-add-edit-stu></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div><table class="table table-striped"><thead><tr><th>Student ID</th><th>Full Name</th><th>Class</th><th>Options</th></tr></thead><tbody><tr *ngFor="let dataItem of studentList"><td>{{dataItem.StudentId}}</td><td>{{dataItem.FullName}}</td><td>{{dataItem.Class}}</td><td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"(click)="EditStudent(dataItem)">Edit</button><button type="button" class="btn btn-primary" (click)="deleteClick(dataItem)">Delete</button></td></tr></tbody></table>

现在，打开 add-edit-stu.component.ts 并将其替换为以下代码

import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from "src/app/shared.service";@Component({selector: 'app-add-edit-stu',templateUrl: './add-edit-stu.component.html',styleUrls: ['./add-edit-stu.component.css']
})
export class AddEditStuComponent implements OnInit {@Input() student:any;StudentId:string = "";FullName: string ="";Class: string ="";constructor(private service: SharedService) { }ngOnInit(): void {this.StudentId = this.student.StudentId;this.FullName = this.student.FullName;this.Class = this.student.Class;}addStudent(){var val = {StudentId:this.StudentId,FullName:this.FullName,Class:this.Class};this.service.addStudent(val).subscribe(res =>{alert(res.toString());})}updateStudent(){var val = {StudentId:this.StudentId,FullName:this.FullName,Class:this.Class};this.service.updateStudent(val).subscribe(res =>{alert(res.toString());})}
}

现在，打开 add-edit-stu.component.html 并将其替换为以下代码

<div class="form-group row"><label class="col-sm-2">Student FullName</label><div class="col-sm-10"><input type="text" class="form-control" [(ngModel)]="FullName"placeholder="Enter Full Name"></div>
</div><div class="form-group row"><label class="col-sm-2">Class</label><div class="col-sm-10"><input type="text" class="form-control" [(ngModel)]="Class"placeholder="Enter Class"></div>
</div><button (click)="addStudent()" *ngIf="student.StudentId==0" class="btn btn-primary">Add
</button><button (click)="updateStudent()" *ngIf="student.StudentId!=0" class="btn btn-primary">Update
</button>

结论

在本文中，我们逐步讨论了如何使用 .Net core angular 12 和 SQL Server 构建应用程序。希望通过阅读和学习，您将从本文中受益，想要了解更多.Net Core请点击链接。