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

  1. 创建ReStore文件夹
mkdir ReStore
  1. 创建新的sln
dotnet new sln
  1. 创建一个名为API的项目
donete new webapi -o API
  1. 给解决方案里添加项目
dotnet sln add API
  1. 进入到项目文件夹内,运行程序
donet run 
  1. 访问 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, 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/944754.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Bean 管理学习

Spring 框架的核心之一是 IOC&#xff08;控制反转&#xff09;容器&#xff0c;Bean 的管理是其中的重要功能。本文将从 Bean 的获取、作用域和第三方 Bean 的管理三个方面进行学习和总结。 1. 获取 Bean 在 Spring 项目启动时&#xff0c;IoC 容器会将所有的 Bean 创建好并托…

Excel for Finance 07 `FV PV` 函数

Excel 的 FV 函数用于计算一笔投资在未来的价值&#xff0c;基于固定的利率和定期付款。这是一个金融函数&#xff0c;常用来分析储蓄计划、贷款、或投资的增长。 语法&#xff1a; FV(rate, nper, pmt, [pv], [type])参数说明&#xff1a; rate&#xff08;必需&#xff09;&…

Lecture 18

Floating Point Numbers 1. 整数的局限性&#xff1a; • 在计算机中&#xff0c;并非所有数字都能用整数形式表示。例如&#xff1a; • 非整数&#xff08;如小数&#xff09;&#xff1a;345.0256。 • 超出整数表示范围的数&#xff1a; 5.375 \times 10^{25} 。 2. 浮…

【LC】19. 删除链表的倒数第 N 个结点

题目描述&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff…

EasyExcel(读取操作和填充操作)

文章目录 1.准备Read.xlsx&#xff08;具有两个sheet&#xff09;2.读取第一个sheet中的数据1.模板2.方法3.结果 3.读取所有sheet中的数据1.模板2.方法3.结果 EasyExcel填充1.简单填充1.准备 Fill01.xlsx2.无模版3.方法4.结果 2.列表填充1.准备 Fill02.xlsx2.模板3.方法4.结果 …

五.Springboot通过AOP实现API接口的签名验证

文章目录 前言一、实现原理二、签名规则三、服务端实现4.1、创建自定义注解4.2、创建切面处理类4.3、对应工具类RequestUtil 四、测试4.1 签名失败测试&#xff1a;4.2 签名成功测试&#xff1a; 四、总结 前言 对外开放的接口&#xff0c;需要验证请求方发送过来的数据确实是…

记录jvm进程号

日常开发中&#xff0c;相信大家会经常用到这么一行命令&#xff1a; ps -ef | grep xxx.jar | grep -v grep | awk {print $2} | xargs -r kill -9 就是杀掉xxx相关的进程&#xff0c;然后启动&#xff0c;当然也还有其他的方式可以实现类似的功能&#xff0c;我就不列举了&…

STM32完全学习——使用定时器1精确延时

一、定时器的相关配置 首先一定要是递减定时器&#xff0c;递增的不太行&#xff0c;控制的不够准确&#xff0c;其次在大于10微秒的延时是非常准确的&#xff0c;小于的话&#xff0c;就没有那没准&#xff0c;但是凑合能用。误差都在一个微秒以内。使用高级定时器也就是时钟…

简述css中z-index的作用?如何用定位使用?

z-index是一个css属性&#xff0c;用于控制元素的堆叠顺序&#xff0c; 如何使用定位用index 1、position&#xff1a;relative&#xff1b; z-index&#xff1b; 相对于自己来定位的&#xff0c;可以根据top&#xff0c;bottom&#xff0c;right&#xff0c;left&#xff…

被裁20240927 --- 嵌入式硬件开发 STM32篇

人很容易原谅别人的错误但很难原谅别人的正确 1. 文档、手册、指南、资源2. MCU 结构3. MCU 和 MPU 的区别4. 一些概念什么是看门狗 &#xff1f;什么是 DMA &#xff1f;什么是晶振 &#xff1f;什么是片内外设&#xff1f;软件协议、硬件协议、数据协议、通讯协议、通信协议u…

