2020 零基础到快速开发 Vue全家桶开发电商管理系统（五）

最新推荐文章于 2023-02-22 14:25:35 发布

原创最新推荐文章于 2023-02-22 14:25:35 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

13 篇文章

订阅专栏

该博客围绕商品分类功能展开，基于Vue进行开发。先新建分支，通过路由加载组件，绘制页面布局，调用API获取数据。使用树形表格组件和自定义模板列渲染表格，实现分页、添加分类等功能，处理表单数据，最后提交到码云。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

商品分类篇

商品分类

新建分支

git branch  # (master)
git checkout -b goods_cate
git branch  # (goods_cate)
git push -u origin goods_cate

1 通过路由加载商品分类组件

//components文件夹下新建 goods 文件夹,下建 Cate.vue

//index.js(router)
import Cate from '../components/goods/Cate'
{ path: '/categories', component: Cate }

2 绘制商品分类组件的基本页面布局

<template>
<div>
   <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
    <el-row>
      <el-col>
          <el-button type="primary">添加分类</el-button>
      </el-col>
    </el-row>
    <!-- 表格 --> 
    <!-- 分页 -->
    </el-card>
</div>
</template>

3 调用API获取商品分类列表数据

data() {
    return {
      // 查询条件,参数列表
      queryInfo: { type: 3, pagenum: 1, pagesize: 5 },
      //  商品分类的数据列表
      catelist: [],
      // 总数据条数
      total: 0
    }
  },
  created() {  this.getCateList() },
  methods: {
    // 获取商品分类的数据
    async getCateList() {
      const { data: res } = await this.$http.get("categories", { params: this.queryInfo })
      if (res.meta.status != 200) {
        return this.$message.error("获取商品分类失败!")
      }
      this.catelist = res.data.result
      this.total = res.data.total
    }
  }

4 初步使用vue-table-with-tree-grid树形表格组件

在这里插入图片描述
查询api文档进行应用

//main.js
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

//Cate.vue
<!-- 表格 -->
      <tree-table :data='catelist' :columns="columns" :selection-type='false' :expand-type='false' show-index index-text='#' border :show-row-hover='false' class="treeTable">

//为table指定列定义
 data() { return {  columns:[ {  label:'分类名称',  prop:'cat_name' } ] }

.treeTable{ margin-top: 15px;}

5 使用自定义模板列渲染数据表格

6 渲染排序和操作对应的UI结构

<!-- 是否有效 -->
        // <template v-slot:isok='scope'>  
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen;" ></i>
          <i class="el-icon-error" v-else style="color:red;"></i>
       </template>
<!-- 排序 -->
        <template v-slot:order="scope">
          <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag >
          <el-tag type="warning" v-else size="mini">三级</el-tag>
         // <el-tag :type="['primary','success','warning'][scope.row.cat_level]" size='mini'></el-tag> 
        </template>
 <!-- 操作 -->
        <template v-slot:opt="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
        
columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          type: "template", //表示将当前列定义为模板列
          template: "isok" //表示当前这一列使用的模板名称
        }
        { label: "排序", type: "template",   template: "order" }, },
        { label: "操作", type: "template", template: "opt" },
      ]

7 实现分页功能

<!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 3, 10, 15]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

methods: {
   // 监听pagesie改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize
      this.getCateList()
    },
    //监听页码值pagenum改变
     handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getCateList()
    },
  }

8 渲染添加分类的对话框和表单

 <el-button type="primary" @click='showAddCateDialog'>添加分类</el-button>
<!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible"  width="50%">
     <el-form  :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:" >  </el-form-item>
     </el-form> 
     <span slot="footer" class="dialog-footer">
       <el-button @click="addCateDialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
     </span>
</el-dialog>

data() { 
  return { 
    //控制添加对话框的显示与隐藏
      addCateDialogVisible: false,
      //  添加分类的表单数据对象
      addCateForm:{
        cat_name:'',  //分类名称
        cat_pid: 0,   //分类父 ID
        cat_level: 0  //分类层级
      },
      //  添加分类的表单验证
      addCateFormRules: {
        cat_name: [  { required: true, message: "请输入分类名称", trigger: "blur" } ]
      }
    } 
 } 
methods: { 
    // 展示添加分类的对话框
    showAddCateDialog() { this.addCateDialogVisible = true }
  }

9 获取父级分类数据列表

data() {  return { parentCateList:[]  } }  // 父级分类的列表
methods: {
  // 展示添加分类的对话框
    showAddCateDialog() { 
      this.getParentCateList()   //展示之前获取
      this.addCateDialogVisible = true
    },
  // 获取父级分类的数据列表
    async getParentCateList() {
    const {data:res} = await this.$http.get('categories',{ params:{type:2} })
      if(res.meta.status!=200){
        return this.$message.error('获取父级分类数据失败!')
      }
      this.parentCateList = res.data
    }

10 渲染级联选择器

  <el-form-item label="父级名称:">
         // <!-- options用来指定数据源 -->
         // <!-- props用来指定配置对象 -->
          <el-cascader expand-trigger='hover' v-model="selectedKeys" :options="parentCateList"
            :props="cascaderProps" @change="parentCateChanged" clearable>
          </el-cascader>
  </el-form-item>
 data() {
    return {
       // 父级分类的列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      cascaderProps:{
        expandTrigger:'hover',
        value:'cat_id', //具体选中值
        label:'cat_name', //看到哪个
        children:'children',//父子嵌套用哪个
        checkStrictly:true  //可选中一级分类
      },
      // 选中的父级分类的id 数组
      selectedKeys:[]
    }
  },
methods:{
  // 选择项发生变化触发这个函数
    parentCateChanged() {
        console.log(this.selectedKeys)
    }
}


//element.js
import { Cascader } from 'element-ui'
Vue.use(Cascader)

11 根据父分类的变化处理表单中的数据

methods:{
  // 选择项发生变化触发这个函数
    parentCateChanged() {
      console.log(this.selectedKeys)
      //如果selectedKeys数组中的length大于0，证明有选中的父级分类，反之没有选中任何父级分类
      if (this.selectedKeys > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[ this.selectedKeys.length - 1 ]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
}

12 在对话框的close事件中重置表单数据

<!-- 添加分类对话框 -->
    <el-dialog @close='addCateDialogClosed' >
    methods:{
        // 监听添加分类的对话框关闭事件，重置表单数据
     addCateDialogClosed() {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    }  
   }

13 完成添加分类的操作

<el-button type="primary" @click="addCate">确 定</el-button>
methods:{
   addCate() {
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post( "categories", this.addCateForm )
        if (res.meta.status != 201) {
          return this.$message.error("添加分类失败!")
        }
        this.$message.success("添加分类成功!")
        this.getCateList()
        this.addCateDialogVisible = false
      })
    }
}

提交码云

git branch  #（goods_cate）
git status
git add .
git commit -m "完成了分类功能的开发"
git push
git checkout master
git branch  #（master）
git merge goods_cate
git push

命名

<!-- 面包屑导航区 -->
<!-- 卡片视图区 -->
<!-- 添加分类对话框 -->
<!-- 编辑分类的对话框 -->

data(){ 
  return{
    queryInfo:{}   catelist:[]   
    addCateDialogVisible:false    addCateForm: {}    addCateFormRules:{[],[]}    
    editCateDialogVisible:false   editCateForm: {}   editCateFormRoles:{[],[]}
  }
}

method:{
  getCateList()
  showAddCateDialog()    addCateDialogClosed()    addCate()  
  showEditCateDialog()   editCateDialogClosed()   editCate()    
  removeCate()
}