echo_Ae的博客

Umi 是什么？Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户

购买了专栏小伙伴记得看这个专栏哈，文章写的可能不是很清晰，所以我建议是先拿到代码，然后对着文章来看，并自行编写代码。后端：git clone https://github.com/Ans1998/egg-middleground.git后端拉了代码，记得把public里面的sql文件导入到你的数据库，还要开启redis前端git clone https://github.com/Ans1998/umi3-middleground.git还有就是要添加我微信好友，我拉你进仓库加我的格.

git clone https://github.com/Ans1998/umi-egg-.gitumi3eggumi_middleground.sql 是数据库的表，小伙伴可以直接导入即可

本专栏的技术栈前端：react-umi3框架配合typeScript后端：node-egg框架看购买专栏力度，如果很多小伙伴购买了的话我会继续出：vue版本的前端、php版本的后端、python版本的后端、go版本的后端、java版本的后端本专栏合适什么人进行学习？合适想直接开发前端或者后端的人，或者对前端或者后端感兴趣的，这项目也可以直接做为中台系统进行业务开发。本专栏有什么技术要求?没有要求，感兴趣即可学习完本专栏有什么效果？前端：可以快速基于react-umi框架进

我们对接完api了实现了网络请求封装（记录路由（返回上一页）- 登录成功使用）防抖节流睡眠功能封装动态路由（菜单）以及layout布局获取用户信息登录模块菜单模块角色模块管理员模块网络请求封装src - app.tsx/ 网络请求封装export const request: RequestConfig = { prefix: 'xxxx', // 域名设置 headers: { 'Content-Type': 'application/x-www-form-url

管理员登陆演示本篇看点：管理员的CURDsrc - pages - authority - adminUserindex.tsximport React, { useRef, useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge, Tooltip } from 'antd';..

分配权限树演示本篇看点：角色的CURD分配权限树实现src - pages - authority - adminRoleindex.tsximport React, { useRef, useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } fr..

菜单结构树拖拽演示本篇看点：菜单模块的CURD菜单结构树的拖拽src - pages - menuindex.tsximport React, { useState, useRef } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } fro..