被邀请出版Cursor教程书籍是什么体验?

本文目的 本次文章和大家分享一下被邀请出版书籍的经历、准备工作&#xff1b;准备工作大部分文字内容由Cursor完成。同时如果有后续、未来书籍真的出版&#xff0c;我会持续进行分享&#xff0c;欢迎关注我~ 事情来由 前几天我被出版社编辑联系&#xff0c;询问我是否可以合…

全新免押租赁系统助力商品流通高效安全

内容概要 全新免押租赁系统的推出&#xff0c;可以说是一场商品流通领域的小革命。想象一下&#xff0c;不再为押金烦恼&#xff0c;用户只需通过一个简单的信用评估&#xff0c;就能快速租到所需商品&#xff0c;这种体验简直令人惊喜&#xff01;这个系统利用代扣支付技术&a…

upload-labs关卡记录9

还是上传一个一句话木马&#xff0c;提示文件类型不允许上传&#xff0c;随变改一改后缀名&#xff0c;发现就可以上传了&#xff0c;黑名单&#xff0c;这里经过尝试&#xff0c;常规的双写后缀&#xff0c;大小写&#xff0c;.htaccess&#xff0c;然后抓包&#xff0c;试试点…

高质量 Next.js 后台管理模板源码分享,开发者必备

高质量 Next.js后台管理模板源码分享&#xff0c;开发者必备 Taplox 是一个基于 Bootstrap 5 和 Next.js 构建的现代化后台管理模板和 UI 组件库。它不仅设计精美&#xff0c;还提供了一整套易用的工具&#xff0c;适合各种 Web 应用、管理系统和仪表盘项目。无论你是初学者还是…

路由器刷机TP-Link tp-link-WDR5660 路由器升级宽带速度

何在路由器上设置代理服务器&#xff1f; 如何在路由器上设置代理服务器&#xff1f; 让所有连接到该路由器的设备都能够享受代理服务器的好处是一个不错的选择&#xff0c;特别是当需要访问特定的网站或加速网络连接的时候。下面是一些您可以跟随的步骤&#xff0c;使用路由器…

【Linux/踩坑】Linux中启动eclipse或HDFS因JAVA_HOME设置报错

Linux中启动eclipse或hadoop因JAVA_HOME设置报错 eclipseHadoop eclipse 错误提示&#xff1a; A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. No Java virtual machine was found after searching the follo…

可信数据空间建设及应用参考指南(V1.0)

为贯彻国家数据局《可信数据空间发展行动计划&#xff08;2024-2028 年&#xff09;》&#xff0c;促进可信数据空间持续、快速和健康发展&#xff0c;相关行业专家组织编写《可信数据空间建设及应用参考指南&#xff08;V1.0&#xff09;》&#xff08;以下简称《参考指南》&a…

Hive刷分区MSCK

一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的&#xff0c;但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录&#xff0c;如果目录多&#xff0c;需要执行多条alter语句&#xff0c;非常麻烦。Hive提供了一个"…

【学生管理系统】权限管理之用户管理

目录 6. 权限管理 6.1 环境搭建 6.1.1 数据库 6.1.2 后端环境 6.2 用户管理 6.2.1 查询所有用户&#xff08;关联角色&#xff09; 6.2.2 核心1&#xff1a;给用户授予角色 6. 权限管理 6.1 环境搭建 6.1.1 数据库 权限管理的5张表的关系 添加4张表 # 权限表&…

PTPVT 插值说明

文章目录 PTPVT 插值说明 PTPVT 插值说明PVT Hermite插值PVT 三次多项式插值PT 插值Sin轨迹测试结果PVT Hermite插值结果PVT 三次多项式插值结果PT 插值结果 用户轨迹测试结果PVT Hermite插值结果PT 插值结果 PTPVT 插值说明 PT模式&#xff1a; 位置-时间路径插值算法。 PVT模…