硬核開源，使用 react-hooks 手寫 ant-design-pro，搭配 node 完整api

時間 2020-01-30

標籤硬核開源使用 react hooks 手寫 ant design pro 搭配 node 完整 api 欄目 React 简体版

原文原文鏈接

介紹

最開始的時候，我須要一個 react 開發的 amdin 模版，在開源社區尋找了一邊以後，比較中意 ant design pro 的 UI，當我一堆操做把 ant desgin pro 的代碼拉下來研究以後，發現內容是在太多了，除了 react、redux 以外，還包含了 umi、dva、ant-design/pro-layout 等其它東西，當這些概念和 ts 結合起來使用的時候，做爲一個 react新手，我瞬間感受無處下手，後面又仔細了閱讀了權限設計、菜單欄渲染部分的代碼，我得出結論， Ant Design Pro 足夠優秀，但不適合個人需求場景。很遺憾，只能放棄使用html

可是，Ant Design Pro 的 UI 最爲好看的一個，顏值即正義，既然我沒法放棄 Ant Design Pro 的 UI，那乾脆模仿 Ant Design Pro 的 UI，本身來實現一個較爲簡單的版本前端

願景

我在平常開發中發現，大部分開發人員，在平常開發中，用的都是別人的模版，並且只關注業務實現，忽視了系統的底層實現，大部分時間都用來作重複無心義的工做，對本身的提高微乎其微，一個很重要的緣由就是node

開源模版底層實現邏輯複雜，封裝層級深，代碼對新手不友好
複製代碼

因此在開發這個系統時，在某些地方，我並無太過封裝，讓使用這個模版的人都能看懂裏面的每一行代碼，同時能基於這個模版優化出最適合本身業務場景的一個通用模版，而不是永遠在別人的模版之上codingmysql

另外，我比較提倡優質的代碼應該是淺顯易懂的，而不是代碼量最少，應避免因過於封裝而致使邏輯晦澀難懂，對於新手來講很是不友好。react

規劃

前端

從零使用 react 搭建系統
全面使用 react-hooks 開發，拋棄 class 組件寫法、全部組件異步加載，提升首屏渲染速度
動態權限設計，實現路由菜單動態獲取
完成基本的用戶登陸、註冊、找回密碼功能
...

後端

基於eggjs、typescript 完整搭建基本模版
集成 redis、mysql 數據庫相關
實現基本的用戶系統、權限管理系統、短信發送、文件上傳等功能
...

使用技術

UI 框架: react、react-hook、classnames
UI 組件: antd、@ant-design/aliyun-theme
數據管理：redux、react-redux、redux-thunk、redux-logger
類型檢查：typescript
接口請求：axios
cookies：js-cookie
過渡動畫：react-transition-group
CSS 規則：BEM
後端 API：nodejs、eggjs、ts、mysql、sequelize

得到什麼

那麼，在這個系統中，可以得到什麼，我分別列舉ios

前端

如何使用 react-hooks, useEffect, useCallback, lazy, memo, Suspense...
當 react 生態配合 typescript 時，每個都應該如何去使用?
在 react 中使用 axios 時，應該如何將 axios 和 typescript 結合起來，並統一封裝
平常開發中面臨的一些常規問題，這裏面大多都能找到
完整的從提交表單到接口響應數據渲染的一個過程
完整的權限系統搭配API實現的模版相對較少
...

後端

nodejs、eggjs、typescript、redis、mysql 該如何使用
eggjs 的擴展，中間件，插件等如何配合ts使用
eggjs 統一的權限驗證、錯誤處理，自定義錯誤等的使用
redis、mysql、sequelize 如何結合 ts 使用
mysql 中表的關聯處理，事物處理在這裏都能找的到
平常中面臨的一些常見需求，參數校驗、短信發送，圖片上傳等等
...

預覽

使用

# 在模版代碼中，默認代理到本地的3300端口，也能夠直接代理到我
# 在線上部署的接口上，可是不支持刪除和修改一些內容，能夠本地將api也跑起來

