feat: start ecommerce

5.react/8.ecommerce/README.md

@@ -0,0 +1,175 @@
+## 拉钩电商项目说明
+
+### 1. 技术栈
+
+#### 1.1 客户端
+
+- 脚本：TypeScript
+- 前端框架：React
+- 路由管理：React-router-dom
+- 用户界面：Antd
+- 全局状态管理：Redux
+- 异步状态更新：redux-saga
+- 路由状态同步：connected-react-router
+- 网络请求：Axios
+- 调试工具：redux-devtools-extension
+
+#### 1.2 服务端
+
+- 脚本：Node.js
+- 数据库：Mongodb
+- 数据库可视化：Robo 3T
+
+### 2. 搭建开发环境 (服务端)
+
+#### 2.1 安装 mongodb 数据库 (Mac)
+
+1. 安装 [homebrew](https://brew.sh/index_zh-cn)
+
+   Homebrew 是 mac 系统中的软件包管理器
+
+   ```bash
+   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+   ```
+
+2. 添加 mongodb 仓库源
+
+   ```bash
+   brew tap mongodb/brew
+   ```
+
+3. 安装 mongodb
+
+   安装前确保系统已经安装 xcode 命令行编译开发工具
+
+   ```bash
+   xcode-select --install
+   ```
+
+   ```bash
+   brew install mongodb-community
+   ```
+
+4. 启动 mongodb
+
+   ```bash
+   brew services run mongodb-community
+   ```
+
+5. 停止 mongodb
+
+   ```bash
+   brew services stop mongodb-community
+   ```
+
+6. 文件位置
+
+   1. 数据库配置文件：/usr/local/etc/mongod.conf
+   2. 数据库文件默认存放位置：/usr/local/var/mongodb
+   3. 日志存放位置：/usr/local/var/log/mongodb/mongo.log
+
+#### 2.2 安装 mongodb 数据库 (Windows)
+
+<img src="./mongodb/1.png" width="70%" align="left"/>
+
+<img src="./mongodb/2.png" width="70%" align="left"/>
+
+<img src="./mongodb/3.png" width="70%" align="left"/>
+
+<img src="./mongodb/4.png" width="70%" align="left"/>
+
+<img src="./mongodb/5.png" width="70%" align="left"/>
+
+<img src="./mongodb/6.png" width="70%" align="left"/>
+
+<img src="./mongodb/7.png" width="70%" align="left"/>
+
+<img src="./mongodb/8.png" width="70%" align="left"/>
+
+<img src="./mongodb/9.png" width="70%" align="left"/>
+
+<img src="./mongodb/10.png" width="70%" align="left"/>
+
+<img src="./mongodb/11.png" width="70%" align="left"/>
+
+<img src="./mongodb/12.png" width="70%" align="left"/>
+
+#### 2.3 数据库可视化 Robo 3T
+
+[下载地址](https://robomongo.org/download)
+
+#### 2.4 启动服务器端应用程序
+
+1. Mac 用户将服务器端应用程序文件夹拖拽到终端中，windows 用户打开服务器端应用程序文件夹，按住 shift 同时单击鼠标右键，选择在此处打开命令行工具 (cmd 或者 powershell)
+2. 执行 `npm install` 命令安装程序依赖文件
+3. 执行 `npm start` 命令启动服务器端应用程序，服务器端应用程序默认监听 80 端口
+
+### 3. 搭建开发环境 (客户端)
+
+#### 3.1 创建项目并安装依赖
+
+1. 使用 create-react-app 脚手架创建 react 项目
+
+   `npx create-react-app ecommerce-front --template typescript `
+
+2. 安装项目依赖
+
+   `npm install antd axios moment zustand react-router-dom  connected-react-router  @types/react-router-dom`
+
+3. antd CSS 使用 CDN
+
+   https://cdn.bootcdn.net/ajax/libs/antd/4.8.3/antd.min.css
+
+#### 3.2 配置服务器端 API 请求地址
+
+在项目的根目录下新建 .env 文件，并在文件中添加以下内容：
+
+```html
+REACT_APP_PRODUCTION_API_URL=http://fullstack.net.cn/api
+REACT_APP_DEVLOPMENT_API_URL=http://localhost/api
+```
+
+create-react-app 脚手架中内置了 dotenv，允许我们在 React 项目中配置环境变量，但环境变量的名字必须以 REACT*APP* 开头。
+
+REACT_APP_PRODUCTION_API_URL： 生产环境的服务器端 API 地址
+
+REACT_APP_DEVLOPMENT_API_URL：开发环境的服务器端 API 地址
+
+在项目中可以通过 `process.env.REACT_APP_DEVLOPMENT_API_URL` 方式进行访问，但是这样会有弊端，其一是代码过长写起来不方便，其二是如果在代码中将环境写死，当切换环境时改起来也不方便。
+
+解决方案就是将 API 地址写入配置中，根据环境决定使用哪个 API 地址
+
+```javascript
+export let API: string
+
+if (process.env.NODE_ENV === "development") {
+  API = process.env.REACT_APP_DEVLOPMENT_API_URL!
+} else {
+  API = process.env.REACT_APP_PRODUCTION_API_URL!
+}
+```
+
+#### 3.3 安装 chrome 扩展
+
+<img src="./images/3.png" align="left"/>
+
+React Developer Tools：检查 React 组件层次结构，在页面上显示 React 组件。
+
+<img src="./images/4.jpg" align="left"/>
+
+Redux DevTools：监测 Store 中状态的变化
+
+<img src="./images/5.jpg" align="left"/>
+
+```react
+import { composeWithDevTools } from "redux-devtools-extension"
+
+export const store = createStore(
+  rootReducer,
+  composeWithDevTools(applyMiddleware(...middlewares))
+)
+```
+
+```html
+
+```

5.react/8.ecommerce/ecommerce-front/.env

@@ -0,0 +1,2 @@
+REACT_APP_PRODUCTION_API_URL=http://fullstack.net.cn/api
+REACT_APP_DEVELOPMENT_API_URL=http://localhost/api

5.react/8.ecommerce/ecommerce-front/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

5.react/8.ecommerce/ecommerce-front/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

5.react/8.ecommerce/ecommerce-front/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "ecommerce-front",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.96",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "antd": "^5.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.5.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}