React2023电商项目实战 - 1.项目搭建

古人学问无遗力,少壮工夫老始成。
纸上得来终觉浅,绝知此事要躬行。
—— 陆游《《冬夜读书示子聿》》


在这里插入图片描述

系列文章目录

  1. 项目搭建
  2. App登录及网关
  3. App文章
  4. 自媒体平台(博主后台)
  5. 内容审核(自动)

文章目录

  • 系列文章目录
  • 一、项目介绍
    • 1.页面展示
      • ⑴. 登录注册
      • ⑵. 商城
      • ⑶. 购物车
      • ⑷. 个人中心
    • 2.业务功能
    • 3.技术栈
      • ⑴. 客户端
      • ⑵. 服务端
  • 二、搭建 mongodb 数据库
    • 1.安装 mongodb 数据库
      • ⑴. 软件安装
      • ⑵. 终端命令
    • 2.数据库可视化 Robo 3T
  • 三、创建项目
    • 1.创建项目
    • 2.上传至Gitee仓库
    • 3.优化项目结构
      • ⑴. CDN引入
      • ⑵. 精简代码结构
    • 4.页面展示




一、项目介绍

1.页面展示

⑴. 登录注册

在这里插入图片描述
在这里插入图片描述

⑵. 商城

在这里插入图片描述
在这里插入图片描述

⑶. 购物车

在这里插入图片描述在这里插入图片描述


⑷. 个人中心

在这里插入图片描述在这里插入图片描述


2.业务功能

  • 登录、注册
  • 商城:模糊搜索、属性筛选(多选)、价格区间筛选
  • 支付流程:购物车 - 填写地址 - 订单 - 支付 - 查看订单状态
  • 个人中心:
    • 会员:个人信息
    • 管理员:个人信息、创建分类、创建商品、订单列表



3.技术栈

⑴. 客户端

  • 脚本:TypeScript
  • 前端框架:React
  • 路由管理:React-router-dom
  • 用户界面:Antd
  • 全局状态管理:Redux
  • 异步状态更新:redux-saga
  • 路由状态同步:connected-react-router
  • 网络请求:Axios
  • 调试工具:redux-devtools-extension

⑵. 服务端

  • 脚本:Node.js
  • 数据库:Mongodb
  • 数据库可视化:Robo 3T




二、搭建 mongodb 数据库

1.安装 mongodb 数据库

⑴. 软件安装

百度网盘资源: https://pan.baidu.com/s/1u8D6glRwKugpEilXcrleHA?pwd=reac

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

⑵. 终端命令

# 查看mongoDB信息
mongo

在这里插入图片描述

# 停止MongoDB服务(以管理员身份运行终端)
net stop mongodb
# 启动MongoDB服务(以管理员身份运行终端)
net start mongodb

在这里插入图片描述

2.数据库可视化 Robo 3T

百度网盘资源: https://pan.baidu.com/s/138VJd9XHdZA4Z_W0aCkD_w?pwd=reac
在这里插入图片描述在这里插入图片描述
在这里插入图片描述




三、创建项目

1.创建项目

# 创建项目
npx create-react-app ecommerce-front --template typescript
# 进入目录
cd ecommerce-front
# 安装依赖(connected-react-router可能会因为版本安装错误)
npm install antd axios moment redux react-redux react-router-dom redux-saga connected-react-router redux-devtools-extension @types/react-redux @types/react-router-dom

2.上传至Gitee仓库

Gitee仓库地址: https://gitee.com/yuan0_0/react-ecommerce

# 初始化本地仓库
git init# 将当前所有内容添加
git add .# 提交日志
git commit -m “init”# 在本地仓库命名为 origin,并且赋予远程地址
git remote add orign https://gitee.com/yuan0_0/edu817.git# 提交本地仓库至 远程仓库的主分支
git push orign master

3.优化项目结构

⑴. CDN引入

编辑 public\index.html 文件

...
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.8.3/antd.min.css" />


⑵. 精简代码结构

