介绍
在本文中，我们将使用最新技术以一种简单易懂的方式从头开始开发一个 Web 应用程序。
后端 = Core Web API数据库 = SQL Server前端 = ANGULAR 12.
首先，我们将创建一个数据库、表并插入一些数据。
其次，我们使用 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 后创建一个新项目。
第 3 步 – 现在更改启动类
首先，安装这些，
Microsoft.AspNetCore.Mvc.NewtonsoftJsonSystem.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 项目。
首先，通过以下方式从 /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 studentng g c student/show-stung 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 './ponent';import {StudentComponent } from './student/ponent';import {ShowStuComponent } from './student/show-stu/show-ponent';import {AddEditStuComponent } from './student/add-edit-stu/add-edit-ponent';import {HttpClientModule } from "@angular/common/http";import {SharedService } from "./shared.service";import {FormsModule,ReactiveFormsModule } from "@angular/forms";import {DepartmentComponent } from './department/ponent';import {ShowDepComponent } from './department/show-dep/show-ponent';import {AddEditDepComponent } from './department/add-edit-dep/add-edit-ponent';@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/ponent";import {DepartmentComponent } from "./department/ponent";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="/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="/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script></body></html>
现在打开 ponent.html 并将其替换为以下代码，
<app-show-stu></app-show-stu>
现在，打开 show-ponent.ts 并将其替换为以下代码
import {Component, OnInit } from '@angular/core';import {SharedService } from "src/app/shared.service";@Component({selector: 'app-show-stu',templateUrl: './show-ponent.html',styleUrls: ['./show-ponent.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-ponent.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-ponent.ts 并将其替换为以下代码
import {Component, OnInit, Input } from '@angular/core';import {SharedService } from "src/app/shared.service";@Component({selector: 'app-add-edit-stu',templateUrl: './add-edit-ponent.html',styleUrls: ['./add-edit-ponent.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-ponent.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请点击链接。
