1

.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitlab-ci.yml

+# This file is a template, and might need editing before it works on your project.
+# This is a sample GitLab CI/CD configuration file that should run without any modifications.
+# It demonstrates a basic 3 stage CI/CD pipeline. Instead of real tests or scripts,
+# it uses echo commands to simulate the pipeline execution.
+#
+# A pipeline is composed of independent jobs that run scripts, grouped into stages.
+# Stages run in sequential order, but jobs within stages run in parallel.
+#
+# For more information, see: https://docs.gitlab.com/ee/ci/yaml/index.html#stages
+#
+# You can copy and paste this template into a new `.gitlab-ci.yml` file.
+# You should not add this template to an existing `.gitlab-ci.yml` file by using the `include:` keyword.
+#
+# To contribute improvements to CI/CD templates, please follow the Development guide at:
+# https://docs.gitlab.com/ee/development/cicd/templates.html
+# This specific template is located at:
+# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Getting-Started.gitlab-ci.yml
+
+# include:
+#   - template: SAST.gitlab-ci.yml
+#   - template: Dependency-Scanning.gitlab-ci.yml
+
+# nodejs-scan-sast:
+#   tags: [ docker ]
+
+# semgrep-sast:
+#   tags: [ docker ]
+
+# gemnasium-dependency_scanning:
+#   tags: [ docker ]
+
+stages:          # List of stages for jobs, and their order of execution
+  - build
+  - test
+  - sync
+  - deploy
+
+build-job:       # This job runs in the build stage, which runs first.
+  stage: build
+  script:
+    - ls
+    - docker build -t demo/front .
+    - docker save demo/front -o demo.tar
+  artifacts:
+    untracked: true
+
+unit-test-job:   # This job runs in the test stage.
+  stage: test    # It only starts when the job in the build stage completes successfully.
+  script:
+    - echo "Running unit tests... This will take about 60 seconds."
+    - sleep 1
+    - echo "Code coverage is 90%"
+
+lint-test-job:   # This job also runs in the test stage.
+  stage: test    # It can run at the same time as unit-test-job (in parallel).
+  script:
+    - echo "Linting code... This will take about 10 seconds."
+    - sleep 1
+    - echo "No lint issues found."
+
+
+# code-quality:
+#   stage: test
+#   image: docker:20.10.12
+#   allow_failure: false
+#   services:
+#     - name: 'docker:20.10.12-dind'
+#       command: ['--tls=false', '--host=tcp://0.0.0.0:2375']
+#   variables:
+#     DOCKER_DRIVER: overlay2
+#     DOCKER_CERT_PATH: ""
+#     DOCKER_TLS_CERTDIR: ""
+#     DOCKER_TLS_VERIFY: ""
+#     CODE_QUALITY_IMAGE_TAG: "0.96.0"
+#     CODE_QUALITY_IMAGE: "$CI_TEMPLATE_REGISTRY_HOST/gitlab-org/ci-cd/codequality:$CODE_QUALITY_IMAGE_TAG"
+#     DOCKER_SOCKET_PATH: /var/run/docker.sock
+#   needs: []
+#   script:
+#     - export SOURCE_CODE=$PWD
+#     - |
+#       if ! docker info &>/dev/null; then
+#         if [ -z "$DOCKER_HOST" ] && [ -n "$KUBERNETES_PORT" ]; then
+#           export DOCKER_HOST='tcp://localhost:2375'
+#         fi
+#       fi
+#     - | # this is required to avoid undesirable reset of Docker image ENV variables being set on build stage
+#       function propagate_env_vars() {
+#         CURRENT_ENV=$(printenv)
+
+#         for VAR_NAME; do
+#           echo $CURRENT_ENV | grep "${VAR_NAME}=" > /dev/null && echo "--env $VAR_NAME "
+#         done
+#       }
+#     - |
+#       if [ -n "$CODECLIMATE_REGISTRY_USERNAME" ] && [ -n "$CODECLIMATE_REGISTRY_PASSWORD" ] && [ -n "$CODECLIMATE_PREFIX" ]; then
+#         CODECLIMATE_REGISTRY=${CODECLIMATE_PREFIX%%/*}
+#         docker login "$CODECLIMATE_REGISTRY" --username "$CODECLIMATE_REGISTRY_USERNAME" --password "$CODECLIMATE_REGISTRY_PASSWORD"
+#       fi
+#     - docker pull --quiet "$CODE_QUALITY_IMAGE"
+#     - |
+#       docker run --rm \
+#         $(propagate_env_vars \
+#           SOURCE_CODE \
+#           TIMEOUT_SECONDS \
+#           CODECLIMATE_DEBUG \
+#           CODECLIMATE_DEV \
+#           REPORT_STDOUT \
+#           REPORT_FORMAT \
+#           ENGINE_MEMORY_LIMIT_BYTES \
+#           CODECLIMATE_PREFIX \
+#           CODECLIMATE_REGISTRY_USERNAME \
+#           CODECLIMATE_REGISTRY_PASSWORD \
+#           DOCKER_SOCKET_PATH \
+#         ) \
+#         --volume "$PWD":/code \
+#         --volume "$DOCKER_SOCKET_PATH":/var/run/docker.sock \
+#         "$CODE_QUALITY_IMAGE" /code
+#     - cat gl-code-quality-report.json
+#     # - |
+#     #   if grep "issue" gl-code-quality-report.json
+#     #   then
+#     #     echo "Test fail"
+#     #     exit 1
+#     #   else
+#     #     echo "Test success"
+#     #     exit 0
+#     #   fi
+#   artifacts:
+#     reports:
+#       codequality: gl-code-quality-report.json
+#     paths:
+#       - gl-code-quality-report.json
+#     expire_in: 1 week
+#   dependencies: []
+#   rules:
+#     - if: '$CODE_QUALITY_DISABLED'
+#       when: never
+#     - if: '$CI_COMMIT_TAG || $CI_COMMIT_BRANCH'
+
+sync_with_github:
+  stage: sync
+  script:
+    - echo "syncing"
+    # - git remote add github https://$GITHUB_USERNAME:$GITHUB_TOKEN@github.com/$GITHUB_USERNAME/2024-HCI-Mirror.git
+    # - git push -u github --all
+    # - git push -u github --tags
+
+deploy-job:      # This job runs in the deploy stage.
+  stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
+  environment: production
+  script:
+    - sshpass -p "1qaz" scp -o StrictHostKeyChecking=no demo.tar cloudsky@172.29.4.13:~
+    - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'docker container rm -f demo; docker load -i demo.tar; docker run -d --name demo -e app_server_ip=172.29.4.13 -p 8080:8080 demo/front /bin/bash -c "nginx; tail -f /dev/null"'
+
+    # 1. 上传前端打包文件到云主机
+    # - sshpass -p "1qaz" scp -o StrictHostKeyChecking=no demo.tar cloudsky@172.29.4.13:~
+    # 2. 解压前端文件到 /var/www/html/demo 目录
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'tar -xf demo.tar -C /tmp'
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'tar -xvf demo.tar -C /var/www/html/demo'
+    # 3. 安装 nginx（如果尚未安装）
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'sudo apt update && sudo apt install -y nginx'
+    # 4. 配置 nginx：修改 default 配置文件，将 root 指向解压后的 demo 目录
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'sudo sed -i "s|root /var/www/html|root /var/www/html/demo;|g" /etc/nginx/sites-available/default'
+    # 5. 重启 nginx 使配置生效
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'sudo systemctl restart nginx'
+    # 6. 可选步骤：检查 nginx 状态
+    # - sshpass -p "1qaz" ssh -o StrictHostKeyChecking=no cloudsky@172.29.4.13 'sudo systemctl status nginx'

