React、Antd写了个简洁版的后台前端管理系统 🎉

#1

# react-antd-admin

https://github.com/liuguanhua/react-antd-admin

Node Version React Version TypeScript Version Antd Version React-Antd-Admin Version

:open_book: 介绍

基于工作中开发需要,设计了一个后台前端管理系统,节省从零开始搭建的时间,前端基于react(拥抱 hooks)、typescriptantddva及一些特别优秀的开源库实现,特别感谢。

使用nodemockjs模拟了一层数据服务,部署在now.sh平台上。

:house: 主页

在线预览

二维码

:file_folder: 目录

react-antd-admin
│
├── client                            * 前端目录
│   ├── config                        * 独立配置、发布时便于修改
│   ├── public                        * 静态资源文件,不被编译
│   ├── src
│   │   ├── assets                    * 资源文件(图标、图片、样式)
│   │   ├── components                * 公共组件
│   │   ├── scripts                   * 脚本(axios数据请求、常量、路由配置、工具函数)
│   │   ├── store                     * mock、redux数据流
│   │   ├── views                     * 视图展示页面
│   │   ├── index.tsx                 * 入口文件
│   │   └── serviceWorker.ts          * serviceWorker
│   ├── typings                       * 类型定义
│   ├── config-overrides.js           * 扩展webpack、create-react-app配置
│   ├── tsconfig.json                 * typescript配置
│  
└── server                            * 接口目录
    ├── public                        * 资源文件
    ├── routes                        * API路由
    ├── scripts                       * 脚本(常量、工具函数)
    ├── nodemon.json                  * nodemon配置
    ├── now.json                      * now配置
    └── app.js                        * API入口

:sparkles: 特征

  • 页面
- 登录、注册
- 首页数据统计展示
- 信息中心(邮件功能的一部分效果)
- 订单统计,地图展示各省市订单量
- 会员管理(添加、删除、编辑、查询)
  • 组件
- 视频
- 拖拽
- 无限加载
- PDF预览
- 编辑器
    - 富文本
    - Markdown
  • 其它
- 骨架屏、响应式
- 多皮肤
- 弹窗拖拽
- 图表
- 页面鉴权(实际开发中建议动态读取菜单)
- 按需加载路由
- mock数据
- 封装API请求及一些高阶组件、异常处理

:computer: 使用

下载:git clone https://github.com/liuguanhua/react-antd-admin.git

进入:cd react-antd-admin

client端
    进入:cd client
    安装:yarn install
    开发:yarn start
    访问:http://localhost:8888

    生产:yarn build

server端
    进入:cd server
    安装:yarn install
    开发:yarn start
    访问:http://localhost:9999

:bust_in_silhouette: 作者

:handshake: 支持

有什么好的想法、建议、问题和功能需求,欢迎 :wave: 提出。如果觉得这个项目不错或者对您有帮助,:clap: 赞一 个 :star::heart:

1 Like