当前位置: 首页 > news >正文

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, 

相关文章:

E-commerce .net+React(一)——项目初始化

文章目录 项目地址一、创建.Net环境1.1环境配置1.1.1 使用vscode创建webapi1.1.2 Clean architecture结构创建1.1.3 将创建好结构的项目添加到git里1.1.4 EF Core配置1. 在infrastructure里安装EF所需环境2. 创建Product数据模型3. 创建EF Core的DbContext 数据库上下文4. 创建…...

算法每日双题精讲 —— 滑动窗口(水果成篮,找到字符串中所有字母异位词)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…...

C++ 设计模式:享元模式(Flyweight Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 单例模式 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过共享尽可能多的相同对象来减少内存使用和提高性能。享元模式适用于大量细粒度对象的场景&#xff0c;这些对象之…...

Docker+Portainer 离线安装

1. Docker安装 步骤一&#xff1a;官网下载 docker 安装包 步骤二&#xff1a;解压安装包; tar -zxvf docker-24.0.6.tgz 步骤三&#xff1a;将解压之后的docker文件移到 /usr/bin目录下; cp docker/* /usr/bin/ 步骤四&#xff1a;将docker注册成系统服务; vim /etc/sy…...

Linux第100步_Linux之设置LCD作为终端控制台和LCD背光调节

KMS是Kemmel Mode Setting的缩写&#xff0c;内核显示模式设置。它主要负责显示的控制&#xff0c;包括屏幕分辨率、屏幕刷新率和颜色深度等等。 CRTC是指显示控制器&#xff0c;在DRM里有多个显存&#xff0c;通过操作CRTC来控制要显示那个显存。 KMS包含了FB框架。DRM驱动默…...

Chapter09 国际化i18n 和 数据校验:Validation

文章目录 1 Java国际化2 Spring6国际化3 使用Spring6国际化4 数据校验&#xff1a;Validation实验一&#xff1a;通过Validator接口实现实验二&#xff1a;Bean Validation注解实现实验三&#xff1a;基于方法实现校验实验四&#xff1a;实现自定义校验 1 Java国际化 示例&…...

活动预告 | Microsoft 安全在线技术公开课:通过扩展检测和响应抵御威胁

课程介绍 通过 Microsoft Learn 免费参加 Microsoft 安全在线技术公开课&#xff0c;掌握创造新机遇所需的技能&#xff0c;加快对 Microsoft Cloud 技术的了解。参加我们举办的“通过扩展检测和响应抵御威胁”技术公开课活动&#xff0c;了解如何更好地在 Microsoft 365 Defen…...

Unresolved plugin: ‘org.apache.maven.plugins:maven-site-plugin:3.12.1‘

问题 使用idea 社区办加载项目提示下面问题&#xff1a; Unresolved plugin: org.apache.maven.plugins:maven-site-plugin:3.12.1 问题解决 maven插件地址&#xff1a; https://maven.apache.org/plugins/maven-dependency-plugin/plugins.html Maven 中央仓库地址&#…...

5个开源RAG框架对比

还在为RAG应用开发头疼吗&#xff1f;别急&#xff0c;今天给大家推荐五款完全开源免费的RAG框架&#xff0c;覆盖自动优化、多模态处理、本地部署、生产环境支持等多种场景&#xff0c;助你轻松搞定RAG开发&#xff01;&#x1f447; 1. AutoRAG&#xff1a;自动优化&#xff…...

活动预告 | Microsoft Power Platform 在线技术公开课:实现业务流程自动化

课程介绍 参加“Microsoft Power Platform 在线技术公开课&#xff1a;实现业务流程自动化”活动&#xff0c;了解如何更高效地开展业务。参加我们举办的本次免费培训活动&#xff0c;了解如何借助 Microsoft AI Builder 和 Power Automate 优化工作流。结合使用这些工具可以帮…...

【分布式文件存储系统Minio】2024.12保姆级教程

文章目录 1.介绍1.分布式文件系统2.基本概念 2.环境搭建1.访问网址2.账号密码都是minioadmin3.创建一个桶4.**Docker安装miniomc突破7天限制**1.拉取镜像2.运行容器3.进行配置1.格式2.具体配置 4.查看桶5.给桶开放权限 3.搭建minio模块1.创建一个oss模块1.在sun-common下创建2.…...

解决ssh和git秘钥认证失败问题

已正确上传公钥到远程服务器&#xff0c;但是本地的连接认证还是使用默认秘钥文件名id_rsa或者默认用户名&#xff0c;导致了认证失败&#xff0c;总结了以下解决办法&#xff1a; 1、ssh秘钥认证 远程登录的时候可能ssh客户端默认使用id_rsa文件名秘钥&#xff0c;但是之前生…...

AI安全的挑战:如何让人工智能变得更加可信

引言 随着人工智能&#xff08;AI&#xff09;技术在各个领域的广泛应用&#xff0c;尤其是在医疗、金融、自动驾驶和智能制造等行业&#xff0c;AI正在重塑我们的工作和生活方式。从提高生产效率到实现个性化服务&#xff0c;AI带来了前所未有的便利。然而&#xff0c;在享受这…...

腾讯通RTX升级迁移攻略,兼容Linux内核国产系统及移动端

一、腾讯通RTX继续使用的主要难题 腾讯通RTX停更后&#xff0c;用户不仅无法继续获得更新、技术支持和资源下载&#xff0c;还面临着以下无法解决的使用问题&#xff1a; ● 不兼容国产系统与移动端&#xff1a;腾讯通RTX仅支持Windows和Mac操作系统&#xff0c;无法在基于Li…...

用css实现瀑布流布局

上效果 知识理解 column-count: 4; column-gap: 15px;实现固定四行瀑布流布局 columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整&#xff0c;尽可能一行多个200px宽度的列数 <!DOCTYPE html> <html lang"en"><head><me…...

FortiAl为擎重塑网络与安全运营未来

在当今数字化浪潮汹涌的时代&#xff0c;网络安全运营的重要性愈发凸显&#xff0c;而人工智能的迅猛发展则如同一股强劲的东风&#xff0c;为这一领域带来了革命性的变革。Fortinet攻防专家邹国雄在《FortiAI&#xff1a;以生成式人工智能&#xff08;GenAI&#xff09;简化Fo…...

优化租赁小程序提升服务效率与用户体验的策略与实践

内容概要 在这个快速发展的商业环境中&#xff0c;租赁小程序成为了提升服务效率和用户体验的重要工具。通过对用户需求的深入挖掘&#xff0c;我们发现他们对于功能的便捷性、响应速度和界面的友好性有着极高的期待。因此&#xff0c;针对这些需求&#xff0c;完善租赁小程序…...

基于Python的医院预约挂号与诊断系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

Spring Boot教程之四十:使用 Jasypt 加密 Spring Boot 项目中的密码

如何使用 Jasypt 加密 Spring Boot 项目中的密码 在本文中&#xff0c;我们将学习如何加密 Spring Boot 应用程序配置文件&#xff08;如 application.properties 或 application.yml&#xff09;中的数据。在这些文件中&#xff0c;我们可以加密用户名、密码等。 您经常会遇到…...

Design Compiler:两种工作模式(线负载模式和拓扑模式)

相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 Design Compiler可以以线负载模式或拓扑模式启动&#xff0c;必须选择其中一个模式。在拓扑模式下还可使用多模式和UPF模式&#xff1a;多模式允许在多种工作…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...