.husky/pre-commit

+#!/bin/bash
+
+echo "Checking code formatting..."
+
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all selected files
+echo "$FILES" | xargs prettier '*.{js,css,html,json,vue,md}' --list-different --ignore-unknown --write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+exit 0
\ No newline at end of file

Dockerfile

+FROM node:14.18-stretch as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+# RUN npm install --registry=https://registry.npm.taobao.org
+COPY ./ .
+RUN npm run build
+
+FROM nginx as production-stage
+RUN mkdir /app
+COPY --from=build-stage /app/dist /app
+COPY nginx.conf /etc/nginx/nginx.conf
+
+CMD nginx
\ No newline at end of file

Jenkinsfile

+pipeline {
+    agent {
+        label 'ABN-HW'
+    }
+    stages {
+        stage('SCM from Mirror') {
+            steps {
+                sh "ls -al"
+                sh "pwd"
+            }
+        }
+        stage('Image') {
+            steps {
+                sh "docker build . -t visualfrontend"
+            }
+        }
+        stage('Start') {
+            steps {
+                sh 'docker stop visualfrontend | true'
+                sh 'docker rm visualfrontend | true'
+                sh 'docker run -d --name visualfrontend -p 8190:80 visualfrontend:latest /bin/bash -c "nginx; tail -f /dev/null"'
+            }
+        }
+    }
+}

