E-commerce .net+React（一）—

E-commerce .net+React（一）——项目初始化

文章目录

项目地址
一、创建.Net环境
- 1.1环境配置
- - 1.1.1 使用vscode创建webapi
  - 1.1.2 Clean architecture结构创建
  - 1.1.3 将创建好结构的项目添加到git里
  - 1.1.4 EF Core配置
  - - 1. 在infrastructure里安装EF所需环境
    - 2. 创建Product数据模型
    - 3. 创建EF Core的DbContext 数据库上下文
    - 4. 创建Extensions用来管理服务注入
    - 5. 在Program.cs程序入口注册AddInfrastructure服务
    - 6. 创建Seed服务
    - 7. 注册Seed服务
  - 1.1.5 配置SeriLog
  - - 1. 安装SeriLog
    - 2. 程序入口注册和使用
    - 3. 配置Serilog
    - 4. 开启EF Core日志记录
- 1.3 创建获取所有Product的接口
- - 1.3.1 安装CQRS所需要的包
  - 1.3.2 创建ProductDto
  - - 1. 创建Dto模型
    - 2. 使用AutoMapper建立映射关系
  - 1.3.3 创建Controllers
  - - 1. 创建IMediator服务
    - - 将AddApplication注册到program里
    - 2. 创建查询的Query
    - 3. 创建Handler
    - 4. 创建IProductsRepository接口
    - 5. 实现接口方法
    - 6. 将IProductsRepository服务注册到Extension里
二、创建React环境
- 2.1 使用vite创建react项目
- - 2.1.1 创建项目
  - 2.1.2 配置端口
  - 2.1.3 启动项目
- 2.2 显示后端接口的product数据
- - 2.2.1 创建Product类
  - 2.2.2 创建Layout页面
  - 2.2.3 Catalog组件展示Product列表
- 2.3 Materail UI使用
- - 2.3.1 安装Material ui

项目地址

教程作者：
教程地址：

https://github.com/TryCatchLearn/Restore

代码仓库地址：

所用到的框架和插件：

一、创建.Net环境

1.1环境配置

1.1.1 使用vscode创建webapi

创建ReStore文件夹

mkdir ReStore

创建新的sln

dotnet new sln

创建一个名为API的项目

donete new webapi -o API

给解决方案里添加项目

dotnet sln add API

进入到项目文件夹内，运行程序

donet run

访问 http://localhost:5172/swagger，成功

1.1.2 Clean architecture结构创建

引用关系图

1.1.3 将创建好结构的项目添加到git里

结构
前提：Git里有一个空的仓库ReStoreApi且没有master分支

#1.初始化本地仓库
git init#2. 上传代码到本地仓库
git add .
git commit -m "Initial commit"#3. 将远程仓库添加为 origin
git remote add origin https://github.com/CXTV/ReStoreApi.git#4.确保正确设置分支
git branch -M main#5. 推送代码到远程仓库
git push -u origin main

1.1.4 EF Core配置

1. 在infrastructure里安装EF所需环境

  <ItemGroup><PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0" /><PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.0"><PrivateAssets>all</PrivateAssets><IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets></PackageReference><PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" /><PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.0"><PrivateAssets>all</PrivateAssets><IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets></PackageReference></ItemGroup>

2. 创建Product数据模型

在ReStore.Domain/Models/Product.cs里创建Product表的模型

namespace ReStore.Domain.Models
{public class Product{public int Id { get; set; }public string Name { get; set; }public string Description { get; set; }public long Price { get; set; }public string PictureUrl { get; set; }public string Type { get; set; }public string Brand { get; set; }public int QuantityInStock { get; set; }}
}

3. 创建EF Core的DbContext 数据库上下文

在ReStore.Infrastructure/Persistance/ReStoreDbContext.cs里创建EF的数据库上下文，用来管理数据操作是数据库和程序的桥梁

using Microsoft.EntityFrameworkCore;
using ReStore.Domain.Models;namespace ReStore.Infrastructure.Persistance
{internal class ReStoreDbContext : DbContext{public ReStoreDbContext(DbContextOptions<ReStoreDbContext> options) : base(options){}public DbSet<Product> Products { get; set; }protected override void OnModelCreating(ModelBuilder modelBuilder){}}
}

4. 创建Extensions用来管理服务注入

创建ReStore.Infrastructure/Extensions/ServiceCollectionExtensions.cs ，Infrustructure 层的所有服务注册，都在该文件里进行，这样可以保持program.cs文件的结构整洁

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using ReStore.Infrastructure.Persistance;
using ReStore.Infrastructure.Seeds;namespace ReStore.Infrastructure.Extensions
{public static class ServiceCollectionExtensions{//将program.cs中的服务注册移到这里public static void AddInfrastructure(this IServiceCollection services,