当前位置：首页 > news >正文

使用AI一步一步实现若依前端(9)

news 来源：原创 2025/8/21 16:49:33

功能9：退出登录功能

功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目

前言

模板代码使用AI生成，基本可以实现大概的效果。想要精细化调整，可以等到功能实现完成后再进行重构。

一.操作步骤

1.使用AI生成模板代码

将现有的Navbar.vue的代码附上，然后让AI根据要求生成想要的代码。
在这里插入图片描述

最后在退出登录的方法里，调用userStore的logout方法，成功后使用location.href = '/index'

<template><el-header class="navbar"><el-breadcrumb separator="/"><el-breadcrumb-itemv-for="item in breadcrumbItems":key="item.path":to="item.path">{{ item.title }}</el-breadcrumb-item></el-breadcrumb><div class="user-menu"><el-dropdown trigger="hover"><div class="avatar-container"><img :src="avatarUrl" alt="用户头像"class="avatar-image"/></div><template #dropdown><el-dropdown-menu class="dropdown-menu"><el-dropdown-item @click="handleSettings"class="menu-item"><span>个人设置</span></el-dropdown-item><el-dropdown-item divided @click="handleLogout"class="menu-item"><span>退出登录</span></el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></el-header>
</template><script setup>
import { ElHeader, ElBreadcrumb, ElBreadcrumbItem, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'const breadcrumbItems = [{ title: '首页', path: '/' },{ title: '关于', path: '/about' }
]// 请确保在 assets 目录下存在 user-avatar.png 图片文件
const avatarUrl = new URL('@/assets/images/profile.jpg', import.meta.url).hrefimport useUserStore from '@/stores/user'
const userStore = useUserStore()const handleLogout = () => {// 处理退出登录逻辑ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {userStore.logout().then(() => {location.href = '/index';})}).catch(() => { });
}const handleSettings = () => {// 处理设置逻辑console.log('打开设置页面')
}
</script><style scoped>
/* 导航栏整体样式 */
.navbar {background-color: #ffffff;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #e5e7eb;display: flex;align-items: center;justify-content: space-between;height: 64px;padding: 0 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}/* 用户菜单容器 */
.user-menu {position: relative;z-index: 1000;
}/* 头像容器 */
.avatar-container {position: relative;width: 40px;height: 40px;transition: all 0.3s ease;
}/* 头像图片样式 */
.avatar-image {width: 100%;height: 100%;border-radius: 9999px;object-fit: cover;border: 2px solid #fff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}/* 悬停效果 */
.avatar-container:hover .avatar-image {transform: scale(1.1);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* 下拉菜单样式 */
.dropdown-menu {border: none !important;border-radius: 8px !important;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;margin-top: 12px !important;padding: 8px 0 !important;
}/* 菜单项样式 */
.menu-item {font-size: 14px;color: #333 !important;transition: all 0.2s ease;
}.menu-item:hover {background: #f5f7fa !important;color: #409eff !important;transform: translateX(4px);
}/* 分割线样式 */
.el-dropdown-menu__item--divided {border-color: #ebeef5 !important;
}
</style>

2.userStore增加logout方法

暂时先简单的实现删除token。

const logout = async () => {await removeToken()}

二.功能验证

运行项目，浏览器访问http://localhost:5173/index
在这里插入图片描述

三.知识点拓展

1. 单文件组件 (SFC)

代码表现：

<template>...</template>
<script setup>...</script>
<style scoped>...</style>

通俗解释：
• 就像"网页三件套"（HTML+CSS+JS）的现代版升级
• template 是组件的外观布局（类似HTML）
• script 是组件的核心逻辑（类似JS）
• style 是组件的化妆包（类似CSS）
• scoped 表示这个化妆包只服务当前组件，不会影响其他组件

2. 组合式 API (Composition API)

代码表现：

<script setup>
// 所有代码都写在这里
const handleLogout = () => {...}
</script>

通俗解释：
• Vue 3 的代码组织新方式，类似搭积木
• 特点：
• 所有功能代码集中编写，不再分散在 options 中
• 使用普通变量和函数就能实现响应式
• 代码复用更方便（可以抽离为函数）

3. 组件通信

代码表现：

import { ElHeader, ElBreadcrumb } from 'element-plus'

通俗解释：
• 组件就像乐高积木，可以自由组合
• 第三方组件（如 Element Plus）需要先导入再使用
• 组件间通过 props（属性）和 events（事件）传递信息
• 例如：<el-breadcrumb> 接收到 separator="/" 属性后显示斜杠分隔符

4. 状态管理 (Pinia)

代码表现：

import useUserStore from '@/stores/user'
const userStore = useUserStore()
userStore.logout()

通俗解释：
• 专门管理需要全局共享的数据（比如用户登录状态）
• 相当于给组件们建立一个共享储物柜
• 使用流程：

定义储物柜（创建 store）
需要时打开储物柜（import store）
存取物品（读写状态）

5. 样式作用域

代码表现：

<style scoped>
.avatar-image { ... }
</style>

通俗解释：
• 给样式添加"防污染护盾"
• 带 scoped 的样式只影响当前组件
• 实现原理：自动给选择器添加唯一标识，如：

.avatar-image[data-v-f3f3eg9] { ... }

6. 响应式基础

代码表现：

const avatarUrl = new URL(...) // 静态资源引用

潜在响应式用法：

import { ref } from 'vue'const count = ref(0) // 变成响应式数据
function add() {count.value++ // 修改时页面自动更新
}

通俗解释：
• 让数据与界面保持同步的魔法
• 当数据变化时，界面会自动更新
• Vue 3 主要使用 ref() 和 reactive() 实现

7. 生命周期

代码表现：

// 隐含在组件初始化过程中

通俗解释：
• 组件的"人生阶段"：

出生（创建）
成长（更新）
消亡（销毁）
• 常用钩子：
• onMounted：组件加载完成时（适合请求数据）
• onUpdated：数据更新时
• onUnmounted：组件销毁时（适合清理资源）

功能9：退出登录功能

前言

一.操作步骤

1.使用AI生成模板代码

2.userStore增加logout方法

二.功能验证

三.知识点拓展

1. 单文件组件 (SFC)

2. 组合式 API (Composition API)

3. 组件通信

4. 状态管理 (Pinia)

5. 样式作用域

6. 响应式基础

7. 生命周期

知识图谱

四.思考

相关文章：