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

目录

首页 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-menuactive-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"circleplaintype="primary"@click="onEditChannel(row)"></el-button><el-button:icon="Delete"circleplaintype="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 = trueconst res = await artGetChannelsService()channelList.value = res.data.dataloading.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 = trueconsole.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-inputv-model="formModel.cate_name"minlength="1"maxlength="10"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-inputv-model="formModel.cate_alias"minlength="1"maxlength="15"></el-input></el-form-item>
</el-form>
  1. 编辑需要回显,表单数据需要初始化
const open = async (row) => {dialogVisible.value = trueformModel.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()
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/48081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CDM大全

CMD&#xff08;Command Prompt&#xff09;是Windows操作系统中的命令行解释器&#xff0c;它允许用户通过键入命令来执行各种操作。以下是一些常用的CMD命令及其功能说明&#xff1a; 文件和目录管理 dir&#xff1a;显示当前目录中的文件和子目录列表。cd&#xff1a;更改…

《0基础》学习Python——第十八讲__爬虫\<1>

一、什么是爬虫 爬虫是一种网络数据抓取的技术。通过编写程序&#xff08;通常使用Python&#xff09;&#xff0c;爬虫可以自动化地访问网页&#xff0c;解析网页内容并提取出所需的数据。爬虫可以用于各种用途&#xff0c;如搜索引擎的索引&#xff0c;数据分析和挖掘&#x…

NVIDIA 完全过渡到开源 GPU 内核模块

目录 支持的 GPU安装程序更改将包管理器与 CUDA 元包配合使用使用 runfile使用安装帮助程序脚本包管理器详细信息apt&#xff1a;基于 Ubuntu 和 Debian 的发行版dnf&#xff1a;Red Hat Enterprise Linux、Fedora、Kylin、Amazon Linux 或 Rocky Linuxzypper&#xff1a;SUSE …

怎么关闭 Windows 安全中心,手动关闭 Windows Defender 教程

Windows 安全中心&#xff08;也称为 Windows Defender Security Center&#xff09;是微软 Windows 操作系统内置的安全管理工具&#xff0c;用于监控和控制病毒防护、防火墙、应用和浏览器保护等安全功能。然而&#xff0c;在某些情况下&#xff0c;用户可能需要关闭 Windows…

光电传感器的详细介绍,包括其原理、结构、分类、应用以及技术发展趋势

光电传感器是一种利用光电转换原理&#xff0c;将光信号转换为电信号的传感器。它在工业自动化、物流、医疗、安全等领域有着广泛的应用&#xff0c;是实现各种检测、测量和控制功能的重要元件。以下是对光电传感器的详细介绍&#xff0c;包括其原理、结构、分类、应用以及技术…

【分布式事务】怎么解决分布式场景下数据一致性问题

分布式事务的由来 拿充值订单举个栗子吧&#xff0c;假设&#xff1a;原本订单模块和账户模块是放在一起的&#xff0c;现在需要做服务拆分&#xff0c;拆分成订单服务&#xff0c;账户余额服务。原本收到充值回调后&#xff0c;可以将修改订单状态和扣减余额放在一个mysql事务…

C语言 | Leetcode C语言题解之第236题二叉树的最近公共祖先

题目&#xff1a; 题解&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/typedef struct road_t {struct TreeNode *road_node; // 途径路径struct road_t *p_next; }…

IPD与CBB研发技术管理体系培训

获取下载完整PPT见下图 更多有关华为研发管理/IPD、MBSE、PLM、ERP、MES、数据治理、数字样机等方面免费解决方案、资料获取&#xff0c;请见下图

python—爬虫的初步了解

Python 爬虫&#xff08;Web Scraping&#xff09;是一种自动化从网站上提取数据的技术。Python 由于其简洁的语法、丰富的库和强大的社区支持&#xff0c;成为了实现网络爬虫的首选语言之一。下面是一些Python爬虫的基本概念和步骤&#xff1a; 1. 爬虫的基本概念 请求&…

深入理解Java线程的状态

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

8月长沙学术会议:经济金融发展国际会议(ICEFD 2024)

经济金融发展国际会议&#xff08;ICEFD 2024&#xff09;将于2024年8月20-22日在长沙盛大举行。本次会议汇聚了国内外众多高校、科研机构、企业界及其他相关领域的专家学者&#xff0c;共同探讨经济金融发展的新趋势、新挑战和新机遇。 长沙&#xff0c;这座历史悠久的文化名…

​前端Vue组件技术实践:打造自定义精美悬浮菜单按钮组件

随着前端技术的迅猛发展&#xff0c;复杂的应用场景和不断迭代的产品需求使得开发的复杂度日益提升。传统的整体式开发方式已经难以满足现代前端应用的灵活性和可维护性需求。在这样的背景下&#xff0c;组件化开发逐渐崭露头角&#xff0c;成为解决复杂前端应用问题的有效手段…

栈和队列的应用场景

栈的应用场景 1、程序调用栈 在大多数编程语言中&#xff0c;函数&#xff08;或方法&#xff09;调用时都会使用栈来保存执行上下文。例如&#xff0c;当一个函数调用另一个函数时&#xff0c;后者的执行上下文&#xff08;包括返回地址、参数、局部变量等&#xff09;会被推…

自学第十九天----深入探究数组下

3. 数组越界 数组的下标是有范围限制的。 数组的下规定是从0开始的&#xff0c;如果数组有n个元素&#xff0c;最后一个元素的下标就是n-1。 所以数组的下标如果小于0&#xff0c;或者大于n-1&#xff0c;就是数组越界访问了&#xff0c;超出了数组合法空间的访问。 C语言本身…

IDEA的常见代码模板的使用

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

Matlab学习笔记1

画点 x[-1, -1, 1, 1, -1, 0] y[-1, 1, 1, -1, -1, 0] % r是颜色&#xff0c; o是点的形状 plot(x, y, ro) % 画线 plot(x, y, r)求最大最小值 x[-1, -1, 1, 1, -1, 0] y[-1, 1, 1, -1, -1, 0] % -1 min(y) % 1 max(x)计算二维旋转矩阵 dcm angle2dcm(z_angle, y_angle, …

几种典型的锁

互斥锁&#xff1a;互斥锁是一种最常见的锁类型&#xff0c;用于实现互斥访问共享资源。在任何时刻&#xff0c;只有一个线程可以持有互斥锁&#xff0c;其他线程必须等待直到锁被释放。这确保了同一时间只有一个线程能够访问被保护的资源。自旋锁&#xff1a;自旋锁是一种同步…

上海凯百斯纳米受邀盛装亮相2024第13届上海国际生物发酵展

凯百斯纳米技术&#xff08;上海&#xff09;有限公司专注于高压均质、破碎、乳化、分散、粉碎等解决方案&#xff01;E7馆B08展位与您相约&#xff01; 2024第13届国际生物发酵产品与技术装备展览会&#xff08;上海&#xff09;于8月7-9日在上海新国际博览中心盛大召开&…

[解决方法]Request failed with status code 500错误之一

在写项目时访问后端api时我的axios拦截器进入了错误 然后去浏览器搜索&#xff0c;但是大部分都是因为axios参数或参数格式问题导致的&#xff0c;然而在访问api的编写没有任何问题&#xff0c;后来我反复检查&#xff0c;发现是我写前后端写混了&#xff0c;我把express的 Co…

<数据集>钢铁缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1800张 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注类别数&#xff1a;6 标注类别名称&#xff1a;[crazing, patches, inclusion, pitted_surface, rolled-in_scale, scr…