項目總結

1、ERP管理系統

項目環境：React+AntPro+AntDesign
負責模塊：系統框架搭建+系統登陸+基礎類模塊

1、框架搭建

一、request請求框架

採用axios和fecth兩種方式向後臺發送請求，從service層看起，

export async function acceptList(params) {
  return request(createTheURL(Config.API.ACCEPT, 'list'), {
    method: 'PUT',
    body: params,
  });
}

由於咱們大多數的API接口的前綴相同，例如/api/user/add 、/api/user/edit，因此咱們能夠把相同的部分提取出來，寫成一個靜態的配置文件。而後經過createTheURL拼接完整的請求地址。

二、用策略者模式分發不一樣的請求方式

export default function request(url,options) {
    const { REQUEST_METHOD } = API || 'axiosRequest';
    const requestList = {
      axiosRequest:requestAxios,
      fecthRequest:requsetFecth,
    }
    return requestList[REQUEST_METHOD](url,options);
}

咱們能夠經過傳入不一樣REQUEST_METHOD ，來選擇調用axios或者是fecth仍是其餘的請求方式。

2、基礎類的編寫

在管理系統中大量用到了表格的CRUD，因此我把這一塊作一成了一個組件，一是爲了控制整個項目風格的統一，二是爲了規定開發者代碼編寫的規範。

一、主要思想

把全部的數據經過index.js進行分發，經過傳入{searchProps}、{btnProps}、{pageProps}、{modalProps}來進行數據，在4個組件中只是控制UI，不涉及任何數據操做。

二、注意事項

• this.props.form是在index中註冊仍是在子組件中註冊。
  form咱們必須在子組件中註冊，而後index中只須要傳入向後發送請求的函數便可，由於若是咱們須要控制兩個form表單時，在index中註冊就會形成數據渾亂。

2、Node後端開發

項目環境：Node+Thinkjs+Mysql
負責模塊：鑑權中間件 + 基類Controller

1、鑑權中間件

一、鑑權流程

二、詳細描述

• apinfo Api信息提取

module.exports = (options = {}) => {
  return (ctx, next) => {
    const url = ctx.url;
    const pathList = url.split('/');
    pathList.splice(0, 1);
    let PATH = pathList.join('_');
    PATH = PATH.toUpperCase();
    const data = ApiMap(PATH);
    if (!data) {
      Object.assign(ctx, URLERROR);
      return;
    }
    ctx.state.ApiInfo = data;
    return next();
  };
};

咱們在ApiMap配置咱們的接口參數，使用Map來查詢對應的接口配置參數

配置示例：
  map.set('USER_USER_LISTALL', {
    model: 'user',
    method: 'listall',
    checktoken: true,
    authority: 'view_qx'
  });

• tokencheck 校驗token

module.exports = (options = {}) => {
  return (ctx, next) => {
    const { checktoken } = ctx.state.ApiInfo; // 接口是否須要檢驗token
    if (checktoken) {
      const { token } = ctx.request.header;
      // 驗證是否有token，而且token是否過時或者被篡改
      if (token && Token.checkToken(token)) {
        const tokenInfo = Token.decodeToken(token);
        ctx.state.UserInfo = tokenInfo.payload.data;
        return next();
      } else {
        Object.assign(ctx, TOKENEXPIRED);
        return;
      }
    }
    return next();
  };
};

• authority 是否具備路由權限

module.exports = (options = {}) => {
  return async(ctx, next) => {
    const { UserInfo, ApiInfo: {checktoken, authority} } = ctx.state;
    // 檢查是否具備路由權限
    if (checktoken) {
      const UserRoleModel = ctx.model('userrole');
      const params = {
        user_id: UserInfo.id
      };
      // 查詢數據庫
      const userdata = await UserRoleModel.where(params).find();
      const { authority: userauth } = userdata;
      const authlist = userauth.split(';') || [];
      if (authlist.indexOf(authority) < 0) {
        Object.assign(ctx, USERAUTHERROR);
        return;
      }
      return next();
    }
    return next();
  };
};

2、基礎BasicController

一、柯里化函數
因爲在controller中大部分的增刪查改都是大致一致的，因此說咱們能夠把這些經過一個柯里化函數去用函數建立函數。

// 構建柯里化函數
curry(fn) {
    const _this = this;
    const args = Array.prototype.slice.call(arguments, 1);
    return function() {
      const innerArgs = Array.prototype.slice.call(arguments);
      const finalArgs = args.concat(innerArgs);
      return fn.apply(_this, finalArgs);
    };
  }
//  函數模板
async commonAction(model, method, params) {
    let data;
    let isTrue = true;
    switch (method) {
      case 'get':
        data = await this.model(model).getAction(params);
        break;
      case 'listall':
        data = await this.model(model).listallAction(params);
        break;
      case 'del':
        data = await this.model(model).delAction(params);
        break;
      case 'edit':
        data = await this.model(model).editAction(params);
        break;
      case 'add':
        data = await this.model(model).addAction(params);
        break;
      case 'listpage':
        data = await this.model(model).listpageAction(params);
        break;
      default:
        data = null;
        isTrue = false;
        break;
    }
    return {status: isTrue, data: data};
  }
  // 傳入（函數模板、model名、方法）
  const basicAction = this.curry(this.commonAction, model, method);

github地址：Thinkjs