vue3大事件管理系统 === 首页 layout & 文章分类页面 -

于 2024-07-19 14:37:43 发布
阅读量288 收藏 7
点赞数 8
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/140542851
版权

目录

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

基本架子拆解

登录访问拦截

用户基本信息获取&渲染

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

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

基本架子 - PageContainer

文章分类渲染

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

el-table 表格动态渲染

el-table 表格 loading 效果

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

点击显示弹层

封装弹层组件 ChannelEdit

准备弹层表单

确认提交

文章分类删除

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

基本架子拆解

架子组件列表：

el-container

  • el-aside 左侧

    • el-menu 左侧边栏菜单

  • el-container 右侧

    • el-header 右侧头部
      • el-dropdown
    • el-main 右侧主体
      • router-view
<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
</script>

<template>
  <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">
          <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>小帅鹏</strong></div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="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-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

登录访问拦截

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

// 登录访问拦截
router.beforeEach((to) => {
  const userStore = useUserStore()
  if (!userStore.token && to.path !== '/login') return '/login'
})

用户基本信息获取&渲染

  1. api/user.js封装接口
export const userGetInfoService = () => request.get('/my/userinfo')
  1. stores/modules/user.js 定义数据
const user = ref({})
const getUser = async () => {
  const res = await userGetInfoService() // 请求获取数据
  user.value = res.data.data
}
  1. layout/LayoutContainer页面中调用
import { useUserStore } from '@/stores'
const userStore = useUserStore()
onMounted(() => {
  userStore.getUser()
})
  1. 动态渲染
<div>
  黑马程序员：<strong>{{ userStore.user.nickname || userStore.user.username }}</strong>
</div>

<el-avatar :src="userStore.user.user_pic || avatar" />

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

  1. 注册点击事件
<el-dropdown placement="bottom-end" @command="onCommand">

<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>
  1. 添加退出功能
const onCommand = async (command) => {
  if (command === 'logout') {
    await ElMessageBox.confirm('你确认退出大事件吗？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    userStore.removeToken()
    userStore.setUser({})
    router.push(`/login`)
  } else {
    router.push(`/user/${command}`)
  }
}
  1. pinia user.js 模块 提供 setUser 方法
const setUser = (obj) => (user.value = obj)

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

基本架子 - PageContainer

  1. 基本结构样式，用到了 el-card 组件
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>文章分类</span>
        <div class="extra">
          <el-button type="primary">添加分类</el-button>
        </div>
      </div>
    </template>
     ...
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
  1. 考虑到多个页面复用，封装成组件
    • props 定制标题
    • 默认插槽 default 定制内容主体
    • 具名插槽 extra 定制头部右侧额外的按钮
<script setup>
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
  1. 页面中直接使用测试 ( unplugin-vue-components 会自动注册)
  • 文章分类测试：
<template>
  <page-container title="文章分类">
    <template #extra>
      <el-button type="primary"> 添加分类 </el-button>
    </template>

    主体部分
  </page-container>
</template>
  • 文章管理测试：
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary">发布文章</el-button>
    </template>

    主体部分
  </page-container>
</template>

文章分类渲染

封装API - 请求获取表格数据
  1. 新建 api/article.js 封装获取频道列表的接口
import request from '@/utils/request'
export const artGetChannelsService = () => request.get('/my/cate/list')
  1. 页面中调用接口，获取数据存储
const channelList = ref([])

const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
}
el-table 表格动态渲染
<el-table :data="channelList" style="width: 100%">
  <el-table-column label="序号" width="100" type="index"> </el-table-column>
  <el-table-column label="分类名称" prop="cate_name"></el-table-column>
  <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
  <el-table-column label="操作" width="100">
    <template #default="{ row }">
      <el-button
        :icon="Edit"
        circle
        plain
        type="primary"
        @click="onEditChannel(row)"
      ></el-button>
      <el-button
        :icon="Delete"
        circle
        plain
        type="danger"
        @click="onDelChannel(row)"
      ></el-button>
    </template>
  </el-table-column>
  <template #empty>
    <el-empty description="没有数据" />
  </template>
