基于 react、react-hooks、redux、ts手写ant-design-pro，搭配 node、eggjs、ts、mysql、redis配套api
介绍
最开始的时候，我需要一个 react 开发的 amdin 模版，在开源社区寻找了一边之后，比较中意 ant design pro 的 UI，当我一堆操作把 ant desgin pro 的代码拉下来研究之后，发现内容是在太多了，除了 react、redux 之外，还包含了 umi、dva、ant-design/pro-layout 等其它东西，当这些概念和 ts 结合起来使用的时候，作为一个 react新手，我瞬间感觉无处下手，后面又仔细了阅读了权限设计、菜单栏渲染部分的代码，我得出结论， Ant Design Pro 足够优秀，但不适合我的需求场景。很遗憾，只能放弃使用
但是，Ant Design Pro 的 UI 最为好看的一个，颜值即正义，既然我无法放弃 Ant Design Pro 的 UI，那干脆模仿 Ant Design Pro 的 UI，自己来实现一个较为简单的版本
愿景
我在日常开发中发现，大部分开发人员，在日常开发中，用的都是别人的模版，而且只关注业务实现，忽视了系统的底层实现，大部分时间都用来做重复无意义的工作，对自己的提升微乎其微，一个很重要的原因就是
开源模版底层实现逻辑复杂，封装层级深，代码对新手不友好
所以在开发这个系统时，在某些地方，我并没有太过封装，让使用这个模版的人都能看懂里面的每一行代码，同时能基于这个模版优化出最适合自己业务场景的一个通用模版，而不是永远在别人的模版之上coding
另外，我比较提倡优质的代码应该是浅显易懂的，而不是代码量最少，应避免因过于封装而导致逻辑晦涩难懂，对于新手来说非常不友好。
规划
前端
- 从零使用
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
获得什么
那么，在这个系统中，能够获得什么，我分别列举
前端
- 如何使用
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 & { 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-ant-admin 代码地址
- react-ant-admin-api 代码地址
- 线上接口文档 预览地址
结尾
目前来说，react 模版的话，开源的暂时应该没有使用 react16 新特性开发的，对应的eggjs相关的开源项目，结合ts使用的比较少，其中面临的业务场景也不多（2019年12月调研），目前来说，这个模版只是一个最基础的内容，后期会基于这个模版开源一个其他的项目，模版的内容也会陆续添加 如果对大家有所帮助的话，希望给作者点个赞吧