React前端如何与C#后端通信-乐工具技术知识

要实现React前端与C#后端的通信，您可以使用RESTful API或GraphQL。这里我们将介绍如何使用RESTful API实现通信。

创建C#后端API 首先，在C#后端中创建一个Web API。您可以使用ASP.NET Core来实现。以下是一个简单的示例：

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("[controller]")]
public class UsersController : ControllerBase
{
    private static List users = new List { "User1", "User2", "User3" };

    [HttpGet]
    public IActionResult GetUsers()
    {
        return Ok(users);
    }

    [HttpPost]
    public IActionResult AddUser([FromBody] string user)
    {
        users.Add(user);
        return CreatedAtAction(nameof(GetUser), new { id = users.Count - 1 }, user);
    }

    [HttpGet("{id}")]
    public IActionResult GetUser(int id)
    {
        if (id >= 0 && id< users.Count)
        {
            return Ok(users[id]);
        }
        else
        {
            return NotFound();
        }
    }
}

配置CORS 为了让React应用程序能够访问C#后端API，您需要在C#后端中配置CORS（跨源资源共享）。在ASP.NET Core中，可以使用以下代码片段进行配置：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllOrigins", builder => builder.AllowAnyOrigin());
    });

    // ...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("AllowAllOrigins");

    // ...
}

在React前端调用API 现在，您可以在React应用程序中使用Fetch API或其他库（如Axios）调用C#后端API。以下是一个使用Fetch API获取用户列表的示例：

import React, { useEffect, useState } from 'react';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://localhost:5001/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    
      Users
      
        {users.map((user, index) => (
          {user}
        ))}
      
    
  );
}

export default App;

这只是一个简单的示例，您可以根据需要扩展和自定义这些代码。希望对您有所帮助！