# react-app

**Repository Path**: zdwen/react-app

## Basic Information

- **Project Name**: react-app
- **Description**: react商品管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-30
- **Last Updated**: 2021-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React 商城管理系统

#### 项目相关配置

##### 非 eject 方式启用 decorator

安装改变 `create-react-app` 中 `webpack` 配置插件

```js
yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators
```

在*项目根目录*下创建 `config-overrides.js` 并写入以下内容

```javascript
const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(addDecoratorsLegacy());
```

修改 `package.json` 文件中 `scripts` 脚本

```json
  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}
```

配置之后要重新启动，包括下面的配置

```js
yarn start
```

##### 非 eject 配置文件路径

配置 config-overrides.js

```
const { override, addWebpackAlias} = require('customize-cra');
const path = require('path')
 module.exports = override(
   addWebpackAlias({
     assets: path.resolve(__dirname, './src/assets'),
     components: path.resolve(__dirname, './src/components'),
     pages: path.resolve(__dirname, './src/pages'),
     common: path.resolve(__dirname, './src/common'),
        "@": path.resolve(__dirname, './src')
   })
);
```

#### 路由集中式管理 src/router/routes.js

通过 require.context()获取所有页面路径，进而为每个页面设置路由
给每个路由添加 id 属性，用作标记
通过路径判断是否存在子路由，给子路由添加 parent_id 属性，通过判断是否包含 parent_id 属性来判断是否为子路由
并根据 parent_id 和所有路由的 id 匹配，将子路由添加到父路由中

#### 路由鉴权 src/router/compile.js

通过判断有无 token 来判断用户是否登录
未登录状态：

```
  不需要鉴权的路由：/login,/page404可以进入，其他路径一律利用重定向跳转到404页面
  <Route path="/login" component={...}/>
  <Route path="/page404" component={...}/>
  <Redirect to="/login" />
```

登录状态下：

```
  合法路由进行相应跳转，不合法则利用重定向进入到404页面
  <Route path={...} component={...}>
  ...
  <Redirect to="/page404">
```

#### 基础布局 src/layout/index.js

#### 导航栏动态渲染 src/layout/menu.js

每个页面组件在创建的时候可以绑定 meta 属性,通过判断有无 meta 属性来判断选项是否需要渲染在导航栏中

| 属性  | 类型                   |
| ----- | ---------------------- |
| name  | string                 |
| icon  | string                 |
| order | number(可排序数值类型) |

```
  meta:{
    name:"",//用作导航栏菜单选项名称渲染
    icon:"",//选项图标
    order:""//用于导航栏菜单排序，不给的话就默认根据项目目录顺序
  }
```