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.mzph.cn/news/45068.shtml

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

相关文章

ubuntu安装Microsoft Edge并设置为中文

1、下载 edge.deb 版本并安装 sudo dpkg -i microsoft-edg.deb 2. 设置默认中文显示 如果是通过.deb方式安装的&#xff1a; 打开默认安装路径下的microsoft-edge-dev文件&#xff0c;在文件最开头加上: export LANGUAGEZH-CN.UTF-8 &#xff0c;保存退出。 cd /opt/micr…

python绘制谷歌地图

谷歌地图 更多好看的图片见pyecharts官网 import pyecharts.options as opts from pyecharts.charts import MapGlobe from pyecharts.faker import POPULATIONdata [x for _, x in POPULATION[1:]] low, high min(data), max(data)c (MapGlobe().add_schema().add(mapty…

解决el-select回显异常 显示option选项的value 而不是显示label

1、问题 回显的value和选项value类型不同 form中v-model"form.userId"是字符串类型 option中:value“item.userId” 选项id是数字类型 2、办法 :value“item.userId” 改为 :value“item.iduserId‘’”&#xff08;转换成字符串&#xff09; <el-form-item l…

面试之快速学习STL-map

关联式容器 包括 map、multimap、set 以及 multiset 这 4 种容器。和序列式容器区别&#xff1a; a . 关联式容器在存储元素时还会为每个元素在配备一个键&#xff0c;整体以键值对的方式存储到容器中。 b . 相比前者&#xff0c;关联式容器可以通过键值直接找到对应的元素&am…

【100天精通python】Day42:python网络爬虫开发_HTTP请求库requests 常用语法与实战

目录 1 HTTP协议 2 HTTP与HTTPS 3 HTTP请求过程 3.1 HTTP请求过程 3.2 GET请求与POST请求 3.3 常用请求报头 3.4 HTTP响应 4 HTTP请求库requests 常用语法 4.1 发送GET请求 4.2 发送POST请求 4.3 请求参数和头部 4.4 编码格式 4.5 requests高级操作-文件上传 4.6 …

Spring Boot 统一功能处理

目录 1.用户登录权限效验 1.1 Spring AOP 用户统一登录验证的问题 1.2 Spring 拦截器 1.2.1 自定义拦截器 1.2.2 将自定义拦截器加入到系统配置 1.3 拦截器实现原理 1.3.1 实现原理源码分析 2. 统一异常处理 2.1 创建一个异常处理类 2.2 创建异常检测的类和处理业务方法 3. 统一…

go-test

单元测试 基本用法 Go语言测试 常用reflect.DeepEqual()对slice进行比较 跳过某些测试用例 func TestTimeConsuming(t *testing.T) {if testing.Short() {t.Skip("short模式下会跳过该测试用例")}... }当执行go test -short时就不会执行上面的TestTimeConsuming测…

python http文件上传

server端代码 import os import cgi from http.server import SimpleHTTPRequestHandler, HTTPServer# 服务器地址和端口 host = 0.0.0.0 port = 8080# 处理文件上传的请求 class FileUploadHandler(SimpleHTTPRequestHandler):def do_POST(self):# 解析多部分表单数据form = …

【Spring系列篇--关于IOC的详解】

目录 面试经典题目&#xff1a; 1. 什么是spring&#xff1f;你对Spring的理解&#xff1f;简单来说&#xff0c;Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。 2.什么是IoC&#xff1f;你对IoC的理解&#xff1f;IoC的重要性?将实例化对象的权利从程序员…

Centos 8 网卡connect: Network is unreachable错误解决办法

现象1、ifconfig没有ens160配置 [testlocalhost ~]$ ifconfig lo: flags73<UP,LOOPBACK,RUNNING> mtu 65536 inet 127.0.0.1 netmask 255.0.0.0 inet6 ::1 prefixlen 128 scopeid 0x10<host> loop txqueuelen 1000 (Local Loopba…

基于深度学习的指针式仪表倾斜校正方法——论文解读

中文论文题目:基于深度学习的指针式仪表倾斜校正方法 英文论文题目&#xff1a;Tilt Correction Method of Pointer Meter Based on Deep Learning 周登科、杨颖、朱杰、王库.基于深度学习的指针式仪表倾斜校正方法[J].计算机辅助设计与图形学学报, 2020, 32(12):9.DOI:10.3724…

CentOS Linux 78安全基线检查

阿里云标准-CentOS Linux 7/8安全基线检查 检查项类别描述加固建议等级密码复杂度检查身份鉴别检查密码长度和密码是否使用多种字符类型编辑/etc/security/pwquality.conf&#xff0c;把minlen(密码最小长度)设置为8-32位&#xff0c;把minclass(至少包含小写字母、大写字母、数…

代码随想录训练营day25| 216.组合总和III 17.电话号码的字母组合

TOC 前言 代码随想录算法训练营day25 一、Leetcode 216.组合总和III 1.题目 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9 每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组…

【Java】智慧工地SaaS平台源码:AI/云计算/物联网/智慧监管

智慧工地是指运用信息化手段&#xff0c;围绕施工过程管理&#xff0c;建立互联协同、智能生产、科学管理的施工项目信息化生态圈&#xff0c;并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分析&#xff0c;提供过程趋势预测及专家预案&#xff0c;实现工程…

《强化学习:原理与Python实战》——可曾听闻RLHF

前言&#xff1a; RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff0c;人类反馈强化学习&#xff09;是一种基于强化学习的算法&#xff0c;通过结合人类专家的知识和经验来优化智能体的学习效果。它不仅考虑智能体的行为奖励&#xff0c;还融合了人类专家…

kafka安装说明以及在项目中使用

一、window 安装 1.1、下载安装包 下载kafka 地址&#xff0c;其中官方版内置zk&#xff0c; kafka_2.12-3.4.0.tgz其中这个名称的意思是 kafka3.4.0 版本 &#xff0c;所用语言 scala 版本为 2.12 1.2、安装配置 1、解压刚刚下载的配置文件&#xff0c;解压后如下&#x…

【机器学习】处理不平衡的数据集

一、介绍 假设您在一家给定的公司工作&#xff0c;并要求您创建一个模型&#xff0c;该模型根据您可以使用的各种测量来预测产品是否有缺陷。您决定使用自己喜欢的分类器&#xff0c;根据数据对其进行训练&#xff0c;瞧&#xff1a;您将获得96.2%的准确率&#xff01; …

PyTorch翻译官网教程-PROFILING YOUR PYTORCH MODULE

官网链接 Profiling your PyTorch Module — PyTorch Tutorials 2.0.1cu117 documentation 分析pytorch模块 PyTorch包含一个分析器API&#xff0c;用于识别代码中各种PyTorch操作的时间和内存成本。分析器可以很容易地集成到代码中&#xff0c;结果可以作为表格打印或以JSON…

Integer中缓存池讲解

文章目录 一、简介二、实现原理三、修改缓存范围 一、简介 Integer缓存池是一种优化技术&#xff0c;用于提高整数对象的重用和性能。在Java中&#xff0c;对于整数值在 -128 到 127 之间的整数对象&#xff0c;会被放入缓存池中&#xff0c;以便重复使用。这是因为在这个范围…

爬虫百度返回“百度安全验证”终极解决方案

这篇文章也可以在我的博客查看 爬不了啊&#xff01;&#xff01; 最近一哥们跟我说百度爬虫爬不了 弹出&#xff1a;“百度安全验证”&#xff0c;“网络不给力&#xff0c;请稍后重试” 说到爬虫&#xff0c;这里指的是Python中最常用的requests库 我说怎么爬不了了&#x…