From 133855de898ede5b8b6caf1d642821a858273fb2 Mon Sep 17 00:00:00 2001 From: yumaojun03 <719118794@qq.com> Date: Sun, 12 Jan 2025 12:07:48 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E9=A1=B5=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vblog/logs/vblog.log | 13 +++ vblog/web/README.md | 85 +++++++++++++++++++ vblog/web/src/router/index.js | 19 +++++ vblog/web/src/stores/token.js | 4 + vblog/web/src/views/backend/BackendLayout.vue | 25 +++++- vblog/web/src/views/backend/blog/ListPage.vue | 18 +++- vblog/web/src/views/common/LoginPage.vue | 4 + 7 files changed, 164 insertions(+), 4 deletions(-) diff --git a/vblog/logs/vblog.log b/vblog/logs/vblog.log index 1024e5b..a296dca 100644 --- a/vblog/logs/vblog.log +++ b/vblog/logs/vblog.log @@ -221,3 +221,16 @@ {"level":"info","component":"server","time":"2025-01-12T09:32:52+08:00","caller":"ioc/server/server.go:77","message":"loaded defaults: []"} {"level":"info","component":"http","time":"2025-01-12T09:32:52+08:00","caller":"config/http/http.go:144","message":"HTTP服务启动成功, 监听地址: 127.0.0.1:8080"} {"level":"debug","time":"2025-01-12T09:33:34+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:00:05+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:01:23+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:01:24+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:01:33+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:01:36+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:02:57+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:03:31+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:03:48+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:17:11+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:17:18+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:19:41+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:25:37+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} +{"level":"debug","time":"2025-01-12T11:44:07+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"} diff --git a/vblog/web/README.md b/vblog/web/README.md index 6e69ffe..5adcf93 100644 --- a/vblog/web/README.md +++ b/vblog/web/README.md @@ -322,3 +322,88 @@ const routes = [ }, ] ``` + +```js +// 文章管理 +// 标签管理 +const handleMenuItemClick = (key) => { + // https://router.vuejs.org/zh/guide/essentials/navigation.html + router.push({ name: key }) +} +``` + +## 登录与退出 + +```js +const summitLoading = ref(false) +const handleSubmit = async (data) => { + if (data.errors === undefined) { + try { + summitLoading.value = true + const tk = await LOGIN(data.values) + // 保存当前用户的登录状态 + token.value.access_token = tk.access_token + token.value.ref_user_name = tk.ref_user_name + token.value.refresh_token = tk.refresh_token + + // 需要把用户重定向到Home页面去了 + router.push({ name: 'blog_management' }) + } catch (error) { + console.log(error) + } finally { + summitLoading.value = false + } + } +} +``` + +```js +const logout = () => { + // 需要调用Logout接口的, 自己添加下退出接口 + // 之前的登录状态给清理掉, store + token.value = undefined + // 需要重定向到登录页面 + router.push({ name: 'login' }) +} +``` + +## 导航守卫 + +https://router.vuejs.org/zh/guide/advanced/navigation-guards.html + +```js +const router = createRouter({ ... }) + +router.beforeEach((to, from) => { + // ... + // 返回 false 以取消导航 + return false +}) +``` + +```js +router.beforeEach((to, from) => { + const whiteList = ['login'] + if (!whiteList.includes(to.name)) { + // 需要做权限判断 + if (isLogin()) { + return true + } + // 返回跳转后的页面 + return { name: 'login' } + } +}) +``` + +## 覆盖UI的默认样式 + +css, :deep(), 用于选择需要覆盖的class进行覆盖 + +:deep 选择器并不是一个通用的 CSS 选择器，而是特定于某些框架（如 Vue.js 和 Svelte）中用于 Scoped CSS 的一个特性。它的主要目的是允许开发者在使用 Scoped CSS 的情况下，能够针对子组件或外部组件的样式进行覆盖。 + +```js + + diff --git a/vblog/web/src/views/common/LoginPage.vue b/vblog/web/src/views/common/LoginPage.vue index 9dcbc42..ef12125 100644 --- a/vblog/web/src/views/common/LoginPage.vue +++ b/vblog/web/src/views/common/LoginPage.vue @@ -37,6 +37,9 @@ import { reactive, ref } from 'vue'; import { LOGIN } from '@/api/token.js' import { token } from '@/stores/token' +import { useRouter } from 'vue-router'; + +const router = useRouter() const loginForm = reactive({ username: '', @@ -56,6 +59,7 @@ const handleSubmit = async (data) => { token.value.refresh_token = tk.refresh_token // 需要把用户重定向到Home页面去了 + router.push({ name: 'blog_management' }) } catch (error) { console.log(error) } finally {