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

功能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-item
        v-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).href

import 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()

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

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

---

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. 生命周期

代码表现：

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

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

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

---

知识图谱

四.思考