使用 Angular 12、ASP.NET Core Web API 和 SQL Server 开发 Web 应用程序
介绍
在本文中，我们将使用最新技术以一种简单易懂的方式从头开始开发一个 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 Cors
services.AddCors(c =>
{
c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
//Json Serializer
services.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 set
FullName = '" + 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，修改如下代码，
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