删除项目初始文件: src\App.csssrc\App.test.tsxsrc\index.csssrc\logo.svgsrc\reportWebVitals.tssrc\setupTests.ts

编辑 src\index.tsx 文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<React.StrictMode><App /></React.StrictMode>
);

编辑 src\App.tsx 文件

import React from 'react';function App() {return return <div><h2>Hello World</h2></div>
}export default App;

4.页面展示

在这里插入图片描述



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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Smartbi 李代:人尽其才、数尽其用,Smartbi Eagle智慧数据运营平台全新亮相

数据是企业数字化转型的基石&#xff0c;也是赢得未来的核心资产和竞争力。数字化转型的关键&#xff0c;是在全公司建立一种数据驱动的组织和机制&#xff0c;营造数据文化的氛围&#xff0c;让更多的用户、在更多的场景中&#xff0c;有意愿、有能力使用数据&#xff0c;从而…

ssm+vue基于java的健身房管理系统源码和论文PPT

ssmvue基于java的健身房管理系统源码和论文PPT015 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统…

手机出现 不读卡 / 无信号时应该怎么办?

当手机屏幕亮起&#xff0c;一般在屏幕最上方都会有代表手机卡状态的显示&#xff0c;其中网络信号和读卡状态的标识&#xff0c;依旧有很多人分不太清&#xff0c;更不清楚改怎么办了。 1、当我们的手机里有两张卡时&#xff0c;则会有两个信号显示 2、信号状态一般是由短到…

什么是合成数据(Synthetic Data)?

关于合成数据您需要知道的一切 推出人工智能&#xff08;AI&#xff09;的企业在为其模型采集足够的数据方面会遇到一个主要障碍。对于许多用例来说&#xff0c;正确的数据根本不可用&#xff0c;或者获取数据非常困难且成本高昂。在创建AI模型时&#xff0c;数据缺失或不完整…

人尽其才、数尽其用,Smartbi Eagle智慧数据运营平台全新亮相

数据是企业数字化转型的基石&#xff0c;也是赢得未来的核心资产和竞争力。数字化转型的关键&#xff0c;是在全公司建立一种数据驱动的组织和机制&#xff0c;营造数据文化的氛围&#xff0c;让更多的用户、在更多的场景中&#xff0c;有意愿、有能力使用数据&#xff0c;从而…

Android设备通过蓝牙HID技术模拟键盘实现

目录 一&#xff0c;背景介绍 二&#xff0c;技术方案 2.1 获取BluetoothHidDevice实例 2.2 注册/解除注册HID实例 2.3 Hid report description描述符生成工具 2.4 键盘映射表 2.5 通过HID发送键盘事件 三&#xff0c;实例 一&#xff0c;背景介绍 日常生活中&#xff0…

面试热题(单词搜索)

给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相…

【100天精通python】Day37:GUI界面编程_PyQT从入门到实战(上)

目录 专栏导读 1 PyQt6 简介&#xff1a; 1.1 安装 PyQt6 和相关工具&#xff1a; 1.2 PyQt6 基础知识&#xff1a; 1.2.1 Qt 的基本概念和组件&#xff1a; 1.2.2 创建和使用 Qt 窗口、标签、按钮等基本组件 1.2.3 布局管理器&#xff1a;垂直布局、水平布局、网格布局…

记一次前端直接上传图片到oss报错

前端直接上传图片到阿里云oss,相关过程官网和网上资料已经很详细&#xff0c;不做赘述。 但这个过程比较复杂&#xff0c;前后端对接过程中很容易出现报错&#xff0c;这里遇到了以下报错&#xff0c;不容易排查。 请求显示net::ERR_NAME_NOT_RESOLVED错误&#xff0c;catch输…

题目:售货员的难题(状压dp)

售货员的难题 题目描述输入输出格式输入格式&#xff1a;输出格式&#xff1a; 输入输出样例输入样例#1&#xff1a;输出样例#1&#xff1a; 思路AC代码&#xff1a; 题目描述 某乡有n个村庄( 1 < n < 16 )&#xff0c;有一个售货员&#xff0c;他要到各个村庄去售货&am…

