硬核开源，使用 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