README.md

+# 2024-HCI-Mirror
+Mirror Repository from 2024-Devops-Frontend.

babel.config.js

+module.exports = {
+    presets: [
+        "@babel/preset-env",
+        "@babel/preset-typescript",
+        "@vue/cli-plugin-babel/preset",
+    ]
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

nginx.conf

+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+events {
+  worker_connections  1024;
+}
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+  keepalive_timeout  65;
+  client_max_body_size 100m;
+  server {
+    listen       8080;
+
+    location / {
+      root   /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+    }
+
+    # This is the proxy to backend, obviously the address will be modified accordingly after backend is also in the docker
+    location ^~ /api/ {
+        proxy_pass http://172.29.4.13:8080/api/;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }
+}

package.json

+{
+  "name": "2024-devops-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "build": {
+    "appId": "com.example.app",
+    "productName": "MyApp",
+    "files": [
+      "dist/**/*",
+      "main.js"
+    ]
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.7.7",
+    "colorthief": "^2.4.0",
+    "core-js": "^3.38.1",
+    "element-plus": "^2.8.2",
+    "pinia": "^2.2.2",
+    "swiper": "^11.1.14",
+    "uuid": "^11.0.3",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "browserify-fs": "^1.0.0",
+    "electron": "^33.2.1",
+    "electron-builder": "^25.1.8",
+    "less": "^4.2.1",
+    "less-loader": "^12.2.0",
+    "node-polyfill-webpack-plugin": "^4.1.0",
+    "path-browserify": "^1.0.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

public/index.html

+<!DOCTYPE html>
+<html lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
+    <link rel="icon" href="/icon.png" type="image/png">
+    <title>Beatify | Connect with Beats.</title>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>

src/App.vue

+<template>
+	<link rel="icon" href="assets/pictures/logos/logo1.png" type="image/png">
+	<div id="opacity-bg" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
+	<div id="opacity-bg1" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
+	<router-view/>
+</template>
+
+<script>
+</script>
+
+<style>
+#app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+	margin: 0;
+	padding: 0;
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+#opacity-bg, #opacity-bg1 {
+	z-index: -1;
+  height: 100%;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+  height: 100%;
+  width: 100%;
+	overflow: hidden;
+}
+
+</style>
\ No newline at end of file

src/api/_prefix.js

+export const API_MODULE = '/api'
+
+export const USER_MODULE = `${API_MODULE}/user`
+export const SONG_MODULE = `${API_MODULE}/song`
+export const PLAYLIST_MODULE = `${API_MODULE}/playlist`
+export const COMMENT_MODULE = `${API_MODULE}/comments`
+export const MANAGER_MODULE = `${API_MODULE}/manager`
+export const SHARE_MODULE = `${API_MODULE}/share`
+export const SEARCH_MODULE = `${API_MODULE}/search`
+export const RESOLVE_MODULE = `${API_MODULE}/resolve`
\ No newline at end of file

src/api/comment.js

+import {axios} from '../utils/request';
+import {COMMENT_MODULE} from './_prefix';
+
+/*
+    // TODO - newly added
+    + song_id: number
+ */
+export const getSongComments = (commentInfo) => {
+    console.log(commentInfo)
+    return axios.get(`${COMMENT_MODULE}/querySong/${commentInfo.song_id}`, {
+        params: {
+            page: commentInfo.page,
+            pageSize: commentInfo.pageSize,
+            sort: commentInfo.sort
+        }
+    })
+        .then((res) => {
+            return res
+        })
+}
+
+/*
+    // TODO - newly added
+    + playlist_id: number
+ */
+export const getPlaylistComments = (commentInfo) => {
+    console.log(commentInfo)
+    return axios.get(`${COMMENT_MODULE}/queryPlaylist/${commentInfo.playlist_id}`)
+        .then((res) => {
+            return res
+        })
+}
+
+/*
+    song_id: number
+ */
+export const getSongCommentsCount = (commentInfo) => {
+    console.log(commentInfo)
+    return axios.get(`${COMMENT_MODULE}/countSong/${commentInfo.song_id}`)
+        .then((res) => {
+            return res
+        })
+}
+/*
+    // TODO - modified
+    - commenter_user_name: string
+    - song_name: string
+    comment: string
+    + commenter_user_id: number
+    + song_id: number
+ */
+export const commentSong = (commentSongInfo) => {
+    console.log(commentSongInfo)
+    return axios.post(`${COMMENT_MODULE}/song`, commentSongInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO - modified
+    - commenter_user_name: string
+    - playlist_owner_name: string
+    - playlist_name: string
+    comment: string
+    + commenter_user_id: number
+    + playlist_id: number
+ */
+export const commentPlaylist = (commentPlaylistInfo) => {
+    return axios.post(`${COMMENT_MODULE}/playlist`, commentPlaylistInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        });
+}
+
+// 添加点赞评论的方法
+export const likeComment = (likeInfo) => {
+    return axios.post(`${COMMENT_MODULE}/like`, {
+        userId: likeInfo.userId,
+        commentId: likeInfo.commentId,
+        isLike: likeInfo.isLike
+    }, {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        });
+}

src/api/manager.js

+import { axios } from '../utils/request';
+import { MANAGER_MODULE } from './_prefix';
+
+
+/*
+    // TODO - modified
+    song_name: string
+    album?: string
+    artist: string
+    + description: string
+    audio_path: string
+    + cover_path: string
+    lyrics_path?: string
+    upload_time: datetime
+ */
+export const addSong = (songInfo) => {
+    return axios.post(`${MANAGER_MODULE}/addSong`, songInfo,
+        { headers: { 'Content-Type': 'application/json' } })
+        .then(res => {
+            return res;
+        });
+}

src/api/playlist.js

+import { axios } from '../utils/request';
+import { PLAYLIST_MODULE } from './_prefix';
+
+
+/*
+    // TODO - modified
+    - user_name: string
+    + user_id: number
+ */
+export const getPlaylistsByUser = (userInfo) => {
+    console.log(userInfo)
+    return axios.get(`${PLAYLIST_MODULE}/fetch`, { params: userInfo })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO - modified
+    - user_name: string
+    playlist_name: string
+    + user_id: number
+    + playlist_description: string
+ */
+export const createPlaylist = (playlistCreateInfo) => {
+    return axios.post(`${PLAYLIST_MODULE}/create`, playlistCreateInfo,
+        { headers: { 'Content-Type': 'application/json' } })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO - modified
+    - user_name: string
+    - playlist_name: string
+    - song_name: string
+    + user_id: number
+    + playlist_id: number
+    + song_id: number
+ */
+export const addSongToPlaylist = (songInfo) => {
+    return axios.post(`${PLAYLIST_MODULE}/addSong`, songInfo,
+        { headers: { 'Content-Type': 'application/json' } })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO - newly added
+    - playlist_id: number
+ */
+export const removePlaylist = (removePlaylistInfo) => {
+    console.log(removePlaylistInfo)
+    return axios.post(`${PLAYLIST_MODULE}/delete`, null,
+        { params: removePlaylistInfo })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO - newly added
+    - playlist_id: number
+    - song_id: number
+ */
+export const removeSongFromPlaylist = (removeSongFromPlaylistInfo) => {
+    console.log(removeSongFromPlaylistInfo)
+    return axios.post(`${PLAYLIST_MODULE}/removeSong`, null,
+        { params: removeSongFromPlaylistInfo })
+        .then(res => {
+            return res;
+        });
+}
\ No newline at end of file

src/api/resolve.js

+import {axios} from "@/utils/request";
+import {PLAYLIST_MODULE, RESOLVE_MODULE, SONG_MODULE, USER_MODULE} from "@/api/_prefix";
+
+/*
+    // TODO: newly added
+    + user_id: number
+ */
+export const getUserById = (userId) => {
+    console.log(userId)
+    return axios.get(`${USER_MODULE}/id`, { params: userId })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO: newly added
+    + song_id: number
+ */
+export const getSongById = (songId) => {
+    console.log(songId)
+    return axios.get(`${SONG_MODULE}/id`, { params: songId })
+        .then(res => {
+            return res;
+        });
+}
+
+/*
+    // TODO: newly added
+    + playlist_id: number
+ */
+export const getPlaylistById = (playlistId) => {
+    console.log(playlistId)
+    return axios.get(`${PLAYLIST_MODULE}/id`, { params: playlistId })
+        .then(res => {
+            return res;
+        });
+}
\ No newline at end of file