</el-table>


const onEditChannel = (row) => {
  console.log(row)
}
const onDelChannel = (row) => {
  console.log(row)
}
el-table 表格 loading 效果
  1. 定义变量，v-loading绑定
const loading = ref(false)

<el-table v-loading="loading">
  1. 发送请求前开启，请求结束关闭
const getChannelList = async () => {
  loading.value = true
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  loading.value = false
}

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

点击显示弹层
  1. 准备弹层
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>
  1. 点击事件
<template #extra><el-button type="primary" @click="onAddChannel">添加分类</el-button></template>

const onAddChannel = () => {
  dialogVisible.value = true
}
封装弹层组件 ChannelEdit

添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

  1. open({ }) => 添加操作，添加表单初始化无数据
  2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

  1. 封装组件 article/components/ChannelEdit.vue
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)

const open = async (row) => {
  dialogVisible.value = true
  console.log(row)
}

defineExpose({
  open
})
</script>

<template>
  <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>
</template>
  1. 通过 ref 绑定
const dialog = ref()

<!-- 弹窗 -->
<channel-edit ref="dialog"></channel-edit>
  1. 点击调用方法显示弹窗
const onAddChannel = () => {
  dialog.value.open({})
}
const onEditChannel = (row) => {
  dialog.value.open(row)
}
准备弹层表单
  1. 准备数据 和 校验规则
const formModel = ref({
  cate_name: '',
  cate_alias: ''
})
const rules = {
  cate_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '分类名必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  cate_alias: [
    { required: true, message: '请输入分类别名', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{1,15}$/,
      message: '分类别名必须是1-15位的字母数字',
      trigger: 'blur'
    }
  ]
}
  1. 准备表单
<el-form
  :model="formModel"
  :rules="rules"
  label-width="100px"
  style="padding-right: 30px"
>
  <el-form-item label="分类名称" prop="cate_name">
    <el-input
      v-model="formModel.cate_name"
      minlength="1"
      maxlength="10"
    ></el-input>
  </el-form-item>
  <el-form-item label="分类别名" prop="cate_alias">
    <el-input
      v-model="formModel.cate_alias"
      minlength="1"
      maxlength="15"
    ></el-input>
  </el-form-item>
</el-form>
  1. 编辑需要回显，表单数据需要初始化
const open = async (row) => {
  dialogVisible.value = true
  formModel.value = { ...row }
}
  1. 基于传过来的表单数据，进行标题控制，有 id 的是编辑
:title="formModel.id ? '编辑分类' : '添加分类'"
确认提交
  1. api/article.js 封装请求 API
// 添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) =>
  request.put('/my/cate/info', data)
  1. 页面中校验，判断，提交请求
<el-form ref="formRef">

const formRef = ref()
const onSubmit = async () => {
  await formRef.value.validate()
  formModel.value.id
    ? await artEditChannelService(formModel.value)
    : await artAddChannelService(formModel.value)
  ElMessage({
    type: 'success',
    message: formModel.value.id ? '编辑成功' : '添加成功'
  })
  dialogVisible.value = false
}
  1. 通知父组件进行回显
const emit = defineEmits(['success'])

const onSubmit = async () => {
  ...
  emit('success')
}
  1. 父组件监听 success 事件，进行调用回显
<channel-edit ref="dialog" @success="onSuccess"></channel-edit>

const onSuccess = () => {
  getChannelList()
}

文章分类删除

  1. api/article.js封装接口 api
// 删除文章分类
export const artDelChannelService = (id) =>
  request.delete('/my/cate/del', {
    params: { id }
  })
  1. 页面中添加确认框，调用接口进行提示
const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelChannelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getChannelList()
}

