Vue3:分类管理综合案例实现

2024-05-16 01:52
文章标签 javascript 实现 综合 vue vue3 案例 frontend 分类管理

本文主要是介绍Vue3:分类管理综合案例实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

综合案例

实现分类管理功能

请添加图片描述

路由

在main.js中引入router

访问根路径’/'后跳转到布局容器

加载布局容器后重定向到’/nav/manage’

加载我们需要的组件

这样可以在布局容器中切换功能模块时,只对需要修改的组件进行重新加载

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),redirect: '/nav/manage',children: [{path: '/nav/manage',component: () => import('@/views/nav/NavigationManage.vue')}]}]
})

封装组件

数据列表组件
<template><div> <el-table v-loading="loading" :data="dataList" style="width: 100%"><el-table-column prop="id" label="序号"></el-table-column><el-table-column prop="name" label="分类名称"></el-table-column><el-table-column prop="pictureImg" label="分类图片"><template #default="scope"><div><el-image style="width: auto; height: 40px; border: none; cursor: pointer":src="scope.row.pictureImg" :preview-src-list="[scope.row.pictureImg]":preview-teleported=true :hide-on-click-modal=true></el-image></div></template></el-table-column><el-table-column prop="sort" label="分类排序"></el-table-column><el-table-column label="状态"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.state == '0' ? '启用' : '禁用' }}</span></div></template></el-table-column><el-table-column prop="creator" label="创建人"></el-table-column><el-table-column label="操作"><!-- row 就是 channelList 的一项， $index 下标 --><template #default="{ row, $index }"><el-button :icon="Edit" circle plain type="primary" @click="onEditChannel(row, $index)"></el-button><el-button :icon="Delete" circle plain type="danger" @click="onDelChannel(row, $index)"></el-button></template></el-table-column><template #empty><el-empty description="没有数据"></el-empty></template></el-table></div>
</template><script setup>
import { Edit, Delete } from '@element-plus/icons-vue';defineProps({dataList:Object,loading:Boolean})const Emits = defineEmits(['onEditChannel','onDelChannel']);const onEditChannel = (row) => {Emits("onEditChannel",row)}const onDelChannel = (row) => {Emits("onDelChannel",row)}
</script><style lang='stylus' scoped></style>
查询组件
<template><div><!-- 表单区域 --><el-form inline><el-form-item label="分类:"><el-input v-model="searchParams.name" placeholder="请输入分类名字称" clearable /></el-form-item><el-form-item label="状态:"><el-select v-model="searchParams.state" placeholder="请选择状态" style="width: 120px" clearable><el-option label="启用" value="0"></el-option><el-option label="禁用" value="1"></el-option></el-select></el-form-item><el-form-item><el-button type="primary">搜索</el-button><el-button>重置</el-button></el-form-item></el-form></div>
</template><script setup>defineProps({searchParams: Object})
</script><style lang='stylus' scoped></style>
外层父组件(分页组件)

在引入时给子组件传递数据和方法,实现组件间通信

<script setup>
import { ref , onMounted} from 'vue'
import NavigationEdit from './components/NavigationEdit.vue'
import NavigationSearch from './components/NavigationSearch.vue'
import NavigationDataList from './components/NavigationDataList.vue'
import {getCategoryList} from '@/api/navigation'//测试数据
const testData = []
const loading = ref(false); //加载中，默认false
const dataList = ref(testData); //数据列表
const searchParams = ref({ //搜索参数name: '',state: ''
})
const pageData = ref({ //分页参数currentPage: 1,pageSize: 5,total: 0
});const param = {name: '',state: '',page: 2,pageSize: 5
}const getDataList = async() => {loading.value = true;let result = await getCategoryList(param);    dataList.value = result.data.result.records;pageData.value.total = result.data.result.total;console.log(result);loading.value = false;
}onMounted(()=>{getDataList();
})//对话框对象
const dialog = ref({});const onAddChannel = () => {dialog.value.open({})
}const onSuccess = () => {console.log("success...");
}const onEditChannel = (row) => { // 点击编辑执行的方法dialog.value.open(row)
}
const onDelChannel = async (row) => { // 点击删除执行的方法await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})//TODO 待实现
}
</script> <template><div><!-- 引入自定义组件 --><NavigationEdit ref="dialog" @success="onSuccess"></NavigationEdit><el-card><template #header><span>分类管理</span><el-button style="float: right" @click="onAddChannel">添加分类</el-button></template><NavigationSearch:searchParams = "searchParams"/><NavigationDataList:dataList = "dataList":loading = "loading"@onEditChannel = "onEditChannel"@onDelChannel = "onDelChannel"/><!-- 分页插件 --><div class="pagination-block"><el-paginationbackgroundv-model:current-page="pageData.currentPage"v-model:page-size="pageData.pageSize":page-sizes="[3, 5, 10, 15, 20]"layout="->,total, sizes, prev, pager, next"v-model:total="pageData.total"/></div></el-card></div>
</template><style scoped>
.pagination-block {margin-top: 10px;
}
</style>

