WhiteJotter
1.0.0
Este é um projeto simples de separação de front-end e back-end, desenvolvido principalmente usando tecnologias Vue.js + SpringBoot.
Além de ser usado como um exercício introdutório, também espero que o projeto possa ser usado como base para alguns projetos comuns da Web, para ajudá-lo a simplificar o processo de construção de um site. É chamado de bloco de anotações branco porque começa em 0 e melhora gradualmente com o tempo.
Repositório de front-end: https://github.com/realdonald1994/WhiteJotter_Vue
Repositório de back-end: https://github.com/realdonald1994/WhiteJotter
Bem-vindo a se juntar ao White Jotter!
Como página de exposição, incluindo os principais materiais de referência para o desenvolvimento deste projeto, atualizações recentes e Slogan
Fornece função de exibição de informações de livros e filmes
Fornece notas, função de exibição de postagens de blog
Incluindo painel, gerenciamento de conteúdo, gerenciamento de usuários e autoridades, etc.
Introdução pessoal e links relacionados
1.Vue.js
2.ElementUI
3. eixos
4.Vuex
1.Bota de mola
2. Dados Spring + JPA
3. MySQL
4.Shiro
1.Mysql
1.Centos7
2.Nginx
3.FastDFS
1.Junho
2. Brincadeira
1.clonar projeto para local
front-end:
git clone https://github.com/realdonald1994/WhiteJotter_Vue
back-end:
git clone https://github.com/realdonald1994/WhiteJotter
2.Crie um banco de dados white_jotter no mysql, execute o projeto e os dados serão injetados automaticamente.
A porta Redis é 6379 (porta padrão) e a senha está em branco.
3.O banco de dados está configurado no arquivo application.properties no diretório src main resources do projeto backend, e a versão mysql é 8.0.15.
4.Execute o projeto de back-end no IntelliJ IDEA. Para garantir que o projeto seja executado com sucesso, você pode clicar com o botão direito em pom.xml e selecionar maven-> reimportar e reiniciar o projeto
Neste ponto, o servidor foi iniciado com sucesso, ao mesmo tempo, execute o projeto front-end, visite http: // localhost: 8080 , você pode entrar na página de login, a conta padrão é admin , a senha é 123
Se você quiser fazer o desenvolvimento secundário, continue vendo a quinta e a sexta etapas.
5.Insira o diretório raiz do projeto front-end e insira os seguintes comandos em ordem na linha de comando:
# Install dependencies
npm install
# Start the project at localhost: 8080
npm run dev
Como o encaminhamento de porta foi configurado no projeto wj-front para encaminhar os dados para SpringBoot, após o início do projeto, digite http: // localhost: 8080 no navegador para acessar nosso projeto front-end, todas as solicitações encaminham dados para SpringBoot através do encaminhamento de porta (observe que você não deve fechar o projeto SpringBoot neste momento).
6.Finalmente, você pode usar WebStorm e outras ferramentas para abrir o projeto wj-front e continuar o desenvolvimento. Após a conclusão do desenvolvimento, quando o projeto estiver online, você ainda entra no diretório wj-front e executa o seguinte comando:
npm run build
Depois que o comando é executado com sucesso, uma pasta dist é gerada no diretório wj-front e os dois arquivos assets e index.html na pasta podem ser copiados para nginx.Em seguida, entre no diretório raiz do backend e execute a linha de comando:
mvn clean install
Por fim, insira a linha de comando java -jar xxx.jar no diretório target recém-gerado. Inicie o servidor back-end.
Digite a linha de comando no arquivo nginx: start nginx . Inicie o servidor front-end.
20/08 Adicionar Redis
06-09 Adicionar teste de unidade com utilitários de teste Vue e Jest
06-04 Use gzip para resolver o carregamento lento da página da web
06-02 O projeto é implantado no servidor em nuvem e o site é publicado pela primeira vez ?
05-29 Projetos front-end e back-end separados
04-20 Use o editor de markdown de código aberto para obter o módulo de exibição e gerenciamento de artigos
...
