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-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"
      />
    </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-upload
          class="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.id
  if (isEdit) {
    await navEditCategoryService(formModel.value)//修改数据
    ElMessage.success('编辑成功')
  } else {
    await navAddCategoryService(formModel.value)//新增数据
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
  emit('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();
    }
  	//控制层接收
  
@Override
    public void deleteCategory(String id) {
        frontMapper.delectCategory(id);
    }  
    //业务层处理

@Delete("delete from classification_front where id = ${id}")
    void delectCategory(String id);
    //持久层和数据库交互