personal music website herunterladen - personal music website Quellcode herunterladen

personal music website

Andere Kategorien

1.0.0

Herunterladen

persönliche-musik-website

Projekteinführung

Dieses Projekt hat die folgenden Optimierungen basierend auf dem SpringBoot + Vue-Musik-Website-Projekt von Station B vorgenommen:

Das Frontend der Musik-Website fügt eine Ranking-Funktion hinzu
Der Musikplayer bietet beim Abspielen von Songs Funktionen zum Umschalten zwischen Einzelschleife, Zufallswiedergabe und sequenzieller Wiedergabe.
Liedtext-Bildlauffunktion zur Liedtext-Anzeigeoberfläche hinzugefügt
Es wurde die Funktion hinzugefügt, die historischen Musikaufzeichnungen des Benutzers in der Benutzeroberfläche „Meine Musik“ anzuzeigen.
Basierend auf der Funktion zum Sammeln von Videoelementen wurde eine neue Funktion zum Abbrechen der Sammlung hinzugefügt.
Es wurde eine neue Funktion hinzugefügt, um Likes auf der Song-Kommentarseite des Benutzers zu löschen
Wenn der Benutzer angemeldet ist, können ihm ähnliche Wiedergabelisten und Sänger über die historischen Musikhöraufzeichnungen des Benutzers sowie über Lieblingslieder und Wiedergabelistenaufzeichnungen empfohlen werden.
Die Backend-Schnittstelle der Musik-Website verfügt über eine Routenabfangfunktion. Die Backend-Datenanforderungsschnittstelle muss einen Token enthalten, um darauf zugreifen zu können. Der Anmeldestatus des Backend-Administrators wird von Redis gesteuert, um die Aktualität des Tokens zu steuern.
Auf alle statischen Ressourcendateien im Projekt wird über den statischen Nginx-Server zugegriffen, sodass statische Dateien vollständig vom Hintergrundcode getrennt werden können

Ablauf des Projektbetriebs

Konfiguration der Backend-Umgebung

Datenbankkonfiguration

Installieren Sie die MySQL8- Datenbank- und Visualisierungssoftware Navicat
Importieren Sie nach der Installation der datenbankbezogenen Software die Datei „music.sql“ im Verzeichnis „music-server/src/resources“ in Navicat.

Konfiguration der Entwicklungsumgebung

jdk18
Maven 3.8.6
Redis 5.0.14
Nginx 1.23.1

Einführung in die Nginx-Konfiguration

Erstellen Sie einen Upload- Ordner im Stammverzeichnis von Laufwerk C und erstellen Sie dann Avatar- und Sprachordner im Upload -Ordner.
Das Installationsverzeichnis von nginx muss sich auf dem Laufwerk C befinden. Nachdem die Installation abgeschlossen und der Start erfolgreich war, ändern Sie die Konfigurationsdatei nginx.conf im Ordner conf im nginx -Installationsverzeichnis.

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

Nachdem die Konfigurationsänderung abgeschlossen ist, starten Sie Nginx neu. Wenn keine Fehler auftreten, ist die Nginx-Konfiguration abgeschlossen.

Konfiguration der Front-End-Umgebung

nodejs 16.16.0
Nachdem die Installation von nodejs abgeschlossen ist, konfigurieren Sie die npm- Image-Quelle und verwenden Sie dann den Befehl npm, um den Garnpaketmanager global zu installieren.

Projektbetrieb

Läuft im Hintergrund

Öffnen Sie alle Dateien im Musikserververzeichnis mit der IDEA2022- Version und warten Sie dann, bis das Projekt die Maven- Abhängigkeiten herunterlädt
Nachdem der Abhängigkeits-Download abgeschlossen ist, ändern Sie die Konfigurationsdatei in der Ressource und passen Sie sie entsprechend Ihrer eigenen konfigurierten Umgebung an.
Nachdem Sie den Inhalt der Konfigurationsdatei geändert haben, müssen Sie den Benutzernamen, das Passwort und die Rolle des Backend-Administrators zur Admin -Tabelle in der Musikdatenbank hinzufügen. Das Passwort wird durch Springsecurity-Verschlüsselung generiert und in der Datenbank gespeichert , setzen Sie es auf admin.

Im Vordergrund ausführen

Installieren Sie die erforderlichen Module mit dem Befehl „garn“ oder „npm“.
Nachdem das Modul installiert ist, kann es direkt verpackt werden
Nachdem das Packen abgeschlossen ist, legen Sie die gepackte Datei in den oben erstellten Upload- Ordner ab. Der Front-End-Ordner heißt „view “ und der Back-End-Ordner heißt „admin“.
Nach Abschluss des vorherigen Schritts lautet die Zugangsadresse für die Rezeption: http://localhost/view
Die Hintergrundzugriffsadresse lautet: http://localhost/admin
Beim ersten Besuch ist die Front-End-Seite leer, da für diese Songs oder Playlists keine Ressourcendateien vorhanden sind. Sie können Sänger, Songs, Playlists und andere Informationen hinzufügen, indem Sie sich im Back-End anmelden, um sie anzuzeigen im Frontend.