功能实现

向后端发送请求

工具类

返回一个对应链接和超时参数的axios对象

import axios from 'axios'
// import { useUserStore } from '@/stores'
// import { ElMessage } from 'element-plus'
// import router from '@/router'
const baseURL = '/api'const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL: baseURL,timeout: 10000
})export default instance
export { baseURL }

数据列表请求

通过工具类的axios对象向后端对应资源链接发送get请求和传递参数,get方法的第二个参数传递一个config{}对象,params是其中的一个属性

import request from '@/utils/request'export const getCategoryList = (params) =>request.get('/home/category/head',{params:params});
在组件中定义方法对这个请求方法进行调用
const getDataList = async() => {loading.value = true;let result = await getCategoryList(param);    dataList.value = result.data.result.records;pageData.value.total = result.data.result.total;console.log(result);loading.value = false;
}
通过生命周期函数在组件对应生命周期进行挂载
onMounted(()=>{getDataList();
})

分页查询

在el-pagination组件中实现了属性和pageData的双向绑定

<!-- 分页插件 --><div class="pagination-block"><el-pagination background v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize":page-sizes="[3, 5, 10, 15, 20]" layout="->,total, sizes, prev, pager, next" v-model:total="pageData.total"@size-change="getDataList" @current-change="getDataList" /></div>

所以我们要从pageData中取数据

普通对象无法被二次修改,所以要使用一个响应式对象进行数据同步

const param = computed(() => {return {name: '',state: '',page: pageData.value.currentPage,pageSize: pageData.value.pageSize}}
);

最后因为在el-pagination组件中实现了

@size-change=“getDataList” @current-change=“getDataList”

事件和方法的绑定

所以调用

const getDataList = async () => {loading.value = true;let result = await getCategoryList(param.value);dataList.value = result.data.result.records;pageData.value.total = result.data.result.total;console.log(result);loading.value = false;
}

方法进行数据更新

搜索功能

分为搜索事件,重置事件,在输入框中删除事件,和在多选框中删除事件

搜索事件
const search = () => {//拿到父组件的搜索方法emits('search');}
<el-button type="primary" @click="search">搜索</el-button>
//绑定搜索方法

const param = computed(() => {return {name: searchParams.value.name,state: searchParams.value.state,page: pageData.value.currentPage,pageSize: pageData.value.pageSize}
}
);
//在父组件中绑定搜索的参数
const search = () => {pageData.value.currentPage = 1;getDataList();
}
//父组件中定义搜索方法
重置事件
 const reset = ()  => {//拿到父组件的重置方法emits('reset')}
<el-button @click="reset">重置</el-button>
//绑定重置按钮

const reset = () => {searchParams.value.name = '';searchParams.value.state = '';pageData.value.currentPage = 1;pageData.value.pageSize = 5;search();
}
//父组件中定义重置方法
搜索/下拉框重置
<el-input v-model="searchParams.name" placeholder="请输入分类名字称" clearable  @clear="search"/>
//input组件自带clear事件绑定search方法

图片上传

<el-form-item label="分类图片" prop="pictureImg"><el-uploadclass="avatar-uploader"action="/api/upload"//设置上传的资源链接name="pictureImg"//设置参数名字:show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload">

新增分类/修改分类

export const  navEditCategoryService = (params) => request.put('/home/category/edit',{params});
//发起修改请求export const  navAddCategoryService = (params) => request.post('/home/category/add',params);
//发起新增请求

对请求方法进行调用

const onSubmit = async () => {await formRef.value.validate()const isEdit = formModel.value.idif (isEdit) {await navEditCategoryService(formModel.value)//修改数据ElMessage.success('编辑成功')} else {await navAddCategoryService(formModel.value)//新增数据ElMessage.success('添加成功')}dialogVisible.value = falseemit('success')
}

查询一级分类(在分类dialog中显示)

export const getCategoryParenList = () => request.get('/home/category/parent')
//发起查询请求
onMounted(async() =>{let result = await getCategoryParenList();parentCategory.value = result.data.result;
})
//通过钩子函数在组件加载完成后自动执行

删除分类(前端加后端)

export const deleteCategoryService = (id) => request.delete(`/home/category/del/${id}`)
//发起删除请求const onDelChannel = async (row) => { // 点击删除执行的方法await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})//TODO 待实现console.log(row);deleteCategoryService(row.id);search();
}
//父组件中的删除方法<el-button :icon="Delete" circle plain type="danger" @click="onDelChannel(row, $index)"></el-button>
//绑定删除方法,将对应行的id传入

@DeleteMapping("/category/del/{id}")public R deleteCategory(@PathVariable String id){frontService.deleteCategory(id);return R.ok();}//控制层接收@Overridepublic void deleteCategory(String id) {frontMapper.delectCategory(id);}  //业务层处理@Delete("delete from classification_front where id = ${id}")void delectCategory(String id);//持久层和数据库交互

这篇关于Vue3:分类管理综合案例实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/993535。

相关文章

详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2