vue admin webapp

vue-admin-webapp

Depois de ler um artigo do Nuggets, criei um sistema de gerenciamento de backend Vue baseado em demonstrações de outras pessoas.

Endereço original do artigo do Nuggets

As pilhas de tecnologia envolvidas neste projeto incluem vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

Este projeto é o endereço do github vue-admin-webapp

Endereço em execução do projeto

Introdução do projeto

vue-admin-webapp é um sistema de gerenciamento de backend baseado em vuecli e element-ui , usando fastmock para simular dados, incluindo gráficos, tabelas, permissões, excel, etc.

Instalar

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

Após a inicialização, o navegador http://localhost:8080 será aberto automaticamente e você poderá ver o efeito do projeto.

Estrutura da página do projeto

Vá para a página de login. A página consiste principalmente em três partes: a página de exibição da barra lateral do cabeçalho . Você pode clicar na barra lateral para ir para a rota.

Verificação de permissão de login

Receba o token do fastmock, armazene-o no localStorage ao fazer login, defina o front guard global, ao entrar em outras páginas, você só pode entrar quando houver um token, caso contrário ele irá pular para a página de login

Guarda frontal global

 router . beforeEach ( ( to , from , next ) => {
  const isLogin = localStorage . loginToken ? true : false ;
  if ( to . path == "/login" ) {
    next ( ) ;
  } else {
    isLogin ? next ( ) : next ( '/login' )
  }
} ) 

solicitar interceptação

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

interceptação de resposta

 axios . interceptors . response . use ( res => {
  return res ;
} ,
  err => {
    const { status } = err . response ;
    if ( status == 401 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Echart multigráfico

Seja proficiente no uso de Echart, gráficos de linhas, gráficos de pizza, gráficos de barras, gráficos de dados dinâmicos, etc., como na imagem abaixo

Excel

Em projetos reais, o Excel é feito principalmente no back-end. Claro, o front-end também pode ser feito, mas não acho que seja necessário agora, então não fiz isso. Se você quiser saber mais, pode pesquisar.

dados de simulação rápida

Aqui está uma citação da introdução oficial

Fastmock permite simular verdadeiramente solicitações ajax on-line sem um programa de back-end. Você pode usar o fatmock para obter uma demonstração pura do efeito front-end nos estágios iniciais do projeto ou pode usar o fastmock para implementar a simulação de dados durante o desenvolvimento para obter o front-end. separação -end e back-end. Antes de usar o fastmock, sua equipe pode usar uma ou mais das seguintes soluções para implementar a simulação de dados:

• A simulação local de dados manuscritos gera muitos códigos simulados no código front-end.
• Use o can-fixture de mockjs ou canjs para implementar a interceptação de ajax e configurar as regras json necessárias localmente.
• O backend fabrica dados na camada Controlador e os retorna ao frontend.

---

Minha porta do projeto fastmock