{"id":76,"date":"2026-01-25T20:20:40","date_gmt":"2026-01-25T12:20:40","guid":{"rendered":"http:\/\/154.36.185.147\/?p=76"},"modified":"2026-02-14T21:28:08","modified_gmt":"2026-02-14T13:28:08","slug":"vue%e6%a1%86%e6%9e%b6%e5%a4%8d%e5%88%bb%e7%bd%91%e6%98%93%e4%ba%91%e5%89%8d%e7%ab%af","status":"publish","type":"post","link":"http:\/\/www.plutoze.xyz\/index.php\/2026\/01\/25\/vue%e6%a1%86%e6%9e%b6%e5%a4%8d%e5%88%bb%e7%bd%91%e6%98%93%e4%ba%91%e5%89%8d%e7%ab%af\/","title":{"rendered":"Vue\u6846\u67b6\u590d\u523b\u7f51\u6613\u4e91\u524d\u7aef"},"content":{"rendered":"\n

\u6700\u8fd1\u5b66\u4e86\u5b66Vue\u6846\u67b6\uff0c\u6b63\u597d\u627e\u5230\u4e86\u7f51\u6613\u4e91\u6c11\u95f4\u5927\u4f6c\u7684API\uff0c\u5c31\u5c1d\u8bd5\u590d\u523b\u4e86\u4e00\u4e0b\uff0c\u7740\u91cd\u8bf4\u4e00\u4e0b\u8def\u7531\uff0caxios\u548cpinia\u90e8\u5206\uff0c\u4ee5\u53ca\u4e00\u4e9b\u529f\u80fd\u7684\u5b9e\u73b0\u3002<\/p>\n\n\n\n

\u8def\u7531<\/strong>\uff1a\u901a\u8fc7Vue\u7684router\u7ec4\u4ef6\uff0c\u7528webhistory\u6a21\u5f0f\u8fdb\u884c\u914d\u7f6e\uff0c\u5e76\u4f7f\u7528query\u8fdb\u884c\u4f20\u9012\u6570\u636e<\/p>\n\n\n\n

import { createRouter, createWebHistory } from 'vue-router'\nimport MusicHall from '..\/views\/MusicHall.vue'\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    {\n      path: '\/',\n      name: 'MusicHall',\n      component: MusicHall,\n    },\n    {\n      path: '\/login',\n      name: 'Login',\n      component: () => import('..\/views\/Login.vue'),\n    },\n    {\n      path: '\/mymusic',\n      name: 'MyMusic',\n      component: () => import('..\/views\/MyMusic.vue'),\n    },\n    {\n      path: '\/player',\n      name: 'Player',\n      component: () => import('..\/views\/Player.vue'),\n    },\n    {\n      path: '\/search',\n      name: 'Search',\n      component: () => import('..\/views\/Search.vue'),\n    },\n    {\n      path: '\/music-list',\n      name: 'MusicList',\n      component: () => import('..\/views\/MusicList.vue'),\n    },\n  ],\n})\n\nexport default router\n<\/code><\/pre>\n\n\n\n
axios<\/strong>\uff1a\u8d1f\u8d23API\u4e0e\u524d\u7aef\u7684\u8fde\u63a5\uff0c\u5c01\u88c5\u4e86\u5bf9\u63a5\u53d7\u4e0e\u53d1\u9001\u7684\u62e6\u622a\u548cget\u4e0epost\u65b9\u6cd5\u7684\u5c01\u88c5\uff0c\u5bf9\u8bf7\u6c42\u5934\u6dfb\u52a0\u4e86\u4fdd\u5b58\u5728\u4e86\u6d4f\u89c8\u5668\u672c\u5730\u7684token\uff0c\u89c4\u5b9a\u4e86get\u4e0epost\u65f6\u53c2\u6570\u7684\u4f20\u9012\u65b9\u5f0f<\/p>\n\n\n\n
import axios from \"axios\";\n\nconst instance = axios.create({\n  baseURL: 'http:\/\/localhost:3000',\n  timeout: 10000,\n  withCredentials: true,\n});\ninstance.interceptors.request.use( (config) => {\n    const token = localStorage.getItem('token');\n    if (token) {\n        config.headers['Authorization'] = `Bearer ${token}`;\n    }\n  return config;\n}, function (error) {\n\n  return Promise.reject(error);\n});\ninstance.interceptors.response.use( (response) => {\n  return response.data;\n}, function (error) {\n  return Promise.reject(error);\n});\nexport function get(url,params = {},config = {}){\n    return instance.get(url,{params,...config})\n}\nexport function post(url, data={}, config={}) {\n  return instance.post(url, data, config);\n}\nconst api = {\n  get,\n  post,\n};\nexport default api;\n<\/code><\/pre>\n\n\n\n
pinia<\/strong>\uff1a\u5728\u524d\u7aefpinia\u91cc\u7528json\u683c\u5f0f\u4fdd\u5b58\uff0c\u5e76\u5728\u6d4f\u89c8\u5668\u4e2d\u4ee5\u5b57\u7b26\u4e32\u683c\u5f0f\u4fdd\u5b58<\/p>\n\n\n\n
import { ref,computed} from 'vue';\nimport { defineStore } from 'pinia';\nconst KEY = 'nc_user';\nexport const useUserStore = defineStore('user', () => {\n      const user = ref(null);\n      const username = ref(null);\n      const isLoggedIn = computed(() => !!user.value);\n      const setUser=(Payload) => {\n\n        const normallized={\n          id: Payload.id,\n          nickname: Payload.nickname,\n          avatar: Payload.avatar,\n        }\n        user.value = normallized;\n        localStorage.setItem(KEY,JSON.stringify(normallized));\n      }\n      const clearUser=()=>{\n        user.value = null;\n        localStorage.removeItem(KEY);\n      }\n      const InitFromLocal=()=>{\n        const savedUser = localStorage.getItem(KEY);\n        if(savedUser){\n          user.value = JSON.parse(savedUser);\n        }}\n        InitFromLocal();\n      return {\n        user,\n        isLoggedIn,\n        setUser,\n        clearUser,\n      };\n})\n<\/code><\/pre>\n\n\n\n
\u97f3\u4e50\u64ad\u653e\u5668<\/strong>\uff1a<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u8fdb\u5ea6\u6761\u663e\u793a\u4e0e\u8df3\u8f6c<\/strong>\uff1a\u5bf9\u64ad\u653e\u5668\u7684\u52a0\u8f7d\uff0c\u64ad\u653e\uff0c\u7ed3\u675f\u5206\u522b\u8c03\u7528\u56de\u8c03\u51fd\u6570\uff0c\u4ee5\u83b7\u53d6\u603b\u65f6\u957f\uff0c\u5df2\u64ad\u653e\u65f6\u957f\u7b49\u4fe1\u606f\uff0c\u5e76\u8ba1\u7b97\u6bd4\u4f8b\uff0c\u5f97\u51fa\u957f\u5ea6\uff0c\u540c\u65f6\u5b9a\u4e49\u70b9\u51fb\u4e8b\u4ef6\uff0c\u83b7\u53d6\u70b9\u51fb\u90e8\u4f4d\u4e0e\u8fdb\u5ea6\u6761\u957f\u5ea6\u6bd4\u4f8b\uff0c\u6362\u7b97\u4e3a\u65f6\u95f4\u6bd4\u4f8b\uff0c\u8fdb\u884c\u8df3\u8f6c\u3002<\/p>\n\n\n\n
 <audio \n                    :src=\"audioUrl\"\n                    v-if=\"audioUrl\"\n                    ref=\"audioRef\"\n                    class=\"audio-hidden\"\n                    @loadedmetadata=\"handleLoadedMetadata\"\n                    @timeupdate=\"handleTimeUpdate\"\n                    @ended=\"handleAudioEnded\"\n                ><\/audio><\/code><\/pre>\n\n\n\n
