personal music website Télécharger - personal music website Téléchargement du code source

personal music website

Autres catégories

1.0.0

Télécharger

site-musique-personnel

Présentation du projet

Ce projet a apporté les optimisations suivantes basées sur le projet de site Web musical SpringBoot + Vue de Station B :

Le front-end du site Web de musique ajoute une fonction de classement
Le lecteur de musique ajoute des fonctions de commutation de boucle unique, de lecture aléatoire et de lecture séquentielle lors de la lecture de chansons.
Ajout d'une fonction de défilement des paroles à l'interface d'affichage des paroles
Ajout de la fonction d'affichage des enregistrements de lecture de musique historique de l'utilisateur dans l'interface Ma musique.
Sur la base de la fonction de collecte d'éléments vidéo, une nouvelle fonction d'annulation de la collecte est ajoutée.
Ajout d'une nouvelle fonction pour annuler les likes sur la page de commentaires de la chanson de l'utilisateur
Lorsque l'utilisateur est connecté, des listes de lecture et des chanteurs similaires peuvent être recommandés à l'utilisateur via les enregistrements d'écoute de musique historiques de l'utilisateur, ses chansons préférées et ses enregistrements de listes de lecture.
L'interface backend du site Web de musique a ajouté une fonction d'interception de route. L'interface de demande de données backend doit transporter un jeton pour y accéder. Le statut de connexion de l'administrateur backend est contrôlé par redis pour contrôler l'actualité du jeton.
Tous les fichiers de ressources statiques du projet sont accessibles à l'aide du serveur statique nginx, de sorte que les fichiers statiques puissent être complètement séparés du code d'arrière-plan.

Processus d'exploitation du projet

Configuration de l'environnement back-end

Configuration de la base de données

Installer la base de données MySQL8 et le logiciel de visualisation Navicat
Après avoir installé le logiciel associé à la base de données, importez le fichier music.sql dans le répertoire music-server/src/resources dans Navicat.

Configuration de l'environnement de développement

jdk18
maven 3.8.6
redis 5.0.14
nginx 1.23.1

présentation de la configuration de nginx

Créez un dossier de téléchargement dans le répertoire racine du lecteur C , puis créez des dossiers d'avatar et de voix dans le dossier de téléchargement .
Le répertoire d'installation de nginx doit se trouver sur le lecteur C. Une fois l'installation terminée et le démarrage réussi, modifiez le fichier de configuration nginx.conf dans le dossier conf du répertoire d'installation de nginx . Les modifications spécifiques sont les suivantes :

找到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/;
       }

Une fois la modification de la configuration terminée, redémarrez nginx. Si aucune erreur ne se produit, la configuration de nginx est terminée.

Configuration de l'environnement frontal

noeudjs 16.16.0
Une fois l'installation de nodejs terminée, configurez la source de l'image npm , puis utilisez la commande npm pour installer le gestionnaire de packages Yarn globalement.

Exploitation du projet

Courir en arrière-plan

Ouvrez tous les fichiers du répertoire du serveur de musique avec la version IDEA2022 , puis attendez que le projet télécharge les dépendances maven
Une fois le téléchargement des dépendances terminé, modifiez le fichier de configuration dans la ressource et modifiez-le en fonction de votre propre environnement configuré.
Après avoir modifié le contenu du fichier de configuration, vous devez ajouter le nom d'utilisateur, le mot de passe et le rôle de l'administrateur backend à la table admin de la base de données musicale . Le mot de passe est généré via le cryptage springsecurity et stocké dans la base de données. , définissez-le sur admin.

Courir au premier plan

Installez les modules requis à l'aide de la commande fil ou npm
Une fois le module installé, il peut être empaqueté directement
Une fois l'empaquetage terminé, placez le fichier empaqueté dans le dossier de téléchargement créé ci-dessus. Le dossier frontal est nommé view et le dossier principal est nommé admin.
Une fois l'étape précédente terminée, l'adresse d'accès à la réception est : http://localhost/view
L'adresse d'accès en arrière-plan est : http://localhost/admin
Lors de la première visite, puisqu'il n'y a aucun fichier de ressources pour ces chansons ou listes de lecture dans la base de données, la page frontale est entièrement vide. Vous pouvez ajouter des chanteurs, des chansons, des listes de lecture et d'autres informations en vous connectant au back-end pour les afficher. dans le front-end.