/umi-admin

基于蚂蚁金服 umi 可插拔的企业级 react 应用框架开发的 Admin。最核心特点:对后端开发人员友好

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

项目缘由

  • 基于前端角度开源的 Admin 有很多,主要内容都是体现在各类前端组件交互和样式,而缺少与后端角度的逻辑。
  • 而本教程要做的就是:从后端开发人员角度出发进行书写。主要探讨与后端的交互,帮助更多后端人员入门新前端世界。
  • 但是:前端基础知识该学还是要学,这个项目更多作用也只是一个模板和说明书的作用,你要大改,自身要够硬。
  • 为了方便模拟一些测试,代码里面加了一些随机数,所以可能同一个操作不时结果是不一样的,比如登录。
  • umi 框架算是 2018 年开始发力的,所以说现在更新很频繁,可能有些小 bug 我也还没遇到,但是大家后续可以多关注下 umi 官方。
  • 最主要前端组件(以 package.json 为主):

教程文章首发地址

《最适合后端的 React Admin》特别章节:开篇

  • 现代前端的状况
  • 国内前端 UI 库状况

《最适合后端的 React Admin》第 1 章:搭建环境和运行 Demo

  • 前端开发所需软件环境
  • 运行 Demo 项目

《最适合后端的 React Admin》第 2 章:IDE 选择、如何 Debug

  • WebStorm 首次打开 Demo 项目
  • WebStorm 运行 Demo 项目
  • WebStorm 修改 Demo 项目内容
  • WebStorm 学习资料推荐
  • Visual Studio Code 学习材料推荐

《最适合后端的 React Admin》第 3 章:依赖模块、项目结构

  • 项目依赖模块
  • 项目结构讲解

《最适合后端的 React Admin》第 4 章:与后端开发的规范约定

  • 认证方式:Token
  • 前后端:数据格式、请求规范约定
  • Demo 表字段
  • Mock 数据接口

《最适合后端的 React Admin》第 5 章:公共变量修改、后端字段数据存储

  • 全局变量的增加、修改、使用
  • 初始化界面的时候获取到后端的常用字典数据,并存储、使用

《最适合后端的 React Admin》第 6 章:修改 Ajax 请求框架(Axios 拦截器配置)

  • 请求地址全局变量
  • Axios 设置全局配置
  • Axios 设置全局请求拦截器
  • Axios 设置全局响应拦截器
  • Axios 设置特殊场景配置

《最适合后端的 React Admin》第 7 章:修改登录逻辑

  • 登录失败处理
  • 登录成功获得 Token 并存储
  • 把 Token 设置到 Axios 全局请求头

《最适合后端的 React Admin》第 8 章:定制主题

  • 全局修改样式
  • 局部页面修改样式

《最适合后端的 React Admin》第 9 章:修改 Demo 侧边栏菜单

  • 侧边栏接口地址
  • 侧边栏接口数据格式

《最适合后端的 React Admin》第 10 章:新模块的 CURD 过程

  • 角色管理模块 CRUD
  • 设置弹出框、警告框
  • 做表单验证

《最适合后端的 React Admin》第 11 章:树结构列表管理

  • 权限菜单管理模块 CRUD

《最适合后端的 React Admin》第 12 章:按钮级别的权限控制

  • 角色管理模块的权限按钮控制设置

《最适合后端的 React Admin》第 13 章:扩展:输入框联想

《最适合后端的 React Admin》第 14 章:扩展:富文本

《最适合后端的 React Admin》第 15 章:扩展:图片上传

《最适合后端的 React Admin》第 16 章:扩展:文件上传、文件下载

《最适合后端的 React Admin》第 17 章:扩展:两栏列表

《最适合后端的 React Admin》第 18 章:扩展:数据可视化

《最适合后端的 React Admin》特别章节:单元测试

《最适合后端的 React Admin》特别章节:Jenkins 自动化构建

联系我

  • 博客:http://sayshy.com
  • 邮件:satan31415#qq.com
  • Github:https://github.com/satan31415