personal music website

situs web-musik-pribadi

Pengenalan proyek

Proyek ini telah melakukan optimasi berikut berdasarkan proyek situs web musik SpringBoot + Vue di Stasiun B :

• Front-end situs musik menambahkan fungsi peringkat
• Pemutar musik menambahkan fungsi pergantian putaran tunggal, pemutaran acak, dan pemutaran berurutan saat memutar lagu.
• Menambahkan fungsi pengguliran lirik ke antarmuka tampilan lirik
• Menambahkan fungsi melihat rekaman pemutaran musik historis pengguna di antarmuka Musik Saya.
• Berdasarkan fungsi pengumpulan item video, fungsi baru untuk membatalkan pengumpulan ditambahkan.
• Menambahkan fungsi baru untuk membatalkan suka di halaman komentar lagu pengguna
• Saat pengguna masuk, daftar putar dan penyanyi serupa dapat direkomendasikan kepada pengguna melalui catatan mendengarkan musik historis pengguna dan lagu favorit serta rekaman daftar putar.
• Antarmuka backend situs musik telah menambahkan fungsi intersepsi rute. Antarmuka permintaan data backend perlu membawa token untuk mengaksesnya. Status login administrator backend dikendalikan oleh redis untuk mengontrol ketepatan waktu token.
• Semua file sumber daya statis dalam proyek diakses menggunakan server statis nginx, sehingga file statis dapat dipisahkan sepenuhnya dari kode latar belakang

Proses operasi proyek

Konfigurasi lingkungan backend

Konfigurasi basis data

• Instal database MySQL8 dan perangkat lunak visualisasi Navicat
• Setelah menginstal perangkat lunak terkait database, impor file music.sql di direktori music-server/src/resources ke Navicat.

Konfigurasi lingkungan pengembangan

• jdk18
• pakar 3.8.6
• redis 5.0.14
• nginx 1.23.1

pengenalan konfigurasi nginx

• Buat folder unggahan di direktori akar drive C , lalu buat folder avatar dan suara di folder unggahan .
• Direktori instalasi nginx harus ada di drive C. Setelah instalasi selesai dan startup berhasil, modifikasi file konfigurasi nginx.conf di folder conf di direktori instalasi 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/;
       }

• Setelah modifikasi konfigurasi selesai, restart nginx. Jika tidak terjadi error maka konfigurasi nginx selesai.

Konfigurasi lingkungan front-end

• nodejs 16.16.0
• Setelah instalasi nodejs selesai, konfigurasikan sumber gambar npm , lalu gunakan perintah npm untuk menginstal manajer paket benang secara global.

Operasi proyek

Berjalan di latar belakang

• Buka semua file di direktori server musik dengan versi IDEA2022 , lalu tunggu proyek mengunduh dependensi maven
• Setelah pengunduhan ketergantungan selesai, ubah file konfigurasi di sumber daya dan modifikasi sesuai dengan lingkungan konfigurasi Anda sendiri.
• Setelah mengubah konten file konfigurasi, Anda perlu menambahkan nama pengguna, kata sandi, dan peran administrator backend ke tabel admin di database musik . Kata sandi dibuat melalui enkripsi springsecurity dan disimpan dalam database , setel ke admin.

Jalankan di latar depan

• Instal modul yang diperlukan menggunakan perintah benang atau npm
• Setelah modul terpasang, dapat langsung dikemas
• Setelah pengemasan selesai, masukkan file yang sudah dikemas ke dalam folder upload yang dibuat di atas. Folder front-end diberi nama view dan folder back-end diberi nama admin.
• Setelah langkah sebelumnya selesai, alamat akses meja depan adalah: http://localhost/view
• Alamat akses latar belakang adalah: http://localhost/admin
• Pada kunjungan pertama, karena tidak ada file sumber daya untuk lagu atau playlist tersebut di database, halaman front-end semuanya kosong. Anda dapat menambahkan penyanyi, lagu, playlist, dan informasi lainnya dengan masuk ke back-end untuk ditampilkan di bagian depan.

Jalankan tangkapan layar