前端 贾公子
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
13、Vue3 大事件管理系统
m0_51394252的博客
08-28 3848
一、大事件项目介绍 和 创建 1.1 Vue3 大事件管理系统 在线演示： https://fe-bigevent-web.itheima.net/login 接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 基地址： http://big-event-vue-api-t.itheima.net 1.2 pnpm 包管理器 - 创建项目 一些优势：比同类工具快2倍左右、节省磁盘空
vue3大事件管理系统 === 登陆页面
每天都要努力学习哦~~
07-16 828
PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号。【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）需求：封装注册api，进行注册，注册成功切换到登录。明确了路由规则，可以全部配完，也可以边写边配。需求：点击注册按钮，注册之前，需要先校验。登录的测试账号: shuaipeng。【需求说明】给输入框添加表单校验。【需求说明1】登录之前的预校验。登录测试密码: 123456。【需求】注册页面基本校验。
Vue从入门到实战Day12~14 - Vue3大事件管理系统
ltt159264的博客
05-28 1633
在线演示：https://fe-bigevent-web.itheima.net/login接口文档：https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835基地址：http://big-event-vue-api-t.itheima.net。
vue3大事件管理
weixin_65574176的博客
02-10 1182
一个基于vue3&&element-plus的练手小项目
使用Vue-Grid-Layout实现自定义工作台
02-01
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统，它允许开发者创建自定义的工作台，用户可以根据需要自由调整各个组件的位置和大小。在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
实现强大的响应式窗口分割插件golden-layout.zip
11-21
在实际开发中，掌握Golden Layout的用法能够极大地提升前端应用的灵活性和用户体验，特别是在需要构建数据可视化、工作流管理或集成开发环境（IDE）类应用时。通过深入学习和实践，开发者可以充分利用Golden Layout...
golden-layout:布局编码-金色
05-06
这个布局系统的设计灵感来源于HTML中的流式布局，但提供了更高级的功能，允许用户自由地组织和调整组件的位置，类似于桌面操作系统中的窗口管理器。在网页应用中，特别是在需要构建具有多个可交互面板的开发环境或...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
1. **布局(Layout)**：提供栅格系统、页面布局等，帮助开发者快速搭建页面结构。 2. **导航(Navigation)**：如菜单(Menu)、面包屑(Breadcrumb)、页签(Tabs)、按钮(Button)等，用于页面导航和交互。 3. **表单(Form)*...
前端项目-golden-layout.zip
09-03
6. **事件系统**：Golden Layout 提供了一个事件系统，允许监听和响应布局变化，如窗口打开、关闭、移动或大小调整，这对于实现动态交互和功能更新非常有用。 7. **配置和序列化**：布局可以通过JSON格式进行配置和...
【Vue】 style中的scoped
DX390609的博客
07-15 166
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 557
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 320
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
使用 Vue 和 ECharts 打造动态数据可视化图表
最新发布
liyananweb的博客
07-18 521
通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
shengmeshi的博客
07-17 135
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 887
nodejs、vue、SSH服务、SSH免密登录
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 342
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
el-table表头使用el-dropdown出现两个下拉框
weixin_50606255的博客
07-17 309
1.只显示第一个下拉框，通过控制样式将其他的下拉框display:none;如有问题，欢迎讨论！
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 973
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
09-27
您的问题是如何在运行 Vue CLI 时设置环境变量 `NODE_OPTIONS` 为 `--openssl-legacy-provider`？您可以通过以下步骤来实现： 1. 打开终端或命令提示符窗口。 2. 进入您的 Vue 项目所在的目录。 3. 运行以下命令来设置环境变量并启动服务： ```bash SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 如果您使用的是 Linux 或 macOS 系统，请使用 `export` 命令： ```bash export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 这样，`NODE_OPTIONS` 环境变量就会被设置为 `--openssl-legacy-provider` 并且 Vue CLI 服务会启动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值