# backend_manage_web

**Repository Path**: jaqea/backend_manage_web

## Basic Information

- **Project Name**: backend_manage_web
- **Description**: 后台管理界面
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2020-09-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# backend_manage_web

[backend_manage_web](#backend_manage_web)

- [项目目录结构](#%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84)
- [全局配置](#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE)
  - [.eslintrc.js](#eslintrcjs)
  - [.prettierrc.js](#prettierrcjs)
  - [.commitlintrc.js](#commitlintrcjs)
  - [aliasPath.js](#aliaspathjs)
  - [config-overrides.js](#config-overridesjs)
  - [setupProxy.js](#setupproxyjs)
- [样式管理](#%E6%A0%B7%E5%BC%8F%E7%AE%A1%E7%90%86)
  - [base.js](#basejs)
  - [全局样式](#%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F)
- [接口管理](#%E6%8E%A5%E5%8F%A3%E7%AE%A1%E7%90%86)
  - [base.js](#basejs-1)
  - [modules](#modules)
- [界面管理](#%E7%95%8C%E9%9D%A2%E7%AE%A1%E7%90%86)
- [路由设计](#%E8%B7%AF%E7%94%B1%E8%AE%BE%E8%AE%A1)
- [状态管理](#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86)
  - [configStore.js](#configstorejs)
  - [modules](#modules-1)
- [Saga 中间件](#saga-%E4%B8%AD%E9%97%B4%E4%BB%B6)
  - [modules](#modules-2)
- [注意事项](#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9)
- [开发流程](#%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B)
- [联系我们](#%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC)

成都大学计算机学院官网后台管理界面。

所用技术：

- 使用**React.js**作为编码语言。
- 使用**Antd**组件进行页面编写。
- 使用**Less**进行样式编写。
- 使用**React-router4**管理路由。
- 使用**React-Redux+Immutable.js**管理数据。
- 使用**React-Saga**中间件处理异步操作。
- 使用**Axios**进行服务端交互。
- 使用**Eslint+Airbub、Prettier、Commitlint**配置规范代码。

## 项目目录结构

```cmd
|-- backend_manage_web
    |-- .commitlintrc.js                    # commitlint配置文件
    |-- .eslintrc.js                    # eslint配置文件
    |-- .gitignore                     # git忽略文件
    |-- .prettierrc.js                  # prettier配置文件
    |-- aliasPath.js                    # 路径别名
    |-- config-overrides.js               # 全局配置文件
    |-- package.json
    |-- README.md
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- logo192.png
    |   |-- logo512.png
    |   |-- manifest.json
    |   |-- robots.txt
    |-- src
        |-- BaseComponent.js                    # 封装的基类组件
        |-- index.jsx                    # 入口组件
        |-- setupProxy.js                    # 跨域配置
        |-- api                    # API接口
        |   |-- base.js                    # 环境域名配置
        |   |-- modules                    # 模块接口
        |       |-- carouselSetting.js                    # 轮播图设置
        |       |-- friendshipLinkSetting.js                    # 友情链接设置
        |       |-- homeModuleSetting.js                    # 首页模块设置
        |       |-- homeSetting.js                    # 首页设置
        |       |-- index.js                    # 入口文件
        |       |-- logoTitle.js                 # logo与标题
        |       |-- menuSetting.js                # 菜单设置
        |       |-- moduleManage.js                # 模块管理
        |       |-- moduleSetting.js                # 模块设置
        |       |-- user.js                    # 用户
        |       |-- userManage.js                    # 用户管理
        |-- assets
        |   |-- styles                    # 全局样式
        |       |-- common.less                    # 入口文件
        |       |-- layout.less                    # 布局样式
        |       |-- mixin.less                    # 全局混合
        |       |-- variable.less                  # 全局样式变量
        |       |-- theme                    # antd主题配置
        |           |-- base.js                    # antd主题样式配置文件
        |-- components                    # 全局组件
        |   |-- AuthRoute                  # 路由权限组件
        |       |-- index.jsx
        |-- pages                    # 页面
        |   |-- index.js                  # 组件按需加载入口文件
        |   |-- Loadable.js                    # 封装按需加载
        |   |-- App                    # app
        |   |   |-- index.jsx
        |   |-- Home                    # 首页
        |   |   |-- Home.less                    # 首页样式
        |   |   |-- index.jsx
        |   |   |-- CarouselSetting                    # 轮播图设置
        |   |   |   |-- index.jsx
        |   |   |-- FriendshipLink                    #友情链接设置
        |   |   |   |-- index.jsx
        |   |   |-- HomeModuleSetting                    # 首页模块设置
        |   |   |   |-- index.jsx
        |   |   |-- HomeSetting                    # 首页设置
        |   |   |   |-- index.jsx
        |   |   |-- LogoTitle                    # logo与标题
        |   |   |   |-- index.jsx
        |   |   |-- MenuSetting                    # 菜单设置
        |   |   |   |-- index.jsx
        |   |   |-- ModuleManage                    # 模块管理
        |   |   |   |-- index.jsx
        |   |   |-- ModuleSetting                    # 模块设置
        |   |   |   |-- index.jsx
        |   |   |-- UserManage                    # 用户管理
        |   |       |-- index.jsx
        |   |-- Loading                    # 路由加载组件
        |   |   |-- index.jsx
        |   |-- Login                    # 登录页面组件
        |   |   |-- index.jsx
        |   |   |-- login.less
        |   |-- NotFound                    # 404页面组件
        |       |-- index.jsx
        |-- redux
        |   |-- configStore.js                    # 全局状态配置文件
        |   |-- modules                    # 模块状态
        |       |-- carouselSetting.js                    # 轮播图设置
        |       |-- friendshipLinkSetting.js                    # 友情链接设置
        |       |-- homeModuleSetting.js                    # 首页模块设置
        |       |-- homeSetting.js                    # 首页设置
        |       |-- index.js                    # 入口文件
        |       |-- logoTitle.js                    # logo与标题
        |       |-- menuSetting.js                    # 菜单设置
        |       |-- moduleManage.js                    # 模块管理
        |       |-- moduleSetting.js                    # 模块设置
        |       |-- user.js                    # 用户
        |       |-- userManage.js                    # 用户管理
        |-- routes                    # 全局路由
        |   |-- homeRoute.js                    # 首页
        |   |-- index.js                    # 入口文件
        |   |-- loginRoute.js                    # 登录
        |   |-- notFoundRoute.js                    # 404
        |-- sagas                    # saga中间件
        |   |-- index.js                    # 入口文件
        |   |-- modules                    # 模块
        |       |-- carouselSetting.js                    # 轮播图设置
        |       |-- friendshipLinkSetting.js                    # 友情链接设置
        |       |-- homeModuleSetting.js                    # 首页模块设置
        |       |-- homeSetting.js                    # 首页设置
        |       |-- logoTitle.js                    # logo标题
        |       |-- menuSetting.js                    # 菜单设置
        |       |-- moduleManage.js                    # 模块管理
        |       |-- moduleSetting.js                    # 模块设置
        |       |-- user.js                    # 用户
        |       |-- userManage.js                    # 用户管理
        |-- utils                    # 全局方法
            |-- http.js                    # axios封装拦截器
```

## 全局配置

### .eslintrc.js

ESLint 基础配置

```js
// .eslintrc.js
const aliasPath = require("./aliasPath"); // 引入路径别名

module.exports = {
  env: {
    browser: true,
    es2020: true,
    es6: true,
  },
  parser: "babel-eslint",
  extends: ["eslint:recommended", "plugin:react/recommended", "airbnb"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    // sourceType: "module",
  },
  settings: {
    "import/resolver": {
      webpack: {
        config: {
          resolve: {
            alias: aliasPath, //bug
          },
        },
      },
    },
  },
  plugins: ["react", "prettier", "babel"],
  rules: {
    // "comma-dangle": ["error", "never"],
    "prettier/prettier": "error",
    quotes: [1, "double"],
  },
};
```

### .prettierrc.js

Prettier 格式化规则配置

```js
// .prettierrc.js
module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  // useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  // singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号
  // semi: false, //行位是否使用分号，默认为true
  trailingComma: "all", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  // bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  // parser: "babylon", //代码的解析引擎，默认为babylon，与babel相同。
};
```

### .commitlintrc.js

commitlint 基础配置，用于检查 `git commit -m ''` 格式。

```js
// .commitlintrc.js
module.exports = {
  /* type(scope?): subject  例子：feat(server): test */
  extends: ["@commitlint/config-conventional"], // 使用预设的配置
  rules: {
    "type-enum": [
      2,
      "always",
      ["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"],
    ], // 改变预设中的提交类型
    "type-case": [2, "always", "lower-case"], // 提交类型必须使用小写
    "type-empty": [2, "never"], // type不能为空
    // 'header-max-length': [2, 'always', 5], // header内容的最大长度为5
    // 'subject-min-length': [2, 'always', 1], // subject内容的最小长度为1
    // 'body-max-length': [2, 'always', 10], // body内容的最大长度为10
    // 'footer-max-length': [2, 'always', 5], // footer内容的最大长度为5
  },
};
```

`commit`的格式要求如下

```cmd
Type(<scope>): <subject>

<body>

<footer>

# Type 字段包含:
#  feat：新功能（feature）
#  fix：修补bug
#  docs：文档（documentation）
#  style： 格式（不影响代码运行的变动）
#  refactor：重构（即不是新增功能，也不是修改bug的代码变动）
#  test：增加测试
#  chore：构建过程或辅助工具的变动
# scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等。
# subject是 commit 目的的简短描述，不超过50个字符
# Body 部分是对本次 commit 的详细描述，可以分成多行
# Footer用来关闭 Issue或以BREAKING CHANGE开头，后面是对变动的描述、
#  以及变动理由和迁移方法
```

例子：

```cmd
git commit -m 'feat: 增加用户搜搜功能'
git commit -m 'fix: 修复用户检测无效的问题'
```

### aliasPath.js

如果开发过程中有需要配置的路径别名，请按照如下格式注入。

```js
// aliasPath.js
const path = require("path");

module.exports = {
  "@": path.resolve(__dirname, "src"),
  "@api": path.resolve(__dirname, "src/api"),
  "@assets": path.resolve(__dirname, "src/assets"),
  "@components": path.resolve(__dirname, "src/components"),
  "@routes": path.resolve(__dirname, "src/routes"),
  "@redux": path.resolve(__dirname, "src/redux"),
  "@sagas": path.resolve(__dirname, "src/sagas"),
  "@utils": path.resolve(__dirname, "src/utils"),
};
```

### config-overrides.js

全局配置：

- 路径别名
- antd 按需加载：配置后不用在入口文件中导入 `import 'antd/dist/antd.css';`
- antd 主题样式配置
- 注入全局样式

```js
// config-overrides.js
const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addLessLoader,
} = require("customize-cra");
const path = require("path");
const aliasPath = require("./aliasPath");
const antdThemeOption = require("./src/assets/styles/theme/base.js");

module.exports = override(
  // 路径别名
  addWebpackAlias({
    ...aliasPath,
  }),
  // antd 按需加载
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: antdThemeOption, // 主题样式
  }),
  (config) => {
    const loaders = config.module.rules.find((rule) =>
      Array.isArray(rule.oneOf),
    ).oneOf;
    loaders[7].use.push({
      loader: "style-resources-loader",
      options: {
        patterns: path.resolve(__dirname, "src/assets/styles/common.less"),
      },
    });
    return config;
  },
);
```

### setupProxy.js

跨域请求配置

```js
// setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
const base = require("./api/base");

module.exports = (app) => {
  let target;
  if (process.env.NODE_ENV === "development") target = base.development;
  else if (process.env.NODE_ENV === "debug") target = base.debug;
  else if (process.env.NODE_ENV === "production") target = base.production;

  app.use(
    createProxyMiddleware("/api", {
      target,
      secure: false,
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/",
      },
    }),
  );
};
```

## 样式管理

### base.js

antd 主题样式配置，需要改变相应主题只需在该文件中配置，默认内置样式如下：

```js
// /src/assets/theme/base.js
module.exports = {
  "@primary-color": "#1890ff", // 全局主色 1890ff
  //   "@link-color": "#1890ff", // 链接色
  //   "@success-color": "#52c41a", // 成功色
  //   "@warning-color": "#faad14", // 警告色
  //   "@error-color": "#f5222d", // 错误色
  //   "@font-size-base": "14px", // 主字号
  //   "@heading-color": "rgba(0, 0, 0, 0.85)", // 标题色
  //   "@text-color": "rgba(0, 0, 0, 0.65)", // 主文本色
  //   "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // 次文本色
  //   "@disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
  //   "@border-radius-base": "2px", // 组件/浮层圆角
  //   "@border-color-base": "#d9d9d9", // 边框色
  //   // 浮层阴影
  //   "@box-shadow-base": `0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08)
  // , 0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
};
```

### 全局样式

全局样式（variable.less、mixin.less、layout.less）在 `common.js` 里导入后，就不用在其它样式文件中 `@import 'xxx.less';` ，直接引用即可。例如：

```less
div {
  color: @color;
}
```

- variable.less：全局样式变量
- mixin.less：全局混合
- layout.less：全局布局样式

如果想要导入其它全局样式，在该目录下创建文件再导入`common.js` 中即可。例如：

```less
@import "./xxx.less";
```

## 接口管理

### base.js

用于配置各个环境下的域名

```js
// /src/api/base.js

module.exports = {
  production: "https://123123123.com/", // 生产环境
  development: "http://jsonplaceholder.typicode.com", // 开发环境
  debug: "https://12312.com", // 测试环境
};
```

### modules

各个模块的接口，例如：

```js
import service from "@/utils/http";

const carouselSetting = {
  getCarouselList() {
    return service.get("/carousel");
  },
  // ...其它
};

export default carouselSetting;
```

直接从该目录下的 `index.js` 中引入调用即可。例如：

```js
import { carouselSettingApi } from "@api/modules";
carouselSettingApi.getCarouselList();
```

## 界面管理

界面组件均由`index.jsx`构成，若需要引入私有样式/私有方法，直接在组件文件夹目录下创建`组件名称.less` 文件/`组件名称.js`，然后在对应`index.jsx`中引入即可。例如：

```less
// Home.less
@color: green;
```

```js
// Home.js
const homePrivateFnc = () => "homePrivateFnc！";
export { homePrivateFnc };
```

```jsx
// index.jsx
...
import "./Home.less";
import { homePrivateFnc } from "./Home.js";
...
```

若需要引入私有组件，直接在组件文件夹目录下的`components`文件夹中存放，若不存在直接创建即可。例如：

```cmd
|-- Home
   |-- index.jsx
   |-- Home.less
   |-- Home.js
   |-- components
       |-- HomeItem
          |-- index.jsx
          ...
```

## 路由设计

路由设计图大致如下：

![image-20200828214902143](https://s1.ax1x.com/2020/08/29/d781aV.png)

路由配置基本如下（若需要修改，直接修改）：

```js
// homeRoute.js
import {
  Home,
  CarouselSetting,
  ...
} from "@/pages";

const homeRoutes = {
  path: "/home",
  component: Home, // 页面组件
  backUrl: "/login", // 权限不足，重定向路径
  role: ["user"], // 路由权限，例如这里需要role为“user”的用户才能访问
  children: [ //子路由
    {
      title: "模块设置",
      path: "/home/moduleSetting",
      component: ModuleSetting,
      backUrl: "/login",
      role: ["user"],
    },
    ...
  ],
};

export default homeRoutes;
```

若新建路由，则必须在 “/src/routes/index.js” 中注入。

## 状态管理

### configStore.js

全局状态配置

```js
// configStore.js
// 配置store 环境 中间件
import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import rootSaga from "@sagas/";
import rootReducer from "./modules";

let finalCreateStore;
const saga = createSagaMiddleware();

if (
  process.env.NODE_ENV !== "production" &&
  window.__REDUX_DEVTOOLS_EXTENSION__
) {
  finalCreateStore = compose(
    applyMiddleware(saga),
    window.__REDUX_DEVTOOLS_EXTENSION__(), // 配置启用chrome插件：Redux Devtools
  )(createStore);
} else {
  finalCreateStore = applyMiddleware(saga)(createStore);
}

export default function configureStore(initState) {
  const store = finalCreateStore(rootReducer, initState);
  if (process.env.NODE_ENV !== "production" && module.hot) {
    module.hot.accept("./modules", () =>
      store.replaceReducer(require("./modules")),
    );
  }
  saga.run(rootSaga);
  return store;
}
```

### modules

状态模块，均以 `模块名称.js` 命名，且 action types、action async types（执行异步操作）、action creators 和 reducer 均放在其中，并将 reducer 在入口文件 “/src/redux/modules/index.js” 中合并。例如：

```js
// carouselSetting.js
import Immutable from "immutable";
// action types
const carouselSettingTypes = {};
// 进行异步的 action async types
const carouselSettingTypesAsync = {};
// action creators
const carouselSettingActions = {};

// 初始值
const initState = Immutable.fromJS({});

// reducer
const carouselSettingReducer = (state = initState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export {
  carouselSettingTypes,
  carouselSettingTypesAsync,
  carouselSettingActions,
  carouselSettingReducer,
};
```

```js
// /src/redux/modules/index.js
import { carouselSettingReducer } from "./carouselSetting";
...
const rootReducer = combineReducers({
  carouselSettingReducer,
    ...
});

export default rootReducer;

```

## Saga 中间件

### modules

每个状态模块均对应一个 sagas 中间件，且均以 `模块名称.js` 命名；将需要执行的异步操作写在其中，并在入口文件 “/src/sagas/index.js” 中合并。例如：

```js
// src/sagas/modules/user.js
import { userTypesAsync, userTypes } from "@redux/modules/user";
import { delay, takeEvery, put } from "redux-saga/effects";
import { userApi } from "@api/modules";

function* login() {
  // yield delay(1500);
  const res = yield userApi.login();
  console.log(res);
  yield put({
    type: userTypes.login,
    payload: {
      user: {
        id: 1,
        name: `用户${Math.floor(Math.random() * 100)}`,
        role: "user",
      },
    },
  });
}

function* watchUserSaga() {
  yield takeEvery(userTypesAsync.loginAsync, login);
}

export { watchUserSaga };
```

```js
// /src/sagas/index.js
import { watchUserSaga } from "./modules/user";
...

function* rootSaga() {
  yield all([
    watchUserSaga(),
      ...
  ]);
}

export default rootSaga;
```

## 注意事项

- 组件名称首字母必须大写，组件均由 “组件名称”文件夹 + `index.jsx` 表示。例如：

  ```cmd
  // Home 组件
  |-- Home
     |-- index.jsx
  ```

- 全局组件均写在 “/src/components/” 目录下。

- 考虑到 antd 使用 Less 进行开发，因此样式尽量都用 Less 进行编写。

- “/src/pages/” 下的路由组件必须在 “/src/pages/index.js” 中注入。例如：

  ```js
  // pages/index.js
  import Loadable from "./Loadable";
  const xxx = Loadable(() => import("./xxx"));
  export { xxx };
  ```

  若想修改路由懒加载配置，可直接在 “/src/pages/Loadable.js” 中进行修改，也可在注入的时候添加配置对象 `options` 。

  ```js
  // Loadable.js
  import Loadable from "react-loadable";
  import Loading from "./Loading";

  export default function LoadableCom(component, options = {}) {
    return Loadable({
      loader: component,
      loading: Loading,
      delay: 200,
      timeout: 1000,
      ...options,
    });
  }
  ```

- 公共方法均写在 “/src/utils/” 目录下；目前的封装的 axios 拦截器（“/src/utils/http.js”）暂不完善，需与后台进一步协商。

- 均用 Immutable.js 处理数据流，切忌混用 immutable 与原生 JS，需要符合如下模式：

  - 全局 state 必须是 immutable。
  - 组件内部 state 如果需要提交到 store 的，必须是 immutable。
  - view 提交到 action 中的数据必须是 immutable。
  - Action 提交到 reducer 中的数据必须是 immutable。
  - reducer 中最终处理 state 必须是以 immutable 的形式处理并返回。
  - 与服务端交互中返回的 callback 统一封装，第一时间转换成 immutable 数据。

- 为减少组件中不必要的渲染，这里通过 Immutable 统一处理组件中的 `shouldComponentUpdate` ，封装了一层 component 的基类 BaseComponent，("/src/BaseComponent.js")，因此组件编写尽量以继承基类的形式。例如：

  ```jsx
  import React from "react";
  import BaseComponent from "@/BaseComponent";

  class XXX extends BaseComponent {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      return ();
    }
  }

  export default XXX;
  ```

- 需要在本地 VS Code 编辑器安装 [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)、[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 插件。

- 尽量安装 Chrome 插件：[React Developer Tools](https://chrome.google.com/webstore/detail/fmkadmapgofadopljbjfkapdkoienihi)、[Redux Devtools](https://github.com/zalmoxisus/redux-devtools-extension) 。

## 开发流程

1. 先将源仓库 `Fork` 到个人仓库，然后`clone`到本地。

   ```cmd
   git clone 个人仓库地址
   ```

2. `cd` 到根目录 “/backend_manage_web"，安装依赖。

   ```cmd
   npm install / yarn install
   ```

3. 运行，进行开发。

   ```cmd
   npm run serve / yarn serve
   ```

4. 代码提交到远程个人仓库。

   ```cmd
   // 提交本地更改
   git add .
   git commit -m '描述信息'
   // 推送到远程个人仓库
   git push ...
   ```

5. 通过 Pull Request 提交请求给源仓库，等待合并。

## 联系我们

在开发过程中，若存在错误或者困惑的，希望多多指出。

我们是成都大学计算机学院的一群学生，希望为这个项目作贡献的话就来加入我们吧。

![image-20200828214902143](https://s1.ax1x.com/2020/08/29/d7GQQH.png)