springboot2-vue3
Um modelo de plano de fundo comum baseado em springboot2 e vue3, sem funções redundantes, apenas gerenciamento de permissões e funções comuns . Projeto de separação de front-end e back-end, código aprovado em 90% da convenção de codificação do Alibaba, verificação e localização de bugs
Endereço da nova versão
Guia de primeiros passos
O guia a seguir o ajudará a instalar e executar o projeto em sua máquina local para desenvolvimento e teste. Para obter informações sobre como implantar este projeto em um ambiente online, consulte a seção de implantação.
Requisitos e etapas de instalação
- Instalar e configurar ambiente Java, JDK1.8
- Instale o mysql 8 , crie um banco de dados (utf8mb4) e importe o sql (no diretório doc)
- Para instalar o redis , basta fazer o download e instalá-lo
- As ferramentas de desenvolvimento precisam instalar o plug-in lombok (IDEA é recomendado para ferramentas de desenvolvimento)
- --- Operação de back-end (se houver algum problema, geralmente é um erro na configuração da fonte de dados no arquivo de configuração yml)
- Instalar e configurar o ambiente do nó
- Instale vue-cli3 , entre no diretório vue e execute
npm install
- --- Execute
npm run serve
no front end ( WebStorm ou IDEA podem clicar diretamente no triângulo verde à esquerda da linha 6 no arquivo package.json )
Endereço de demonstração
- Endereço de demonstração online
- Nome de usuário:superadmin
- Senha:111111
- Dica: Vários usuários que fizerem login ao mesmo tempo poderão ser expulsos.
- Dica: O ambiente de demonstração proibiu operações de adição, exclusão e modificação. Apenas ignore o erro.
- Dica: Se houver outras exceções, force a atualização da página (pode ser um problema de cache)
- Documentação de interface
- swagger-bootstrap
- Dicas: A solicitação solicitará 404, adicione manualmente /github na frente da solicitação
implantar
- Execute o comando
mvn clean package
no diretório springboot para empacotar. Após o empacotamento, o arquivo gerado estará no diretório /target/build.- O diretório config armazena arquivos de configuração.
- O diretório lib é o pacote jar do qual o maven depende.
- diretório estático armazena arquivos estáticos
- O arquivo jar é o pacote jar gerado (se a dependência do pom permanecer inalterada no futuro, você só poderá substituir o pacote jar)
- Execute o comando
npm run build
no diretório vue para empacotar. Após o empacotamento, o arquivo gerado estará no diretório /dist.- A configuração do pacote está no arquivo .env e no arquivo vue.config.js
- O servidor de implantação precisa configurar o ambiente JDK1.8 , mysql 8 e redis
- O pacote jar executa
nohup java -jar springboot.jar &
pode ser executado em segundo plano e gerar o log para o arquivo nohup.out no diretório atual. - Recomenda-se configurar o nginx para que o servidor de implantação seja empacotado e colocado em nginx. Se não estiver configurado, ele pode ser colocado em estático no mesmo diretório do pacote jar .
Erros comuns
-
java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
- Erro: Gerar classe de entidade com base no banco de dados
- Solução: altere o caminho do pacote jar na linha 6 de resources/config/generator-config.xml para o seu próprio caminho do pacote jar
-
npm install
- Erro: erro de dependência de instalação do vue, geralmente node-sass
- Solução: altere a imagem Taobao ou
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
-
/login ------请求失败-----error: Error: Cannot find module './q/Index'
- Erro: Após criar um novo menu em segundo plano (o menu não possui subordinados) e ter permissão para adicionar o menu, este erro ocorre ao efetuar login novamente.
- Solução: adicione o diretório do menu e o arquivo Index.vue ao caminho /src/views/index/ no projeto vue
extremidade traseira:
springboot, mybatis, redis
- Introdução
- Projeto criado com base no template springboot
- Configuração básica
- O arquivo .yml pode configurar informações relevantes
- O diretório config contém configurações de módulos comuns.
- O filtro é configurado com domínio cruzado , filtragem de IP , filtragem de parâmetros , etc.
- As solicitações de filtragem de parâmetros removem automaticamente os espaços iniciais e finais , usando Jsoup para filtrar tags HTML (o nível de filtragem pode ser personalizado)
- Gerenciamento de permissões
- Interface com anotação
@AdminAuthToken
, o cabeçalho da requisição deve possuir token para acesso - Coopere com a página front-end do vue para renderizar dinamicamente o roteamento e ocultar o botão de exibição: o botão é salvo em
$store.state.role['buttons']
(front-end) - De acordo com as permissões de nível de interface, a API correspondente ao menu ou botão no gerenciamento de funções deve ser melhorada, caso contrário, será permitida por padrão após a existência do token .
- A fábrica de embalagens usa CURD e apenas herda BaseService.
-
baseInsert()
e baseUpdate()
filtrarão automaticamente os campos com valores nulos - Filtre os parâmetros
baseUpdate()
ou crie uma nova classe de entidade para operação de atribuição.
- Gere automaticamente classes de entidade com base no banco de dados
- Execute o método org.mybatis.generator.plugin.MyBatisTest.main()
- Recursos de configuração específicos/config/generator-config.xml
- Os logs são armazenados diariamente e a configuração específica está em resources/config/logback-spring.xml
- Grave automaticamente o log do usuário administrador , a anotação
@SystemLog
pode ser colocada no controlador
front-end:
verdade:
Introdução
- Projeto criado baseado em vue cli3
- IU da interface: elemento-ui
- Solicitação de rede: axios
- Método de chamada global
this.$axios({ url: '', data: {}, success(data) {} });
- url: somente o endereço após o nome de domínio é obrigatório
- sucesso: o retorno de chamada só precisa tratar o caso em que o código é 200
- Variáveis e métodos globais estão no diretório /src/utils
- Substitua o estilo element-ui no arquivo /src/assets/sass/element-variables.scss
- Apresente a biblioteca de fontes iconfont
- Apenas sobrescreva os arquivos no diretório /src/assets/font/iconfont
- Citação
<i class="iconfont iconfont-address"></i>
- A maioria dos projetos tem comentários
Configuração básica
- Coopere com o back-end para implementar o roteamento dinâmico: preencha o caminho no formulário de gerenciamento de funções, o caminho raiz padrão é /src/views/index/
- .env.production/development file e vue.config.js são arquivos de configuração
Componentes comumente usados que são encapsulados ( para obter detalhes, consulte /src/views/index/system/sysUser/ para comentários detalhados )
- diálogo:caixa pop-up
- detalhe: exibe dados na forma de título + conteúdo
- formulário: envio do formulário,
@submit
só precisa lidar com a situação após a verificação do formulário - índice: caixa pop-up comum
- mesa: mesa
- Exemplo de retorno aceito pelo formulário:
{"list":[],"pageNum":1,"pageSize":10}
- Solicitação de dados da tabela
tableDataRequest: { url: '', data: {} }
- url: endereço da solicitação
- dados: parâmetros adicionais, usados com pesquisa principal
- Tabela de exibição
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]
aceita uma matriz --- consulte a tabela layui;- formatador: display complexo, pode retornar um dom
Agradecimentos
Em primeiro lugar, graças a springboot , vue , element-ui e outros excelentes projetos de código aberto. Em segundo lugar, este projeto refere-se a muitos exemplos online. Se você vir um código semelhante, então há apenas uma resposta.