# Bicycle-Manage-System

**Repository Path**: chen243/Bicycle-Manage-System

## Basic Information

- **Project Name**: Bicycle-Manage-System
- **Description**: 基于React + AntDesign的后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-05-31
- **Last Updated**: 2022-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Bicycle-Manage-System

#### 项目介绍

基于 React 全家桶 + AntDesign 的后台管理系统

#### 软件架构

1. IDE: VSCode

#### 安装教程

#### 脚手架安装步骤

1. `npm install -g create-react-app` 安装脚手架
2. `create-react-app myProject` 创建项目文件夹
3. `cd myProject` 进入项目文件夹
4. `npm start` 启动项目

#### Yarn 使用

0. `npm install -g yarn` 安装 yarn
1. `yarn init` 初始化
1. `yarn add [package]` 添加依赖的包
1. `yarn remove [package]` 移除依赖的包
1. `yarn/yarn install` 安装项目全部的依赖

> 如果要使用 yarn 在项目中安装包的话，就在创建脚手架前先全局安装 yarn,这样在安装脚手架的时候就可以出现 yarn 的配置项，也就是可以使用 yarn 进行安装依赖包

#### 项目工程搭建

#### 安装所需的插件

1. 安装`react-router`和`axios`
2. 安装`AntD`
3. 暴露`webpack`配置文件
4. 安装`less-loader`
5. 修改`less-loader`

```js
yarn add react-router-dom axios less-loader antd
```

#### 显示隐藏的文件，方便修改配置信息

1. 运行命令：`yarn eject`

> 在运行此命令之前要确保项目没有修改的地方，否则会报错，错误提示如下图所示：

![错误提示](https://raw.githubusercontent.com/Believel/MarkdownPhotos/master/baseComponent/eject%E9%94%99%E8%AF%AF%E4%BF%A1%E6%81%AF.png)

> 正常信息提示如下图所示：

![正常提示](https://raw.githubusercontent.com/Believel/MarkdownPhotos/master/baseComponent/eject%E6%AD%A3%E5%B8%B8.png)

#### 使用 antd

> antd 主题是根据 less 开发的

1. 方法 1(不推荐)

```js
import React, { Component } from "react";
import Button from "antd";
import "antd/dist/antd.css";
import "./App.css";

class App extends Component {
    render() {
        return (
            <div className="App">
                <Button type="primary">Button</Button>
            </div>
        );
    }
}

export default App;
```

2. 使用`babel-plugin-import`插件，按需加载 css

-   安装`yarn add babel-plugin-import`
-   在`webpack.config.prod.js`和`webpack.config.dev.js`文件中修改如下

```js
 {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // 添加antd库，支持更换主题样式
              plugins: [
                ['import', [{
                  libraryName : 'antd',
                  style: true
                }]]
              ],
              compact: true,
            },
          },
```

#### 修改配置文件，支持 less 文件

> 以上安装之后可能会报错，说 less 模块没有安装

1. 安装 less: `yarn add less`, 但是如果安装成功之后还报错的话就降级安装：`yarn add less@^2.7.3`,因为从 2.7.3 到最新版本的 3.0.2 发生了很大的变化。
2. 修改配置文件(webpack.config.prod.js 和 webpack.config.dev.js)

```js
// 添加一个匹配less文件的loader
{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    {
      loader:require.resolve('less-loader'),
      options: {
        modules: false,
        // 修改antd的主题
        modifyVars: {
            "@primary-color": "#f9c700"
        }
      }
    }
  ],
},
```

#### 配置不同的环境变量

> 在项目中可以定义内置变量(`NODE_ENV`, `PUBLIC_URL`),以及以 `REACT_APP_`开头的任何环境变量

##### 第一种方式配置(使用第三方插件)

> cross-env 能跨平台的设置及使用环境变量，大多数情况下，在 window 平台下使用类似于:NODE_ENV=production 的命令会卡住，windows 平台与 POSIX 在使用命令行时有许多区别（例如在 POSIX，使用\$ENV_VAR,在 windows，使用%ENV_VAR%。。。）

1. 安装: `npm i --save-dev cross-env`

2. 在 npm 脚本(多是 package.json)里这么配置

    ```js
    {
      "scripts": {
        "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
      }
    }
    ```

3. 运行：`npm run build`这样 NODE_ENV 便设置成功，无需担心跨平台问题

4. 这样运行之后就可以得到`process.env.NODE_ENV`的值是`production`

#### .env.local 文件的使用说明

> .env.local 中的内容可以修改 wenpack 配置中的值，通过例如 process.env.PORT 使用（其中 PORT 是你再.env.local 中定义的变量名字)

#### React Router 4.0

##### 安装

`npm install react-router-dom`

`yarn add react-router-dom`

##### 核心用法

1. HashRouter 和 BrowserRouter

    > 只能有一个根节点

2. Route 中的 path、exact、component、render

3. NavLink 和 Link

4. Switch

##### react-router 跳转路由传参

1. 首先指定一个带参数的路由页面

```js
import { HashRouter as Router, Route, Switch } from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path="/user/:name" component={UserPage} />
            </Router>
        );
    }
}
```

2. Link 组件实现跳转

```js
import { Link } from "react-router-dom";
<Link to="/user/sam">用户</Link>;
```

3. histroy 实现跳转

```js
this.props.history.push(`/user/${item.name}`);
```

4. 获取传值

```js
componentDidMount(){
    let name = this.props.match.params.name;
    if(name){
        // TODO
    }
}
```

     ​

### Redux

-   单向数据流：从父组件流向子组件，兄弟组件无法共享数据

-   State: React 中的状态，是只读对象，不可直接修改

-   Reducer:基本函数，用于对 State 的业务处理

-   Action: 普通对象，用于描述事件行为，改变 State

#### Redux 使用安装的插件

```js
yarn add redux --save
yarn add react-redux --save
```

#### Redux 集成

-   创建 Action 模块
-   创建 Reducer 模块
-   创建 Store 模块
-   通过 connect 方法将 React 组件和 Redux 连接起来
-   添加 Provider 作为项目的根组件，用于数据的存储
    ​

#### Redux 调试工具的安装

1. 在 chrome 中安装`Redux Devtools`
2. `yarn add redux-devtools-extension`