vue admin blog

w-blog

descrever

Um blog pessoal que usa Spring Boot 2.x no backend, nuxtJs no frontend e vue no backend

Introdução

1. Link

• Link do guia:

  • API: https://gitee.com/windsnowli/w-blog-api

  • Recepção: https://gitee.com/windsnowli/vue-ssr-blog

  • Back-end: https://gitee.com/windsnowli/vue-admin-blog

• Link GitHub:

  • API: https://github.com/WindSnowLi/w-blog-api

  • Recepção: https://github.com/WindSnowLi/vue-ssr-blog

  • Back-end: https://github.com/WindSnowLi/vue-admin-blog

2. Um projeto simples de blog pessoal é dividido em três partes:前台,后台e api .

3. O back-end da API é baseado em SpringBoot . Baseia-se principalmente em mybatis , fastjson , DruidDataSource , Lombok , java-jwt , aliyun-sdk-oss , knife4j , etc. O banco de dados usa MySQL8.0+

4. O estilo principal da recepção vem de um modelo BizBlog na Internet, não sei de onde veio originalmente. Ele foi reescrito em um projeto nuxtJs baseado no original.

5. O vue-element-admin usado na interface do usuário em segundo plano é basicamente usado diretamente. Se você quiser personalizá-lo, sua força não permite.

6. Exemplo: Comida verde - Cai Dog

Comece localmente

api: A API solicitada pelo front e backend usa o mesmo projeto

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git ou git clone https://github.com/WindSnowLi/w-blog-api.git para clonar o projeto localmente
2. mvn clean install dependency:tree
3. Modifique as informações de configuração do banco de dados no ambiente de desenvolvimento application-dev.yml e o ambiente de produção application-prod.yml knife4j ativado apenas no ambiente de desenvolvimento;
4. Crie um banco de dados vazio com o nome especificado na configuração do banco de dados, codificação UTF8
5. mvn clean package -Dmaven.test.skip=true ignora testes e gera pacotes jar
6. java -jar 生成的包名.jar é usado para executar o ambiente de configuração de desenvolvimento. O banco de dados será inicializado automaticamente durante a primeira execução.
7. Visite http://127.0.0.1:8888/doc.html para visualizar a documentação api
8. Recomenda-se usar IDEA para abrir a pasta do projeto para lidar automaticamente com dependências e facilitar a operação.

Recepção

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git ou git clone https://github.com/WindSnowLi/vue-ssr-blog.git clone o projeto para local
2. npm install dependências de instalação
3. O endereço host no arquivo config/sitemap.xml pode ser modificado para gerar um mapa de acesso.
4. O número da porta em nuxt.config.js pode ser modificado
5. Você pode modificar BASE_URL no script do arquivo package.json para especificar o endereço api de back-end.
6. npm run build
7. npm start executado localmente

Nos bastidores

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git ou git clone https://github.com/WindSnowLi/vue-admin-blog.git clone o projeto para local
2. npm install dependências de instalação
3. npm run dev usa interface de visualização de dados simulados
4. Modifique o endereço VUE_APP_BASE_API no arquivo .env.production para o endereço da api de back-end
5. npm run build:prod compilar
6. Os arquivos compilados na pasta dist podem ser colocados no servidor http (você pode usar npm para instalar http-server ) para acesso.
7. Conta padrão: [email protected] , senha: 123456

Exibição de interface

Recepção

Nos bastidores

Licença

MIT

Direitos autorais (c) 2021 WindSnowLi