117笔记问答要实现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;
这只是一个简单的示例，您可以根据需要扩展和自定义这些代码。希望对您有所帮助！