personal music website

personal-music-website

Project introduction

This project has made the following optimizations based on the SpringBoot + Vue music website project of Station B :

• The front-end of the music website adds a ranking function
• The music player adds single loop, random play, and sequential play switching functions when playing songs.
• Added lyrics scrolling function to the lyrics display interface
• Added the function of viewing the user's historical music playing records in the My Music interface.
• Based on the video item collection function, a new function of canceling collection is added.
• Added a new function to cancel likes on the user's song comment page
• When the user is logged in, similar playlists and singers can be recommended to the user through the user's historical music listening records and favorite songs and playlist records.
• The backend interface of the music website has added a route interception function. The backend data request interface needs to carry a token to access it. The login status of the backend administrator is controlled by redis to control the timeliness of the token.
• All static resource files in the project are accessed using nginx static server, so that static files can be completely separated from the background code

Project operation process

Backend environment configuration

Database configuration

• Install MySQL8 database and visualization software Navicat
• After installing the database-related software, import the music.sql file in the music-server/src/resources directory into Navicat.

Development environment configuration

• jdk18
• maven 3.8.6
• redis 5.0.14
• nginx 1.23.1

nginx configuration introduction

• Create an upload folder in the root directory of drive C , and then create avatar and voice folders in the upload folder.
• The installation directory of nginx needs to be on the C drive. After the installation is completed and the startup is successful, modify the nginx.conf configuration file in the conf folder in the nginx installation directory. The specific modifications are as follows:

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

• After the configuration modification is completed, restart nginx. If no errors occur, the nginx configuration is complete.

Front-end environment configuration

• nodejs 16.16.0
• After the nodejs installation is complete, configure the npm image source, and then use the npm command to install the yarn package manager globally.

Project operation

Running in the background

• Open all files in the music-server directory with IDEA2022 version, and then wait for the project to download maven dependencies
• After the dependency download is complete, modify the configuration file in the resource and modify it according to your own configured environment.
• After modifying the content of the configuration file, you need to add the username, password and role of the backend administrator to the admin table in the music database. The password is generated through springsecurity encryption and stored in the database. If the role is set, set it to admin.

Run in foreground

• Install required modules using yarn or npm command
• After the module is installed, it can be packaged directly
• After packaging is completed, put the packaged file into the upload folder created above. The front-end folder is named view and the back-end folder is named admin.
• After the previous step is completed, the front desk access address is: http://localhost/view
• The background access address is: http://localhost/admin
• On the first visit, since there are no resource files for those songs or playlists in the database, the front-end page is all blank. You can add singers, songs, playlists and other information by logging in to the back-end for display in the front-end.

Run screenshot