- 基于前端角度开源的 Admin 有很多,主要内容都是体现在各类前端组件交互和样式,而缺少与后端角度的逻辑。
- 而本教程要做的就是:从后端开发人员角度出发进行书写。主要探讨与后端的交互,帮助更多后端人员入门新前端世界。
- 但是:前端基础知识该学还是要学,这个项目更多作用也只是一个模板和说明书的作用,你要大改,自身要够硬。
- 为了方便模拟一些测试,代码里面加了一些随机数,所以可能同一个操作不时结果是不一样的,比如登录。
- umi 框架算是 2018 年开始发力的,所以说现在更新很频繁,可能有些小 bug 我也还没遇到,但是大家后续可以多关注下 umi 官方。
- 最主要前端组件(以 package.json 为主):
- umi@2.1.2 -- 可插拔的企业级 React 应用框架,蚂蚁金服的底层前端框架
- react@16.5.2 -- React 基础库(umi 已经集成)
- react-dom@16.5.2 -- React 路由包(umi 已经集成)
- react-router@4.3.1 -- React 路由包(umi 已经集成)
- antd@3.10.1 -- React UI库(umi 已经集成)
- dva@2.4.0 -- 管理应用的状态(umi 已经集成)
- webpack@4.19.0 -- 打包工具(umi 已经集成)
- axios@0.18.0 -- Ajax 请求框架
- lodash@4.17.10 -- 工具库
- 现代前端的状况
- 国内前端 UI 库状况
- 前端开发所需软件环境
- 运行 Demo 项目
- WebStorm 首次打开 Demo 项目
- WebStorm 运行 Demo 项目
- WebStorm 修改 Demo 项目内容
- WebStorm 学习资料推荐
- Visual Studio Code 学习材料推荐
- 项目依赖模块
- 项目结构讲解
- 认证方式:Token
- 前后端:数据格式、请求规范约定
- Demo 表字段
- Mock 数据接口
- 全局变量的增加、修改、使用
- 初始化界面的时候获取到后端的常用字典数据,并存储、使用
- 请求地址全局变量
- Axios 设置全局配置
- Axios 设置全局请求拦截器
- Axios 设置全局响应拦截器
- Axios 设置特殊场景配置
- 登录失败处理
- 登录成功获得 Token 并存储
- 把 Token 设置到 Axios 全局请求头
- 全局修改样式
- 局部页面修改样式
- 侧边栏接口地址
- 侧边栏接口数据格式
- 角色管理模块 CRUD
- 设置弹出框、警告框
- 做表单验证
- 权限菜单管理模块 CRUD
- 角色管理模块的权限按钮控制设置
- 博客:http://sayshy.com
- 邮件:
satan31415#qq.com - Github:
https://github.com/satan31415