Vue3.0项目实战（三）——大事件管理系统首页 layout 架子与文章分类的实现

[1. 首页 layout 架子 [element-plus 菜单]](#1. 首页 layout 架子 [element-plus 菜单])

[1.1 基本架子拆解](#1.1 基本架子拆解)

[2. 登录访问拦截](#2. 登录访问拦截)

[2.1 需求](#2.1 需求)

[2.2 vue3 和 vue2 中的 Vue-Router 区别](#2.2 vue3 和 vue2 中的 Vue-Router 区别)

[3. 用户基本信息获取&渲染](#3. 用户基本信息获取&渲染)

[4. 退出功能 [element-plus 确认框]](#4. 退出功能 [element-plus 确认框])

[5. 文章分类页面 - [element-plus 表格]](#5. 文章分类页面 - [element-plus 表格])

[5.1 基本架子 - PageContainer](#5.1 基本架子 - PageContainer)

[6. 文章分类渲染](#6. 文章分类渲染)

[6.1 封装API - 请求获取表格数据](#6.1 封装API - 请求获取表格数据)

[6.2 el-table 表格动态渲染](#6.2 el-table 表格动态渲染)

[6.3 el-table 表格 loading 效果](#6.3 el-table 表格 loading 效果)

[7. 文章分类添加编辑 [element-plus 弹层]](#7. 文章分类添加编辑 [element-plus 弹层])

[7.1 点击显示弹层](#7.1 点击显示弹层)

[7.2 封装弹层组件 ChannelEdit](#7.2 封装弹层组件 ChannelEdit)

[7.3 准备弹层表单](#7.3 准备弹层表单)

[7.4 确认提交](#7.4 确认提交)

[7.5 文章分类删除](#7.5 文章分类删除)

1. 首页 layout 架子 [element-plus 菜单]

1.1 基本架子拆解

架子组件列表

el-container

el-aside 左侧
- el-menu 左侧边栏菜单
el-container 右侧
- el-header 右侧头部
  - el-dropdown
- el-main 右侧主体
  - router-view

html 复制代码

<template>
  <!-- 
    el-menu 整个菜单组件
    :default-active="$route.path" 配置默认高亮的菜单项
    router 路由选项开启，el-menu-item 的 index 就是点击跳转的路径 
  -->
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon>
            <Management />
          </el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <!-- 多级菜单的标题-具名插槽 title -->
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </template>
          <!-- 展开的内容-默认插槽 -->
          <el-menu-item index="/user/profile">
            <el-icon>
              <User />
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon>
              <Crop />
            </el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 侧边栏 -->
    <el-container>
      <el-header>
        <div>
          黑马程序员：<strong>{{
            userStore.userInfo.nickname || userStore.userInfo.username
          }}</strong>
        </div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar :src="userStore.userInfo.user_pic || avatar" />
            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="password" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

2. 登录访问拦截

2.1 需求

只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问

2.2 vue3 和 vue2 中的 Vue-Router 区别

① router 和 route 在组件内的使用

vue 2.0
- this.$router ------全局路由对象
- this.route ------当前正在跳转的路由对象
vue 3.0
- import { useRouter, useRoute } from 'vue-router'
- const router = useRouter()
- const route = useRoute()

② 路由前置守卫

vue 2.0

javascript 复制代码

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

to: Route : 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 放行路由跳转
- next(false)：拦截路由跳转
vue 3.0

javascript 复制代码

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

每个守卫方法接收两个参数：

to : 即将要进入的目标用一种标准化的方式
from : 当前导航正要离开的路由用一种标准化的方式
返回值如下:
- false 拦截回 from 的地址页面
- undefined / true 直接放行
- 具体路径或路径对象拦截到对应的地址 '/login' { name: 'login' }

③ 文档

vue2.0：导航守卫 | Vue Router 导航守卫 | Vue Router
vue3.0：导航守卫 | Vue Router 导航守卫 | Vue Router

3. 用户基本信息获取&渲染

① api/user/user.js 封装接口

② stores/modules/user.js 定义数据

③ layout/LayoutContainer 页面中调用

④ 动态渲染

4. 退出功能 [element-plus 确认框]

① 注册点击事件

② 添加退出功能

③ pinia user.js 模块提供 setUserInfo 方法

5. 文章分类页面 - [element-plus 表格]

5.1 基本架子 - PageContainer

① 基本结构样式，用到了 el-card 组件

② 考虑到多个页面复用，封装成组件

props 定制标题

默认插槽 default 定制内容主体

具名插槽 extra 定制头部右侧额外的按钮

③ 页面中直接使用测试

文章分类测试
文章管理测试

6. 文章分类渲染

6.1 封装API - 请求获取表格数据

① 新建 api/article/article.js 封装获取频道列表的接口

② 页面中调用接口，获取数据存储

6.2 el-table 表格动态渲染

html 复制代码

 <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="180" align="center" />
      <el-table-column prop="cate_name" label="分类名称" align="center" />
      <el-table-column prop="cate_alias" label="分类别名" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-button
              type="primary"
              circle
              plain
              size="small"
              :icon="Edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              circle
              plain
              :icon="Delete"
              @click="handleDelete(scope.row)"
            ></el-button>
          </div>
        </template>
      </el-table-column>

6.3 el-table 表格 loading 效果

① 定义变量，v-loading绑定

② 发送请求前开启，请求结束关闭

7. 文章分类添加编辑 [element-plus 弹层]

7.1 点击显示弹层

① 准备弹层

html 复制代码

const dialogVisible = ref(false)

<el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
  <div>我是内容部分</div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary"> 确认 </el-button>
    </span>
  </template>
</el-dialog>

② 点击事件

javascript 复制代码

<template #extra>
    <el-button type="primary" @click="onAddChannel">添加分类</el-button>
</template>

const onAddChannel = () => {
  dialogVisible.value = true
}