WebAPI 实现前后端分离的示例

WebAPI 实现前后端分离的示例攻略

随着前端技术的不断发展，越来越多的 Web 应用开始使用前后端分离的架构。这种架构可以提高开发效率、组件复用率、降低系统的耦合度等。而 WebAPI 则是前后端分离架构中的重要组成部分。下面我们将详细讲解 WebAPI 实现前后端分离的示例攻略。

步骤1：创建WebAPI项目
首先我们需要创建一个 WebAPI 项目，用于提供前后端分离架构下的后端服务，这里以使用 ASP.NET Core WebAPI 为例：

1. 打开 Visual Studio，点击 "创建新项目" 选项，然后在新建项目面板中选择 ".NET Core" | "ASP.NET Core Web API" 选项，填写项目名称等信息，按提示创建项目，并将项目保存到本地。

2. 创建成功后，我们可以看到项目中默认生成了一个 "ValuesController" 控制器，并包含两个简单的 GET 接口，返回一些硬编码的字符串值。

步骤2：配置WebAPI
接下来我们需要配置 WebAPI 项目，使其支持跨域访问和 HTTPS 协议：

1. 打开 "Startup.cs" 文件，添加跨域访问中间件：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials()
               .WithOrigins("http://localhost:4200");
    }));
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("CorsPolicy");
    app.UseHttpsRedirection();
}

1. 修改 "launchSettings.json" 文件，将 WebAPI 项目使用的默认 HTTP 协议改为 HTTPS，即在 "projectUrl" 和 "applicationUrl" 中添加 "https://" 前缀。

步骤3：测试WebAPI
现在我们可以运行 WebAPI 项目，并通过 Swagger UI 测试其功能是否正常：

1. 在 Visual Studio 中按 F5 启动项目，或使用 dotnet 命令启动项目。

2. 打开浏览器，访问 Swagger UI 地址，例如：https://localhost:44361/swagger/index.html。

3. 在 Swagger UI 中选择一个 API，点击 "Try it out" 按钮，并填写请求参数，然后点击 "Execute" 按钮。

4. 如果 API 执行成功，则会在 Swagger UI 中显示响应结果。

步骤4：创建前端项目并引用WebAPI
接下来我们需要创建一个前端项目，并引用 WebAPI 项目提供的服务：

1. 使用 Angular CLI 创建一个新的 Angular 项目，并添加对 "@angular/common/http" 包的依赖：

ng new frontend
cd frontend
npm install @angular/common@latest --save

1. 修改 "app.module.ts" 文件，将 HttpClient 模块添加到应用的 imports 中：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 创建一个服务，用于调用 WebAPI 项目提供的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = 'https://localhost:44361/api/values';

  constructor(private http: HttpClient) { }

  getValues() {
    return this.http.get(`${this.baseUrl}/getvalues`);
  }

  getValue(id: string) {
    return this.http.get(`${this.baseUrl}/getvalue/${id}`);
  }
}

步骤5：测试前端项目
现在我们可以测试前端项目，调用 WebAPI 项目提供的服务，并将结果输出到页面上：

1. 在 "app.component.ts" 文件中导入 ApiService：

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `<h1>Values:</h1>
             <ul><li *ngFor="let value of values">{{value}}</li></ul>`,
  providers: [ApiService]
})
export class AppComponent {
  title = 'frontend';
  values: any[];

  constructor(private apiService: ApiService) { } 

  ngOnInit() {
    this.apiService.getValues().subscribe(
      data => { this.values = data as any[]; },
      error => { console.log(error); }
    );
  }
}

1. 使用 Angular CLI 启动前端项目：

ng serve

1. 打开浏览器，访问前端项目的地址，例如：http://localhost:4200。

2. 如果一切正常，我们应该能够在页面上看到来自 WebAPI 项目的数据。

这样，我们就完成了 WebAPI 实现前后端分离的示例攻略。需要注意的是，在实际开发中，我们还需要考虑其他因素，例如安全性、数据格式、API 版本管理等。不过通过本攻略，我们可以初步掌握 WebAPI 实现前后端分离的技术要点和开发流程。