Crítica maravilhosa
Introdução ao desenvolvimento IDE online: implementando um editor de código online do zero
Um editor visual para páginas h5 baseado em React + Koa-Dooring
Resumo dos principais pontos de conhecimento de TS e análise de casos reais de projetos
Prefácio
Este artigo é o último artigo após o combate real de como gerar relatórios de análise de visualização de dados multidimensionais com um clique no front end . Ele apresenta principalmente como implementar o roteamento de autoridade e o menu de autoridade do sistema de gerenciamento de segundo plano. Espero que, por meio da revisão e do combate real desses três artigos, você possa permitir que todos É mais confortável ao desenvolver aplicativos corporativos.
Os principais pontos técnicos envolvidos neste artigo são os seguintes:
Como usar um algoritmo recursivo para renderizar menus dinamicamente com níveis indefinidos
Como controlar a exibição do menu com base nas permissões
Projeto de serviço de permissão baseado em nodejs
texto
Menus dinâmicos e roteamento de permissão são links indispensáveis no projeto de sistemas de gerenciamento de back-end. Como um sistema de gerenciamento de back-end complexo, o menu de navegação muitas vezes não é um menu de primeiro nível simples. Freqüentemente, há menus de 3 e 4 níveis, da seguinte maneira: portanto, somos os primeiros O problema a ser resolvido é a solução de front-end ao enfrentar o menu de nível desconhecido. A segunda é enfrentar funções diferentes e precisar exibir menus de permissão diferentes. Como resolver esses dois problemas é a primeira etapa para realizar o menu de permissão. A seguir, irei Levará todos para alcançá-lo juntos.
Use um algoritmo recursivo para renderizar menus dinamicamente com níveis indefinidos
Em primeiro lugar, vamos resolver o primeiro problema e realizar a renderização do menu com níveis indefinidos. Nosso esquema de menu comumente usado atualmente é o seguinte:
const menuData = [
{
key: '/manage',
path: '/manage',
text: 'dooring工作台',
},
{
key: '/manage/anazly',
path: '/manage/anazly',
text: '数据大盘',
},
{
key: '/manage/h5',
text: 'H5服务中心',
sub: [
{
key: '/manage/h5/config',
path: '/manage/h5/config',
text: 'H5页面管理',
},
{
key: '/manage/h5/tpl',
path: '/manage/h5/tpl',
text: '模板库',
}
]
},
{
key: '/manage/order',
path: '/manage/order',
text: '订单管理',
}
]
复制代码
Podemos percorrer esses dados para gerar menus dinâmicos implementando um algoritmo js, como for, recursão, etc. O autor usa recursão para fazer isso. Em relação à seleção de componentes do menu, podemos usar o Menu do antd ou elemento UI, iView, etc. O princípio é basicamente o mesmo, aqui o autor escreve diretamente minha versão recursiva do javascript:
const { SubMenu } = Menu;
const createMenu = (menu = []) => {
return menu.map(item => {
if(item.sub) {
return <SubMenu key={item.key} title={item.text}>
{ createMenu(item.sub) }
</SubMenu>
}else {
return <Menu.Item key={item.key}>
<Link to={item.path}>{ item.text }</Link>
</Menu.Item>
}
})
}
复制代码
Através do método acima, podemos renderizar qualquer menu de nível. O efeito no plano de fundo H5-Dooring é o seguinte: Se não houver nenhum requisito de permissão, você pode usar diretamente o esquema acima para implementar qualquer menu de nível dinâmico. Em seguida, realizaremos a função dinâmica com permissão cardápio.
Exibição do menu de controle com base nas permissões
Na implementação acima, implementamos menus hierárquicos dinâmicos. Para sistemas com funções de gerenciamento de autoridade, precisamos exibir menus diferentes para usuários diferentes, como superadministradores, administradores comuns ou divisões mais detalhadas, precisamos percorrer o menu Quando chegar a hora de filtrar dinamicamente de acordo com as permissões, vejamos um exemplo: A interface de menu para login de superadministrador: A interface de menu para login de administrador comum:
Em primeiro lugar, para implementar o menu de permissão, precisamos modificar a estrutura do esquema do menu e adicionar os campos de permissão da seguinte maneira:
const menuData = [
{
key: '/manage',
path: '/manage',
text: 'dooring工作台'
},
{
key: '/manage/anazly',
path: '/manage/anazly',
text: '数据大盘',
},
{
key: '/manage/auth',
path: '/manage/auth',
text: '会员管理',
auth: true,
},
{
key: '/manage/h5',
text: 'H5服务中心',
sub: [
{
key: '/manage/h5/config',
path: '/manage/h5/config',
text: 'H5页面管理',
},
{
key: '/manage/h5/tpl',
path: '/manage/h5/tpl',
text: '模板库',
auth: true,
}
]
}
]
复制代码
A figura acima mostra que adicionamos o campo auth como a marca de autorização. Aqui usamos principalmente verdadeiro e falso para indicar, porque existem apenas 2 funções aqui. Se houver várias permissões, podemos usar uma string especial ou número para indicar que este bloco só precisa ser seguido por O acordo final é bom. A implementação específica é a seguinte:
const createMenu = (menu = []) => {
return menu.map(item => {
if(item.sub) {
return <SubMenu key={item.key} title={item.text}>
{ createMenu(item.sub) }
</SubMenu>
}else {
if((rp === 'super' && item.auth) || !item.auth) {
return <Menu.Item key={item.key} icon={iconMap[item.icon]}>
<Link to={item.path}>{ item.text }</Link>
</Menu.Item>
}else {
return null
}
}
})
}
复制代码
O acima percebeu o nível dinâmico e ilimitado do menu de autoridade. Você pode comê-lo diretamente ~
Projeto de serviço de permissão baseado em nodejs
A implementação acima é principalmente uma solução de design de front-end. Todos sabemos que as medidas de segurança de front-end sempre não são confiáveis. Portanto, para garantir a segurança do sistema, geralmente armazenamos os dados do menu no back-end e solicitamos dinamicamente o menu de permissão por meio da interface. Podemos fazer um acordo com o back-end com antecedência, para que o back-end possa retornar diferentes esquemas de menu de permissão de acordo com diferentes usuários. Como o esquema é relativamente simples, não vou apresentá-los um por um aqui. Se você estiver interessado, consulte H5-Dooring alcançar.
Então, você é conhecedor de novo hoje?
Finalmente
O autor do tutorial acima foi integrado ao H5-Dooring. Para algumas funções interativas mais complexas, ele também pode ser realizado por meio de um design razoável. Você pode explorar e estudar por si mesmo.
endereço do github: editor H5 H5-Dooring
Se você quiser aprender mais jogos H5, webpack, node, gulp, css3, javascript, nodeJS, visualização de dados de tela e outros conhecimentos de front-end e combate real, sejam bem-vindos para estudar e discutir juntos em "Interessante Frontend" para explorar juntos os limites do front-end.
Clique no canto inferior esquerdo para ler o texto original e votar no H5-Dooring !