git checkout -b goods_categit push -u origin goods_cate
目录
1. 通过路由加载商品分类组件2. 绘制商品分类组件的基本页面布局3. 调用API获取商品分类列表数据4. 使用vue-table-with-tree-grid树形表格组件5. 使用自定义模板渲染表格数据列6. 渲染排序和操作对应的UI结构7. 实现分页功能8. 渲染添加分类的对话框和表单9. 获取父级分类数据列表10. 渲染级联选择器11. 根据父分类的变化处理表单中数据12. 在对话框的close事件中重置表单数据13. 完成添加分类操作14. 完成编辑、删除操作15. 提交代码1. 通过路由加载商品分类组件
创建组件 components/goods/Cate.vue并通过路由组件挂载到页面中
//Cate.vue<template><div>商品分类组件</div></template><script>export default {data(){return {}},created(){},methods:{}}</script><style lang="less" scoped></style>//router.jsimport Cate from './components/goods/Cate.vue'const routes = [{path: '/home',component: Home,children: [{path: '/categories', component: Cate },]},]
2. 绘制商品分类组件的基本页面布局
<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>
3. 调用API获取商品分类列表数据
export default {data() {return {//发起获取商品分类数据的get查询条件queryInfo: {type: 3,//获取所有类别数据pagenum: 1, //当前页码值，默认第一页pagesize: 5, //每页显示多少条数据，默认显示5条},//商品分类的数据列表，默认为空，get请求成功后会赋值catelist: [],//获取商品分类总数据条数，默认为0，get请求成功后会赋值total: 0,}},created() {this.getCateList()},methods: {//get请求获取商品分类数据async getCateList() {const {data: res } = await this.$http.get('categories', {params: this.queryInfo })if (res.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}//打印的结果见上图console.log(res.data)//获取成功后，将返回的数据保存至catelistthis.catelist = res.data.result//获取成功后，将返回的总数据条数保存至catelistthis.total = res.data.total},},}
4. 使用vue-table-with-tree-grid树形表格组件
1. 安装依赖 vue-table-with-tree-grid
点击 查看详情， 可以跳转到 github 仓库使用教程 /MisterTaki/vue-table-with-tree-grid
2. main.js中导入插件
import TreeTable from 'vue-table-with-tree-grid'ponent('tree-table', TreeTable)
3. 使用组件展示分类数据
<!-- 分类表格 :data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框):expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮)--><tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false"></tree-table>// 在数据中添加columns:columns: [{label:'分类名称',prop:'cat_name'}]//设置表格与按钮之间的间距.treetable{margin-top: 15px;}
5. 使用自定义模板渲染表格数据列
<tree-table><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></tree-table>columns: [{label: '是否有效',//表示将当前列定义为模板列type: 'template',//表示当前这一列使用模板名称，对应slot属性template: 'isok',},],
6. 渲染排序和操作对应的UI结构
<!-- 排序模板区域 --><tree-table><template slot="order" slot-scope="scope"><el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag><el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag><el-tag type="warning" size="mini" v-else>三级</el-tag></template><!-- 操作模板区域 --><template slot="option" slot-scope="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></tree-table>columns: [{label: '排序',//表示将当前列定义为模板列type: 'template',//表示当前这一列使用模板名称，对应slot属性template: 'order',},{label: '操作',//表示将当前列定义为模板列type: 'template',//表示当前这一列使用模板名称，对应slot属性template: 'option',},]
7. 实现分页功能
<!-- 分页区域 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="queryInfo.pagenum" :page-sizes="[1, 5, 10, 15]" :page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>//监听每页显示多少条数据 pagesize改变handleSizeChange(newSize){this.queryInfo.pagesize = newSizethis.getCateList()},//监听页码值pagenum改变handleCurrentChange(newPage){this.queryInfo.pagesize = newPagethis.getCateList()},
8. 渲染添加分类的对话框和表单
<el-button type="primary" @click="showAddCateDialog">添加分类</el-button><!-- 添加分类的对话框 --><el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addDialogClosed"><!-- 添加分类的表单 model数据绑定对象 rules验证规则对象 ref引用对象 --><el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="70px"><!-- prop指定具体的校验规则，并且定义在addCateFormRules里面 --><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>//控制添加分类对话框的显示与隐藏addCateDialogVisible: 'false',//添加分类的表单数据对象addCateForm: {//将要添加的分类名称cat_name: '',//父级分类的idcat_pid: 0,//分类等级：默认要添加的是1级分类cat_level: 0},//添加分类表单的验证规则对象addCateFormRules: {cat_name: [{required: true, message: '请输入分类名称', trigger: 'blur' },],},//点击确定按钮，展示添加分类的对话框showAddCateDialog() {this.addCateDialogVisible = true},
9. 获取父级分类数据列表
data() {return {//父级分类的列表数据parentCateList:[],}},//点击确定按钮，展示添加分类的对话框showAddCateDialog() {//展示对话框之前，先获取父级分类数据列表this.getParentCateList()this.addCateDialogVisible = true},//获取父级分类的数据列表async getParentCateList(){const {data:res} = await this.$http.get('categories',{params:{type:2}})if (res.meta.status != 200) {this.$message.error('获取父级分类数据失败!')}//获取成功，将获取到前两级的父级数据保存到parentCateListthis.parentCateList = res.data},
10. 渲染级联选择器
import {Cascader } from 'element-ui'Vue.use(Cascader)<el-form-item label="父级分类"><!-- v-model是将选中的值双向绑定到data中 options用来指定数据源 props用来指定配置对象 --><el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps"@change="parentCateChange" clearable change-on-select></el-cascader></el-form-item>//父级分类的列表数据parentCateList: [],//指定级联选择器的配置对象cascaderProps: {expandTrigger: 'hover',checkStrictly: true,value: 'cat_id',//选中的是哪个属性值label: 'cat_name', //看到的是哪个属性值children: 'children', //父子节点间通过哪个属性实现嵌套},// 选中的父级分类的id数组selectedKeys: [],//选择项发生变化触发这个函数parentCateChange() {},//global.css.el-cascader-menu{height:200px}
11. 根据父分类的变化处理表单中数据
<el-button type="primary" @click="addCate">确 定</el-button>//选择项发生变化触发这个函数parentCateChange() {//如果selectedKeys数组的长度大于0，证明选中的父级分类，反之没有选中任何父级分类if(this.selectedKeys.length > 0){this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]this.addCateForm.cat_level = this.selectedKeys.length}else {this.addCateForm.cat_pid = 0this.addCateForm.cat_level = 0}},//点击确定按钮，添加新的分类addCate(){},
12. 在对话框的close事件中重置表单数据
<!-- 添加分类的对话框 --><el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">//监听对话框关闭事件，重置表单数据addCateDialogClosed(){this.$refs.addCateFormRef.resetFields()this.selectedKeys=[]this.addCateForm.cat_pid=0this.addCateForm.cat_level=0},
13. 完成添加分类操作
//点击确定按钮，添加新的分类addCate(){this.$refs.addCateFormRef.validate(async (valid) => {//valid会返回一个布尔值，如果true就表示校验通过，反之false//validate是element-ui表单的一个验证方法if (!valid) return this.$message.error('表单预校验失败！')//失败了，直接return//验证成功，发起添加用户的网络请求const {data: res } = await this.$http.post('categories', this.addCateForm)if (res.meta.status !== 201) {this.$message.error('添加分类失败')}this.$message.success('添加分类成功')//重新获取用户列表数据this.getCateList()//成功之后，隐藏添加用户的对话框this.addCateDialogVisible = false})},
14. 完成编辑、删除操作
前端开发Vue项目实战：电商后台管理系统（三）------ 用户管理模块 （用户列表 /添加修改删除用户）
展示修改用户的对话框根据id查询对应的分类信息渲染修改分类的表单修改分类表单的重置操作提交表单预验证及完成分类信息的修改 弹框询问用户是否确认删除调用API完成删除用户操作
<template slot="option" slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="showCateEditDialog(scope.row.cat_id)">编辑</el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除</el-button></template><!-- 修改分类对话框 --><el-dialog title="修改分类" :visible.sync="editCateDialogVisible" width="50%" @close="editCateDialogClosed"><el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="70px"><el-form-item label="分类名称" prop="cat_name"><el-input v-model="editCateForm.cat_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="editCateUserInfo">确 定</el-button></span></el-dialog>data() {return {//控制修改角色对话框的显示与隐藏editCateDialogVisible: false,//查询到的分类信息对象editCateForm: {},editCateFormRules: {cat_name: [{required: true, message: '请输入分类名称', trigger: 'blur' }],},}},// 展示编辑角色的对话框async showCateEditDialog(id) {const {data: result } = await this.$http.get('categories/' + id)if (result.meta.status !== 200) {return this.$message.error('查询分类信息失败！')}//3.查询到的数据保存到editCateForm 上this.editCateForm = result.datathis.editCateDialogVisible = true},// 监听修改角色对话框的关闭事件editCateDialogClosed() {this.$refs.editCateFormRef.resetFields()},//修改分类信息并提交editCateUserInfo() {this.$refs.editCateFormRef.validate(async (valid) => {if (!valid) return //验证失败//验证成功：发起修改分类信息的put请求const {data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id, {cat_name: this.editCateForm.cat_name,})if (res.meta.status !== 200) {return this.$message.error('更新分类信息失败！')}//修改成功//1.关闭对话框this.editCateDialogVisible = false//2.刷新数据列表this.getCateList()//3.提示修改成功this.$message.success('更新分类信息成功！')})},//根据id删除对应角色信息async removeCateById(id) {const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).catch((error) => error)if (confirmResult !== 'confirm') {return this.$message.info('已取消删除')}const {data: res } = await this.$http.delete('categories/' + id)if (res.meta.status !== 200) {return this.$message.error('删除分类失败！')}this.$message.success('删除分类成功！')this.getCateList()},
15. 提交代码
git branchgit add .git commit -m "完成了商品分类功能的开发"git pushgit checkout mastergit merge goods_cate git push
