Asp.Net 前后端分离项目——项目搭建

项目目录

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

1. 打开 Visual Studio ：
2. 启动 Visual Studio。
3. 创建新项目 ：
   • 点击 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 端点。例如：

[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();
    }
}

4. 运行后端项目 ：
   按下 F5 或点击 Run 按钮，启动后端项目。
   默认情况下，Swagger UI 将在浏览器中打开，地址通常是 https://localhost:5001/swagger。如果不是可以根据控制台中显示的监听端口来访问默认页面

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7240
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5162

5. 解决跨域问题 ：
   • 默认情况下，React 应用会运行在 http://localhost:3000，而后端运行在 https://localhost:5001，这会导致跨域问题。
   • 为了解决这个问题，可以在 ASP.NET Core 后端项目中启用 CORS。
   • 打开 Startup.cs 文件（或在 .NET 6+ 中直接修改 Program.cs），添加 CORS 配置：

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）

1. 安装 Node.js 和 npm ：
   • 如果还没有安装 Node.js，请前往 Node.js 官网 下载并安装。
2. 创建 React 项目 ：
   • 打开终端或命令提示符，运行以下命令来创建一个新的 React 项目：

npx create-react-app frontend-demo 

- 进入项目目录：

cd frontend-demo

3. 安装 Axios （用于发送 HTTP 请求）：
   • 在项目目录中运行以下命令来安装 Axios：

npm install axios

4. 修改 React 代码 ：
   • 打开 src/App.js 文件，并修改为以下内容：

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;

5. 运行前端项目 ：
   • 在终端中运行以下命令来启动 React 项目：

npm start

- React 应用将会在 http://localhost:3000 上运行，并且会从后端 API 获取天气预报数据。