【LangChain】P0 LangChain 是什么与准备工作

LangChain 是什么与准备工作 LangChain 是什么&#xff1f;所谓增强数据感知所谓与环境互动 Get Started下载安装 langchain下载安装 openai获取 OpenAI API Key通过名为 openai_api_key 的参数传递密钥 LangChain 是什么&#xff1f; LangChain 是一个利用语言模型开发应用程序…

也许你正处于《孤注一掷》中的“团队”,要留心了

看完这部电影&#xff0c;心情久久不能平静&#xff0c;想了很多&#xff0c;倒不是担心自己哪天也成为“消失的yaozi”&#xff0c;而是在想&#xff0c;我们每天所赖以生存的工作&#xff0c;跟电影里他们的工作比&#xff0c;差别在哪里呢&#xff1f; 目录 1. 产品的本质…

ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

目录 一、树形表格如何添加序号体现层级关系 二、树形表格展开收缩图标位置放置&#xff0c;设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下&#xff1a;这种方法只能校验表格的第一层&#xff0c;树形需要递归设置子级节点prop。 树…

【0基础入门Python笔记】python 之基础语法、基础数据类型、复合数据类型及基本操作

python 基础&#xff08;一&#xff09; 基础语法规则基础数据类型数字类型&#xff08;Numbers&#xff09;字符串类型&#xff08;String&#xff09;布尔类型&#xff08;Boolean&#xff09; 复合数据类型List&#xff08;列表&#xff09;Tuple&#xff08;元组&#xff0…

Vue CLI创建Vue项目详细步骤

&#x1f680; 一、安装Node环境&#xff08;建议使用LTS版本&#xff09; 在开始之前&#xff0c;请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本&#xff0c;以确保稳定性和兼容性。 中文官网下载 确认已安装 Node.js。可以在终端中运行 node -v 命令…

【mysql报错解决】MySql.Data.MySqlClient.MySqlException (0x80004005)或1366

场景&#xff1a;c#使用mysql数据库执行数据库迁移&#xff0c;使用了新增inserter的语句&#xff0c;然后报错 报错如下&#xff1a; 1.MySql.Data.MySqlClient.MySqlException (0x80004005): Incorrect string value: ‘\xE6\x9B\xB4\xE6\x94\xB9…’ for column ‘Migratio…

Sigmastar SSC8826Q 2K行车记录仪解决方案

一、方案描述 行车记录仪是智能辅助汽车驾驶&#xff0c;和管理行车生活的车联网智能终端设备&#xff0c;利用智能芯片处理器、GPS定位、网络通信、自动控制等技术&#xff0c;将与行车生活有关的各项数据有机地结合在一起。 行车记录仪如今已经成了必不可少的车载用品之一&…

如何在安卓设备上安装并使用 ONLYOFFICE 文档

您可以使用文档安卓版应用&#xff0c;在移动设备上访问存在您 ONLYOFFICE 帐号中的文件。阅读本文&#xff0c;了解如何操作。 什么是 ONLYOFFICE 文档安卓版 适用于 Android 系统的 ONLYOFFICE 文档是一款全面的办公工具&#xff0c;您可以使用它&#xff0c;查看、创建、编…

Apache-Maven

安装Maven 解压apache-maven到目录下 Maven目录如下 bin&#xff1a;目录中存放的是可执行文件&#xff0c;JAVA项目中的编译执行打包都要使用bin. conf:存放的是Maven的配置文件&#xff0c;本地配置、私服配置都需要在conf下的settings.xml进行配置。 lib下存放的是Maven所…

ThreadLocal(超详细介绍!!)

关于ThreadLocal&#xff0c;可能很多同学在学习Java的并发编程部分时&#xff0c;都有所耳闻&#xff0c;但是如果要仔细问ThreadLocal是个啥&#xff0c;我们可能也说不清楚&#xff0c;所以这篇博客旨在帮助大家了解ThreadLocal到底是个啥&#xff1f; 1.ThreadLocal是什么&…