使用 React 和 .NET Core 执行 CRUD 操作

在本文中，我们将演示使用 React 作为前端和使用 .NET Core 作为后端来构建 CRUD（创建、读取、更新、删除）应用程序的过程。

1. 设置开发环境

A.A. 安装 .NET Core SDK

请确保计算机上已安装 .NET Core SDK。您可以从 .NET 官方网站下载它。

B.B. 创建新的 .NET Core Web API 项目

使用以下命令创建新的 .NET Core Web API 项目：

dotnet new webapi -n MyWebApi  
cd MyWebApi

C. 安装 Entity Framework Core

安装 Entity Framework Core 以与数据库交互：

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

d. 创建数据模型

定义数据模型以表示应用程序中的实体。例如，让我们创建一个模型：Product

// Product.cs  
public class Product  
{  
    public int Id { get; set; }  
    public string Name { get; set; }  
    public decimal Price { get; set; }  
}

2. 实现后端功能

A. 配置 Entity Framework Core

在文件中配置 Entity Framework Core：Configure Entity Framework Core in your file：Programe.cs

// Programe.cs  
public void ConfigureServices(IServiceCollection services)  
{  
    services.AddDbContext<AppDbContext>(options =>  
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));  
}

B. 创建 DbContext

创建一个 DbContext 类来表示应用程序的数据库上下文：

// AppDbContext.cs  
public class AppDbContext : DbContext  
{  
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)  
    {  
    }  
  
    public DbSet<Product> Products { get; set; }  
}

C. 在控制器中实施 CRUD 操作

创建控制器类以处理 CRUD 操作的 HTTP 请求。下面是用于管理产品的控制器示例：

// ProductsController.cs
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    private readonly AppDbContext _context;

    public ProductsController(AppDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<Product>>> GetProducts()
    {
        return await _context.Products.ToListAsync();
    }

    [HttpGet("{id}")]
    public async Task<ActionResult<Product>> GetProduct(int id)
    {
        var product = await _context.Products.FindAsync(id);

        if (product == null)
        {
            return NotFound();
        }

        return product;
    }

    [HttpPost]
    public async Task<ActionResult<Product>> CreateProduct(Product product)
    {
        _context.Products.Add(product);
        await _context.SaveChangesAsync();

        return CreatedAtAction(nameof(GetProduct), new { id = product.Id }, product);
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> UpdateProduct(int id, Product product)
    {
        if (id != product.Id)
        {
            return BadRequest();
        }

        _context.Entry(product).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!ProductExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteProduct(int id)
    {
        var product = await _context.Products.FindAsync(id);
        if (product == null)
        {
            return NotFound();
        }

        _context.Products.Remove(product);
        await _context.SaveChangesAsync();

        return NoContent();
    }

    private bool ProductExists(int id)
    {
        return _context.Products.Any(e => e.Id == id);
    }
}

3. 为前端构建 React 组件

A. 创建新的 React 应用程序

使用以下命令创建一个新的 React 应用程序：create-react-app

npx create-react-app my-react-app
cd my-react-app

B. 设置路由

安装 React Router 以在不同视图之间导航：

npm install react-router-dom

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductList from './components/ProductList';
import CreateProduct from './components/CreateProduct';
import EditProduct from './components/EditProduct';

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={ProductList} />
          <Route path="/create" component={CreateProduct} />
          <Route path="/edit/:id" component={EditProduct} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

C. 创建 UI 组件

为每个 CRUD 操作创建 React 组件：

// ProductList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('/api/products')
      .then(response => {
        setProducts(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

// CreateProduct.js
import React, { useState } from 'react';
import axios from 'axios';

function CreateProduct() {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    const product = {
      name: name,
      price: price
    };

    axios.post('/api/products', product)
      .then(response => {
        console.log('Product created successfully: ', response.data);
      })
      .catch(error => {
        console.error('Error creating product: ', error);
      });
  };

  return (
    <div>
      <h2>Create Product</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Name:</label>
          <input type="text" value={name} onChange={e => setName(e.target.value)} />
        </div>
        <div>
          <label>Price:</label>
          <input type="text" value={price} onChange={e => setPrice(e.target.value)} />
        </div>
        <button type="submit">Create</button>
      </form>
    </div>
  );
}

export default CreateProduct;

D. 实现 API 调用

进行 API 调用以执行 CRUD 操作：

// EditProduct.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function EditProduct({ match }) {
  const [product, setProduct] = useState({ id: 0, name: '', price: '' });

  useEffect(() => {
    axios.get(`/api/products/${match.params.id}`)
      .then(response => {
        setProduct(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, [match.params.id]);

  const handleSubmit = (event) => {
    event.preventDefault();

    axios.put(`/api/products/${product.id}`, product)
      .then(response => {
        console.log('Product updated successfully: ', response.data);
      })
      .catch(error => {
        console.error('Error updating product: ', error);
      });
  };

  return (
    <div>
      <h2>Edit Product</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Name:</label>
          <input type="text" value={product.name} onChange={e => setProduct({ ...product, name: e.target.value })} />
        </div>
        <div>
          <label>Price:</label>
          <input type="text" value={product.price} onChange={e => setProduct({ ...product, price: e.target.value })} />
        </div>
        <button type="submit">Update</button>
      </form>
    </div>
  );
}

export default EditProduct;

通过执行这些步骤并利用提供的代码示例，可以使用 React 和 .NET Core 成功实现 CRUD 操作。这种组合为构建具有丰富用户界面和强大后端功能的现代 Web 应用程序提供了强大而灵活的解决方案。