前期准备

技术栈

客户端

• 前端框架：react
• 路由管理：react-router-dom
• 用户界面：antd
• 全局状态管理：redux
• 异步状态更新：redux-saga
• 网络请求：axios
• 状态调试工具：redux-devtools-extension

服务端

• 脚本：node.js
• 数据库：mongodb
• 数据库可视化：mongodb-compass

搭建开发环境(服务端)

安装 mongodb 数据库

Mac

• 安装 homebrew
  • Homebrew 是mac 系统中的软件包管理工具

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    PS：安装失败解决方案一

    1. 打开网站： https://www.ipaddress.com/
    2. 查询一下 raw.githubusercontent.com 对应的 IP 地址

    

    1. 替换系统的 host 文件

    

    1. 重启终端 重新运行安装命令即可

PS：解决方案二 https://www.jianshu.com/p/e0471aa6672d?utm_campaign=hugo

• 添加 mongodb 仓库源

  brew tap mongodb/brew

• 安装 mongodb

  • 安装前确保系统已经安装 xcode 命令行编译开发工具

    xcode-select --install

    brew install mongodb-community

• 启动 mongodb

  brew services run mongodb-community

• 停止 mongodb

  brew services stop mongodb-community

• 文件位置

  • 数据库配置文件：/usr/local/etc/mongod.conf
  • 数据库文件默认存放位置：/usr/loacl/var/mongodb
  • 日志存放位置：/user/loaclvar/log/mongodb/mongo.log

Windows

数据库可视化 Robo 3T

下载地址

启动服务器端应用程序

搭建开发环境(客户端)

创建项目并安装依赖

• 使用 creat-react-app 脚手架创建 react 项目

  npm install -g create-react-app@4.0.3
  npm init react-app lagou-carefully-selected

• 安装项目依赖

  npm install antd@4.14.0 axios@0.21.1 moment@2.29.1 redux@4.0.5 react-redux@7.2.2 react-router-dom@5.2.0 redux-saga@1.1.3 redux-devtools-extension@2.13.9

• antd CSS 使用 CDN

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.14.0/antd.min.css"/>

  配置服务器端 API 请求地址

  create-react-app 脚手架中内置了 dotenv，允许我们在应用中通过代码的方式配置环境变量和使用环境变量。

• 在项目的根目录下新建 .env 文件，并在文件中添加以下内容

  REACT_APP_PRODUCTION_API_URL=http://fullstack.net.cn/api
  REACT_APP_DEVELOPMENT_API_URL=http://localhost/api

• 环境变量的名字必须以 REACTAPP 开头

  • REACT_APP_PRODUCTION_API_URL : 生产环境的服务器 API 地址
  • REACT_APP_DEVELOPMENT_API_URL ：开发环境的服务器 API 地址

• 在项目中可以通过 process.env.REACT_APP_DEVLOPMENT_API_URL 方式进行访问，

  • 但是这样会有弊端，其一是代码过长写起来不方便，
  • 其二是如果在代码中将环境写死，当切换环境时改起来也不方便。
  • 解决方案就是将 API 地址写入配置中，根据环境决定使用哪个 API 地址 ```javascript export let API = process.env.REACT_APP_DEVELOPMENT_API_URL

if (process.env.NODE_ENV === “production”) { API = process.env.REACT_APP_PRODUCTION_API_URL }

<a name="qcepv"></a>
### 安装 Chrome 扩展
![3 2.png](https://cdn.nlark.com/yuque/0/2021/png/1670748/1619267520631-393d0ad3-c300-42da-a408-4b9938ba6564.png#clientId=u1deb4274-99d9-4&from=ui&id=ufe0f1288&margin=%5Bobject%20Object%5D&name=3%202.png&originHeight=338&originWidth=1644&originalType=binary&size=75576&status=done&style=none&taskId=u1e91cea7-cc4a-4598-851d-baa83e90511)
- React Developer Tools：检查React组件层次结构，在页面上显示React组件。
![4.jpg](https://cdn.nlark.com/yuque/0/2021/jpeg/1670748/1619267566674-10237371-a7a5-48b7-ac0a-d883e2fdfbaf.jpeg#clientId=u1deb4274-99d9-4&from=ui&id=ud1a1d3fe&margin=%5Bobject%20Object%5D&name=4.jpg&originHeight=400&originWidth=640&originalType=binary&size=44271&status=done&style=none&taskId=u6ee9d18c-b44c-41c7-b402-5de83ae928d)
- Redux DevTools：监测 Store 中状态的变化
![5.jpg](https://cdn.nlark.com/yuque/0/2021/jpeg/1670748/1619267592627-56cfcb3c-38fb-4b2a-a66b-bac8b0a8f16e.jpeg#clientId=u1deb4274-99d9-4&from=ui&id=uc11866b4&margin=%5Bobject%20Object%5D&name=5.jpg&originHeight=400&originWidth=640&originalType=binary&size=66120&status=done&style=none&taskId=u70d8922a-4560-4fff-8de1-0675c5c159a)
```javascript
import { composeWithDevTools } from "redux-devtools-extension"
export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middlewares))
)