项目目录
bash
复制代码
MyDemoProject/
├── BackendDemo/ # 后端项目目录
│ ├── Controllers/ # 控制器目录，存放 API 控制器
│ │ └── WeatherForecastController.cs
│ ├── Models/ # 数据模型目录（可选）
│ │ └── WeatherForecast.cs
│ ├── Properties/ # 配置文件目录
│ │ └── launchSettings.json
│ ├── appsettings.json # 应用配置文件
│ ├── Program.cs # ASP.NET Core 的入口点
│ ├── BackendDemo.csproj # 项目文件
│ └── ...
├── frontend-demo/ # 前端项目目录
│ ├── public/ # 公共资源目录
│ │ ├── index.html # HTML 模板
│ │ └── ...
│ ├── src/ # 源代码目录
│ │ ├── App.js # React 主组件
│ │ ├── components/ # React 组件目录
│ │ ├── services/ # 服务目录，用于封装 API 调用
│ │ │ └── api.js # Axios 封装的服务
│ │ ├── index.js # React 应用入口文件
│ │ └── ...
│ ├── package.json # Node.js 项目依赖和脚本配置
│ ├── package-lock.json # 锁定依赖版本
│ └── ...
└── README.md # 项目说明文档
- 前端 ：React.js
- 后端 ：ASP.NET Core Web API
后端 Asp.Net Core Web Api
- 打开 Visual Studio ：
- 启动 Visual Studio。
- 创建新项目 ：
- 点击 Create a new project。
- 在搜索框中输入 ASP.NET Core Web API，然后选择它并点击 Next。
- 配置项目 ：
- 输入项目名称（例如 BackendDemo）。
- 选择项目保存的位置。
- 点击 Next。
- 选择框架和配置 ：选择 .NET 6.0 或更高版本（确保你安装了相应的 SDK）。确保勾选 Enable OpenAPI support，这样可以生成 Swagger 文档，方便调试 API。
- 点击 Create。
- 修改默认的 WeatherForecast 控制器 （可选）：打开 Controllers/WeatherForecastController.cs。你可以修改或添加新的 API 端点。例如：
csharp
复制代码
[ApiController]
[Route("api/[controller]")]
public class WeatherForecastController : ControllerBase
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
var rng = new Random();
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
})
.ToArray();
}
}
- 运行后端项目 ：
按下 F5 或点击 Run 按钮，启动后端项目。
默认情况下，Swagger UI 将在浏览器中打开，地址通常是 https://localhost:5001/swagger。如果不是可以根据控制台中显示的监听端口来访问默认页面
csharp
复制代码
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7240
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5162
- 解决跨域问题 ：
csharp
复制代码
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAllOrigins",
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseCors("AllowAllOrigins");
app.UseAuthorization();
app.MapControllers();
app.Run();
创建前端项目（React.js）
- 安装 Node.js 和 npm ：
- 如果还没有安装 Node.js，请前往 Node.js 官网 下载并安装。
- 创建 React 项目 ：
- 打开终端或命令提示符，运行以下命令来创建一个新的 React 项目：
bash
复制代码
npx create-react-app frontend-demo
- 进入项目目录：
bash
复制代码
cd frontend-demo
- 安装 Axios （用于发送 HTTP 请求）：
bash
复制代码
npm install axios
- 修改 React 代码 ：
- 打开 src/App.js 文件，并修改为以下内容：
csharp
复制代码
import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [forecasts, setForecasts] = useState([]);
useEffect(() => {
// 调用后端 API 获取数据，注意API的端口以及路由是否和后端的一致
axios.get('https://localhost:7240/api/weatherforecast')
.then(response => {
setForecasts(response.data);
})
.catch(error => {
console.error('There was an error fetching the data!', error);
});
}, []);
return (
<div className="App">
<h1>Weather Forecast</h1>
<ul>
{forecasts.map((forecast, index) => (
<li key={index}>
{forecast.date} - {forecast.summary} ({forecast.temperatureC}°C)
</li>
))}
</ul>
</div>
);
}
export default App;
- 运行前端项目 ：
csharp
复制代码
npm start
- React 应用将会在 http://localhost:3000 上运行，并且会从后端 API 获取天气预报数据。