spring rest admin

administrador de descanso de primavera

Introdução

Este projeto é um projeto front-end de gerenciamento baseado em Vue e ElementUI. Ele é usado em conjunto com Spring-Rest Backend. O código da estrutura vem de Vue-Element-Admin, com algumas alterações feitas em sua base. Otimizou principalmente a função de gerenciamento de direitos. Clique aqui para acessar a demonstração on-line .

otimização

• As permissões de menu são geradas automaticamente com base na configuração de roteamento e sincronizadas com o banco de dados backend pelo administrador;

• Você pode adicionar, modificar e excluir permissões de botão nas permissões do menu sincronizado;

• Além das permissões de botão, os metadados das permissões de menu e de interface são gerados automaticamente pelo front-end e back-end, respectivamente. Mesmo que todos os registros do banco de dados sejam apagados, o administrador só precisa sincronizá-los novamente sem inserir manualmente os registros da tabela;

• Ao adicionar permissões de botão, o prefixo é gerado automaticamente e apenas as partes necessárias são preenchidas para evitar confusão de formato;

• Adicionada a função para associar permissões de menu e permissões de botão às permissões de interface. As funções estão diretamente relacionadas apenas às permissões de menu e permissões de botão;

• Ao autenticar elementos da página, use constantes de enumeração para evitar o uso direto de strings de permissão para facilitar a manutenção;

• Definir a hierarquia de classes de chamada da interface API para ser consistente com a hierarquia de classes da interface de segundo plano para eliminar redundância e melhorar a reutilização de código;

• Corrija o bug do componente el-scrollbar : quando o navegador for reduzido até certo ponto, a barra de rolagem oculta original será exposta. Quanto maior a taxa de redução, mais óbvio será o fenômeno;

Preparação do ambiente de desenvolvimento

Preparação do ambiente Node.js.

Recomenda-se usar v12 para a versão Node.js. Outras versões parecem funcionar bem.

Recomenda-se usar o nvm para gerenciamento de versão do Node.js no Linux e no MacOS. O nvm não oferece suporte ao Windows, mas você pode usar o nvm-windows alternativo.

Veja o nvm-windows no Windows como exemplo (execute no git bash):

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Check-out e execução do projeto

Nota: Antes de executar o front-end do console de gerenciamento, é melhor executar primeiro o segundo plano do servidor.

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Nota: Se houver um erro ao executar o comando npm install e a mensagem de erro for npm ERR! Failed at the [email protected] install script. você pode executar o seguinte comando e, em seguida, executar npm install :

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Se houver outros erros relatados durante o estágio de instalação do npm, pode ser porque alguns pacotes não podem ser baixados da estação espelho Taobao e precisam ser baixados diretamente de alguns endereços de rede externos inacessíveis. configuração de proxy. Tente novamente mais tarde.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

Se npm install for executado com sucesso e nenhum erro for relatado, você poderá continuar executando.

$ npm run serve

Depois de um momento, o navegador abrirá automaticamente e pulará para o endereço http://localhost:9527/login . Selecione um usuário integrado para fazer login diretamente.

Nota: O plano de fundo do servidor deve ser iniciado antes que você possa efetuar login com êxito.

arquivo de configuração do ambiente

vue-element-admin oferece suporte a várias configurações de ambiente. O formato do nome do arquivo de configuração do ambiente é .env.[环境名] . Se essas informações de configuração do ambiente precisarem ser usadas apenas localmente, adicione o sufixo .local ao final do. nome do arquivo, para que o arquivo de configuração não seja carregado no repositório pelo git , ele será mantido apenas localmente.

Nota: Além da configuração do ambiente de desenvolvimento .env.development e .env.development.local , outros arquivos de configuração do ambiente precisam definir NODE_ENV = production . O nome do ambiente ENV precisa corresponder à parte entre .env e .local no. Além disso, o prefixo do endereço de chamada da interface VUE_APP_BASE_API também deve ser modificado.

Nota: Se você deseja definir outras variáveis ​​de ambiente no arquivo de configuração, elas precisam começar com VUE_APP_ e obtê-las através de process.env.VUE_APP_xxxx no código.

Implantação de pacote

Nota: Antes de empacotar, confirme se npm install e npm run serve podem ser executados normalmente sem erros.

O comando de empacotamento é: npm run build -- --mode <环境名> . Na figura acima, como exemplo, o comando de empacotamento é:

$ npm run build -- --mode vm-centos7

Depois que o comando for executado com sucesso, o arquivo de resultado do empacotamento estará no diretório dist.

Nota: O plug-in de compactação de código compression-webpack-plugin só pode usar a versão anterior v6 e não pode usar a versão v7 mais recente, caso contrário, parece que um erro será relatado.

Além disso, o modo de roteamento deste projeto é configurado como modo de histórico. Se você quiser executar neste modo, o nginx precisa ser configurado adequadamente (consulte roteamento usando history.pushState para obter detalhes). Ao mesmo tempo, a configuração relacionada ao gzip deve ser adicionada (apenas esta linha de configuração é necessária):

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}