# 前端
$ git clone https://github.com/landluck/react-ant-admin.git
$ cd react-ant-admin
$ npm install
$ npm start

# 後端
$ git clone https://github.com/landluck/react-ant-admin-api.git
$ cd react-ant-admin-api
$ npm install
$ # 在運行以前，須要配置本身的redis、mysql參數，才能跑起來
$ npm run dev
複製代碼

配置說明

// 前端
const AdminConfig: Config = {
  // react-router basename
  BASENAME: '/react-ant-admin',

  // 請求成功狀態碼
  SUCCESS_CODE: 200,

  // 登陸過時，或者未登陸
  LOGIN_EXPIRE: 400,

  // 統一請求地址
  API_URL: 'https://www.landluck.com.cn/react-ant-admin-api',

  // 本地存儲token 的key
  TOKEN_KEY: 'Admin_Token_key',

  // 默認菜單欄位置
  layout: 'side',

  // 默認主題顏色
  theme: 'dark',

  // 是否固定頭部
  fixedHeader: false,

  // 固定寬度或者流式寬度
  contentWidth: 'fixed',

  // 是否開啓色弱模式
  colorWeak: false,

  // 項目名稱
  title: 'React Ant Admin',

  // logo
};

// 後端
export default () => {
  const config = {} as PowerPartial<EggAppConfig> & { sms: AliyunSmsConfig, oss: OssConfig, };

  // override config from framework / plugin
  // use for cookie sign key, should change to your own and keep security
  config.keys = '_1554196283322_156_xxx';
  // 啓動的端口和域名
  config.cluster = {
    listen: {
      port: 3300,
      hostname: '127.0.0.1',
    },
  };
  // 文件上傳的方式
  config.multipart = {
    mode: 'file',
  };
 // egg-security 的配置,暫時關閉一些安全校驗
  config.security = {
    xframe: {
      enable: false,
    },
    csrf: {
      enable: false,
    },
  };

  // 中間件配置
  config.middleware = [ 'errHandle', 'auth' ];
  
  // mysql 配置
  config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    username: 'react-ant-admin',
    password: 'xxx',
    database: 'react-ant-admin',
    logQueryParameters: true,
    define: {
      timestamps: true,
      underscored: true,
      paranoid: true,
      freezeTableName: true,
    },
  };
  // redis 配置
  config.redis = {
    client: {
      port: 6379,
      host: '127.0.0.1',
      password: '123456',
      db: 2,
    },
  };
  // auth 中間件配置，
  config.auth = {
    // 不須要鑑權的接口url
    url: new Set([ '/user/login', '/user/login-mobile', '/', '/sms' ]),
    // ignore (ctx: Context) {
    // return ctx.url.indexOf('.') !== -1
    // }
  };
  // sms 配置，默認使用阿里雲
  config.sms = {
    accessKeyId: 'xxxx',
    accessKeySecret: 'xx',
    endpoint: 'https://dysmsapi.aliyuncs.com',
    regionId: 'cn-hangzhou',
    verifyCode: {
      signName: 'xxx',
      templateCode: 'xxx',
    },
    // 單個手機號天天可發送短信條數
    countByMobile: 10,
    // 單個ip天天可發送短信條數
    countByIp: 30,
  };
  // 文件上傳配置
  config.oss = {
    // 七牛雲的配置
    qiniu: {
      accessKey: 'xxx',
      secretKey: 'xxxx',
      scope: 'xxxx',
      host: 'xxxx',
    },
    // 文件上傳到本地服務器的配置
    local: {
      prefix: '/public/image',
      dir: '/app/public/image',
    },
  };

  // the return config will combines to EggAppConfig
  return {
    ...config,
  };
};
複製代碼

傳送門

結尾

目前來講，react 模版的話，開源的暫時應該沒有使用 react16 新特性開發的，對應的eggjs相關的開源項目，結合ts使用的比較少，其中面臨的業務場景也很少（2019年12月調研），目前來講，這個模版只是一個最基礎的內容，後期會基於這個模版開源一個其餘的項目，模版的內容也會陸續添加若是對你們有所幫助的話，但願給做者點個贊👍吧git