本篇看点：我们设计了一个很漂亮的登录UIProForm组件的使用跳转记录路由提交前使用md5加密src - pages - loginindex.tsximport React, { FC } from 'react';import { history } from 'umi';import { message } from 'antd';import ProForm, { ProFormText } from '@ant-design/pro-form';import { Use

本篇看点字符串component转成函数componentantd4 动态Icon网络请求封装Layout布局获取用户信息（动态路由以及动态菜单）记录路由（返回上一页）防抖节流睡眠功能实现app.tsximport React from 'react';import { history } from 'umi';import { message } from 'antd';import qs from 'qs';import { encode } from 'js-base64'

我们编写了多达20个Api接口，里面需要掌握的手动实现JWT（编写JWT插件）异常处理egg-mysql、egg-redis、egg-cors插件使用接口参数验证（egg-validate）SQL链表数据处理循环里面如何使用异步手动实现JWT（编写JWT中间件）实现流程：安装 jsonwebtoken包编写中间件（app - middleware - jwt.js）注册中间件（config - config.default.js）编写一个公共方法用来生成token（app -

效果图：管理员模块app - controller - adminUser- index.js主要讲解 获取管理员菜单 因为我们的菜单是一维数组变成一维数组嵌套数组然后嵌套.....实现大概思路：1.我是先把数据进行过滤，看看谁是一级菜单，把不是一级菜单的数据保存起来（如tmpArr）2.死循环（tmpArr），直到它为空 --- 所以判断到合格的数据就要进行删除tmpArr数组操作3.循环tmpArr 跟一级菜单对比 id，father_id 是否一致，不一致判断一级菜单是

效果图：角色模块app - controller - adminRole - index.js注意点就是 如果循环中有异步操作最好的方法就是换成for即可'use strict';const Controller = require('egg').Controller;class AdminRoleController extends Controller { // 设置权限(查询) async findAdminRoleMenu() { const { ctx

效果图：代码编写（我只跟大家说写的顺序，以及里面的逻辑介绍）菜单模块app - controller - menu - index.js主要讲解 菜单结构（查询） 因为我们的菜单是一维数组变成一维数组嵌套数组然后嵌套.....实现大概思路：1.我是先把数据进行过滤，看看谁是一级菜单，把不是一级菜单的数据保存起来（如tmpArr）2.死循环（tmpArr），直到它为空 --- 所以判断到合格的数据就要进行删除tmpArr数组操作3.循环tmpArr 跟一级菜单对比 id

效果图：好了，我们开始实现JWT功能。预备工作，先给数据库添加一个admin用户，它是整个系统管理员拥有全部的权限。用户账号：admin 用户密码： admin999加密成 32位（小）格式md5在线生成工具好了，我们开始编写代码app - controller - middleware jwt.js'use strict';const fs = require('fs');const path = require('path');const ...

egg官网，都是推荐使用文件，但是个人爱好还是比较喜欢目录~下面目录架构看小伙伴们的个人爱好。如果对egg还不是很熟悉的小伙伴我建议是先过一遍 文档最少要知道这目录是干嘛的，不然你很难进行下去，下面画的大家花点时间去看看开始架构新建的文件里面都是空即可，为下一篇手动实现JWT讲解做准备。app - coontroller - loginindex.js'use strict';const Controller = require('egg').Controller;

ps：要先确认自身是否有node、npm环境来到 egg官方文档 建议小伙伴有空就过一遍文档 npm init egg --type=simple安装的话会出现这样的情况这时候我们要使用cnpm进行安装，如果没有安装cnpm的小伙伴，请点击此处去安装安装完成，我们在执行下面命令cnpm init egg --type=simple会提示你填写项目、项目描述.....一路回车即可，然后会出现init目录，cd init 进入目录，安装依赖cd init

什么是JWT？Json web token (JWT)， 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519)。该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。什么是单点登录SSO？SSO是一种统一认证和授权机制，指访问同一服务器不同应用

测试api工具按道理我们应该也要写一个api工具的~但是人懒，我们还是使用第三方的吧。因为很多工具，我这里就讲解两种：谷歌浏览器插件（Talend API Tester）ps：安装的话需要去到谷歌商店搜索（Talend API Tester）安装即可 --- 需要翻墙Postman下载地址然后安装即可，打开之后右击 Add request我建议就是规范一点：add folder 然后里面 add request例子：.

其实搭建一个项目是应该画各种图，然后各种沟通，然后画表建表，然后预算用户量，服务器能不能扛得住等等....我们就讲讲画表跟建表，其实这两个都差不多是一个概念~画表其实就是把表全部先画出来，然后看看整体这样架构有没有问题，然后想想这样的拓展性是否可行，如果后期用户多了咋样咋样。好了，不多说了我们直接开始画表，使用word文档来画好了，我们来讲解一下个别表的设计。菜单表：father_id 靠这个字段实现无限级菜单。例子：角色拥有菜单权限表：这个比较重要，其实就是这个角.

我这边是推荐大家使用docker进行环境安装的~但是因为我本身是window10系统，所以我还是演示一下我自身的环境，我使用的是 phpStudy window系统的小伙伴也可以下载来安装，感觉还好吧...ps：如果没有redis出现的小伙伴，需要点击 环境 找到redis点击安装即可ps：请自行设置mysql密码，redis密码这样我们环境就安装好了，这时候是不是可以开发了呢？这时候我们还需要查看它们的可视化工具，不然每次都敲打命令岂不是很麻烦？mysql查看工具（Navica..

我们全部基于umi框架实现了Layou快速布局 ProComponents组件介绍以及使用 登录模块 首页模块 菜单模块 管理员模块 角色模块 动态路由Layout快速布局.umirc.ts layout: { name: 'An中台系统', theme: 'pro', locale: true, }, routes: [ { path: '/login', layout: false, component: '@/pages/login'

效果图：这时候让我们先把 pages 下面的 index.ts、index.less 删除掉这样看起来就整洁了很多好了开始正文。其实动态路由非常简单~实用umi框架之后，小伙伴们先来到umi文档运行时配置来让我们来实现.umirc.tsimport { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', },

效果图：umi2.x版本之前安装都是这样安装的可是umi3.x版本之后你会发现文档没有 块 这文档，反而只有一个使用 umi UI哈哈哈，没错如果我们要使用umi提供的块模板，只能通过umi UI 来进行安装，下面开始介绍umi ui如何安装yarn add @umijs/preset-ui -D耐心等待一段时间...安装完成之后，你肯定会一头雾水文档写的是执行 UMI_UI=1 umi dev哈哈哈，其实这时候我们直接执行 yarn start 或者 ..

效果图：pages - authority - adminRoleindex.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd';import { PlusOutlined, Ed

效果图：pages - authority - adminUserindex.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge } from 'antd';import { PlusOutlined, EditOutlined,

index.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd';import { QuestionCircleOutlined, HomeOutlined, PlusOut..

(⊙o⊙)…也确实没有设计天赋。。。登录页有点丑。index.tsximport React from 'react';import { history } from 'umi';import { message } from 'antd';import ProForm, { ProFormText } from '@ant-design/pro-form';import { UserOutlined, LockOutlined } from '@ant-design/icons';

讲登录页实现之前，我们可以先了解阿里提供的强大高复用组件ProLayout组件，我们之前就用过了，主要去了解的是ProForm组件、ProTable组件这两个是用得最多的默认umi是没有安装我们来安装一下ProForm组件、ProTable组件yarn add @ant-design/pro-formyarn add @ant-design/pro-table安装完成，我们开始写登录页...

我们上篇都介绍了如何设置layout布局，这时候我要多个页面呢，还有登陆页是没有layout的咋弄？难道要跟之前一样在layout组件里面写个判断啥的？no no no 用了umi3框架也是几行代码搞定.umirc.tsimport { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, layout: { name: '

ps：如果对umi框架不是很熟的小伙伴，我建议你先过文档，然后在来继续学会有非常好的效果，主要过一遍目录结构、配置、运行时配置即可。上篇我们运行起项目，效果是这样的这可不是我们想要的，常见的后端管理系统，基本都是分三大部分：头部导航栏、左边导航栏、内容。可能我们之前常做的操作就是新建一个layout组件，然后各种写各种封装...可是你使用umi3框架之后，就是几行代码就可以搞定了。.umirc.tsimport { defineConfig } from 'umi';expor

ps：要先确保你自身环境以安装node、yarn环境node -vyarn -v如果没有请自行移步去安装node、yarn开始安装umi框架可自行去官网安装小提示：执行之后会直接下载到当前目录，所以安装的时候最好新建好目录yarn create @umijs/umi-app耐心等待一段时间...然后安装依赖yarn install耐心等待一段时间...nice！umi框架就安装好了然后让我运行看看yarn start开始