const handleTogglePlay = async () => {\n  if (!audioUrl.value) return;\n  if (audioRef.value.paused) {\n    audioRef.value.play().then(()=>{\n      isPlaying.value = true\n    }).catch(() =>{});\n  } else {\n    audioRef.value.pause()\n    isPlaying.value = false\n  }\n};\n<\/code><\/pre>\n\n\n\n
\u5531\u7247\u65cb\u8f6c<\/strong>\uff1a\u901a\u8fc7\u5df2\u64ad\u653e\u7684\u65f6\u95f4\u4e58\u5ea6\u6570\u53d6\u4f59360\u5f97\u51fa\u9700\u8981\u503e\u659c\u7684\u89d2\u5ea6\uff0c\u7136\u540e\u5e73\u6ed1\u65cb\u8f6c\u5373\u53ef\u89e3\u51b3\u3002<\/p>\n\n\n\n
\/\/ \u8ba1\u7b97\u65cb\u8f6c\u89d2\u5ea6\nconst calculateRotation = () => {\n  if(isPlaying.value) {\n    \/\/ \u6839\u636e\u64ad\u653e\u7684\u65f6\u95f4\u6765\u8ba1\u7b97\u65cb\u8f6c\u89d2\u5ea6\n    \/\/ \u5047\u8bbe\u6309baseSpeed\u7684\u901f\u5ea6\u6301\u7eed\u65cb\u8f6c\n    const elapsed = currentTime.value; \/\/ \u4ece\u6b4c\u66f2\u5f00\u59cb\u64ad\u653e\u5230\u73b0\u5728\u7684\u65f6\u95f4\n    rotationAngle.value = (elapsed * baseSpeed.value) % 360;\n  }\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1\u5b66\u4e86\u5b66Vue\u6846\u67b6\uff0c\u6b63\u597d\u627e\u5230\u4e86\u7f51\u6613\u4e91\u6c11\u95f4\u5927\u4f6c\u7684API\uff0c\u5c31\u5c1d\u8bd5\u590d\u523b\u4e86\u4e00\u4e0b\uff0c\u7740\u91cd\u8bf4\u4e00\u4e0b\u8def\u7531\uff0caxios\u548cpini […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-learn"],"_links":{"self":[{"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":2,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":97,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/posts\/76\/revisions\/97"}],"wp:attachment":[{"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.plutoze.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}