personal music website Download - personal music website Download do código-fonte

personal music website

Outras categorias

1.0.0

Baixar

site de música pessoal

Introdução do projeto

Este projeto fez as seguintes otimizações com base no projeto do site de música SpringBoot + Vue da Estação B :

O front-end do site de música adiciona uma função de classificação
O reprodutor de música adiciona funções de loop único, reprodução aleatória e alternância de reprodução sequencial ao reproduzir músicas.
Adicionada função de rolagem de letras à interface de exibição de letras
Adicionada a função de visualizar o histórico de reprodução de músicas do usuário na interface Minha Música.
Com base na função de coleta de itens de vídeo, uma nova função de cancelamento de coleta é adicionada.
Adicionada uma nova função para cancelar curtidas na página de comentários da música do usuário
Quando o usuário está logado, listas de reprodução e cantores semelhantes podem ser recomendados ao usuário por meio dos registros históricos de audição musical e das músicas favoritas e registros da lista de reprodução do usuário.
A interface de back-end do site de música adicionou uma função de interceptação de rota. A interface de solicitação de dados de back-end precisa carregar um token para acessá-la. O status de login do administrador de back-end é controlado pelo redis para controlar a pontualidade do token.
Todos os arquivos de recursos estáticos no projeto são acessados usando o servidor estático nginx, para que os arquivos estáticos possam ser completamente separados do código de segundo plano

Processo de operação do projeto

Configuração do ambiente de back-end

Configuração do banco de dados

Instale o banco de dados MySQL8 e o software de visualização Navicat
Após instalar o software relacionado ao banco de dados, importe o arquivo music.sql no diretório music-server/src/resources para o Navicat.

Configuração do ambiente de desenvolvimento

jdk18
especialista 3.8.6
redis 5.0.14
nginx 1.23.1

introdução à configuração do nginx

Crie uma pasta de upload no diretório raiz da unidade C e, em seguida, crie pastas de avatar e voz na pasta de upload .
O diretório de instalação do nginx precisa estar na unidade C. Após a conclusão da instalação e a inicialização bem-sucedida, modifique o arquivo de configuração nginx.conf na pasta conf no diretório de instalação do nginx .

找到listen 80,然后在它下面添加或替换如下配置

        listen       80;

        server_name  localhost;

        sendfile        on;

        keepalive_timeout  65;

        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {

              add_header 'Access-Control-Allow-Origin' $http_origin;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
              add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
              if ($request_method = 'OPTIONS') {
                  add_header 'Access-Control-Max-Age' 1728000;
                  add_header 'Content-Type' 'text/plain; charset=utf-8';
                  add_header 'Content-Length' 0;
                  return 204;
              }

	      root /upload/;
              index  index.html index.htm;	# 需要转发的url地址
        }

        location ^~/api/ {
                proxy_pass http://localhost:8889/;
       }

        location ^~/apk/ {
                proxy_pass http://localhost:8889/admin/;
       }

Após a conclusão da modificação da configuração, reinicie o nginx. Se nenhum erro ocorrer, a configuração do nginx será concluída.

Configuração do ambiente front-end

nodejs 16.16.0
Após a conclusão da instalação do nodejs , configure a fonte da imagem npm e, em seguida, use o comando npm para instalar o gerenciador de pacotes do fio globalmente.

Operação do projeto

Correndo em segundo plano

Abra todos os arquivos no diretório music-server com a versão IDEA2022 e aguarde o projeto baixar as dependências do maven
Após a conclusão do download da dependência, modifique o arquivo de configuração no recurso e modifique-o de acordo com seu próprio ambiente configurado.
Depois de modificar o conteúdo do arquivo de configuração, você precisa adicionar o nome de usuário, a senha e a função do administrador de back-end à tabela admin no banco de dados de música . A senha é gerada por meio de criptografia springsecurity e armazenada no banco de dados. , defina-o como administrador.

Corra em primeiro plano

Instale os módulos necessários usando o comando yarn ou npm
Depois que o módulo for instalado, ele pode ser empacotado diretamente
Após a conclusão do empacotamento, coloque o arquivo empacotado na pasta de upload criada acima. A pasta front-end é chamada de view e a pasta de back-end é chamada de admin.
Após a conclusão da etapa anterior, o endereço de acesso da recepção é: http://localhost/view
O endereço de acesso em segundo plano é: http://localhost/admin
Na primeira visita, como não há arquivos de recursos para essas músicas ou playlists no banco de dados, a página frontal fica toda em branco. Você pode adicionar cantores, músicas, playlists e outras informações fazendo login no back-end para exibição. no front-end.