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);//持久层和数据库交互