在本文中,我们将演示使用 React 作为前端和使用 .NET Core 作为后端来构建 CRUD(创建、读取、更新、删除)应用程序的过程。
请确保计算机上已安装 .NET Core SDK。您可以从 .NET 官方网站下载它。
使用以下命令创建新的 .NET Core Web API 项目:
dotnet new webapi -n MyWebApi
cd MyWebApi
安装 Entity Framework Core 以与数据库交互:
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
定义数据模型以表示应用程序中的实体。例如,让我们创建一个模型:Product
// Product.cs
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
在文件中配置 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")));
}
创建一个 DbContext 类来表示应用程序的数据库上下文:
// AppDbContext.cs
public class AppDbContext : DbContext
{
public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
{
}
public DbSet<Product> Products { get; set; }
}
创建控制器类以处理 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);
}
}
使用以下命令创建一个新的 React 应用程序:create-react-app
npx create-react-app my-react-app
cd my-react-app
安装 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;
为每个 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;
进行 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 应用程序提供了强大而灵活的解决方案。