黑马vue实战项目-(四)商品分类页面的开发

一,布局商品分类组件和页面

就是使用之前的代码修改一下,效果如下:
在这里插入图片描述

二,获取商品分类数据列表

在这里插入图片描述
在 应该在页面的组件创建时就获取到,因为获取到的数据需要用来渲染页面的。所以需要利用vue的生命周期函数:

<script>
	export default{
		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(res.meta.msg)
				this.cateList=res.data.result
				this.total=res.data.total
			}
		}
	}
</script>

三,
第一步,安装依赖:
在这里插入图片描述
在这里插入图片描述

接下来就可以使用名为tree-table的组件了:

<!-- 表格区域 -->
			 <zk-table
			      :data="cateList"
			      :columns="columns"
				  :selection-type="false"
				  :expand-type="false"
				  show-index
				  index-text="#"
				  border
				  :show-row-hover="false"
			      >
			     <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>
			 </zk-table>

对应的数据:

data(){
	return{
		//查询条件
		queryInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
		// 查询到的商品分类
		cateList:[],
		// 总数据条数
		total:0,
		// 为 tree-table指定列定义
		columns: [
			     //第一列数据
		          {
		            label: '分类名称',
		            prop: 'cat_name',
		          },
				  //第二列数据
				  {
				    label:'是否有效',
					//表示将当前列定义为模板列
					type:'template',
					//表示当前这一列使用模板名称
					template:'isOk'
				  }
		        ],
	}
},

三,创建新的列-排序

<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</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" @click="">添加角色</el-button>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			 <zk-table
			      :data="cateList"
			      :columns="columns"
				  :selection-type="false"
				  :expand-type="false"
				  show-index
				  index-text="#"
				  border
				  :show-row-hover="false"
				  class="treetable"
			      >
				  <!-- 是否有效列 -->
			     <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 slot="order" slot-scope="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="danger" v-else="scope.row.cat_level===2" size="mini">三级</el-tag>
				 </template>
				 <!-- 操作列 -->
				 <template slot="opt" 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>
			 </zk-table>
			<!-- 分页区域 -->
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="queryInfo.pagenum"
			      :page-sizes="[3, 6, 10,15]"
			      :page-size="queryInfo.pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//查询条件
				queryInfo:{
							type:3,
							pagenum:1,
							pagesize:6
						},
				// 查询到的商品分类
				cateList:[],
				// 总数据条数
				total:0,
				// 为 tree-table指定列定义
				columns: [
					     //第一列数据
				          {
				            label: '分类名称',
				            prop: 'cat_name',
				          },
						  //第二列数据
						  {
						    label:'是否有效',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'isOk',
							width:'75px'
						  },
						  //第三列数据
						  {
						    label:'排序',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'order'
						  },
						  //第四列数据
						  {
						    label:'操作',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'opt'
						  },
				        ],
			}
		},
		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(res.meta.msg)
				this.cateList=res.data.result
				this.total=res.data.total
			},
			//监听页面改变
			handleSizeChange(pageSize){
				this.queryInfo.pagesize=pageSize
				this.getCateList()
			},
			//监听pagenum的改变
			handleCurrentChange(pagenum){
				this.queryInfo.pagenum=pagenum
				this.getCateList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.treetable{
		margin-top: 15px;
	}
</style>

实现的效果:
在这里插入图片描述

三,点击添加分类弹出对话框

在这里插入图片描述
接口文档:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四,商品分类的二级级联选择框的实现

第一步:首先要获取商品分类的数据列表。
接口文档如下:
在这里插入图片描述
因为只有三级,所以这里只需要获取两级就可以了,而且需要获取所有分类,所以剩余两个参数是空。
于是请求如下:

//添加新分类按钮,弹出添加新分类对话框
			async addCateBtn(){
				this.getParentCateList()
				this.addcatdialogVisible=true
			},
			//获取父级分类的数据列表
			async getParentCateList(){
				const{data:res}=await this.$http.get('categories',{
					params:{
						type:2
					}
				})
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.parentCateList=res.data
			}

第二步:使用element-ui提供的级联选择器Cascader

//监听页面改变
			handleSizeChange(pageSize){
				this.queryInfo.pagesize=pageSize
				this.getCateList()
			},
			//监听pagenum的改变
			handleCurrentChange(pagenum){
				this.queryInfo.pagenum=pagenum
				this.getCateList()
			},
			//关闭添加新分类对话框时触发
			addcatDialogClosed(){
				this.$refs.addCatFormRef.resetFields()
				this.selectedKeys=[]
				this.addcatForm.cat_pid=0
				this.addcatForm.cat_level=0
			},
			
			//添加新分类按钮,弹出添加新分类对话框
			async addCateBtn(){
				this.getParentCateList()
				this.addcatdialogVisible=true
			},
			//获取父级分类的数据列表
			async getParentCateList(){
				const{data:res}=await this.$http.get('categories',{
					params:{
						type:2
					}
				})
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.parentCateList=res.data
			},
			//级联选择项发生变化则触发
			handleChange(){
				// console.log(this.selectedKeys)
				//如果selectedKeys数组中的length大于0,证明选中了父级分类
				//反之,则说明没有选中任何父级分类
				if(this.selectedKeys.length>0){
					//取出当前选中的最末尾一级的id,作为当前的值的父级id,为后续发起请求更改数据库参数做铺垫
					this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
					//接着为当前的分类等级赋值,同样是为了后续发起请求更改数据库参数做铺垫
					this.addcatForm.cat_level=this.selectedKeys.length
				}else{
					//父级分类的id
					this.addcatForm.cat_pid=0
					this.addcatForm.cat_level=0
				}
			},
			//添加新的分类进数据库
			addcate(){
				//先对表单进行预验证
				this.$refs.addCatFormRef.validate(async valid=>{
					if(!valid)return
					const{data:res}=await this.$http.post('categories',this.addcatForm)
					if(res.meta.status!==201)return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.getCateList()
					this.addcatdialogVisible= false
				})
			},

对应的级联选择器:

				  <!-- options用来指定数据源 -->
				  <!-- props用来指定配置对象 -->
				  <!-- v-model必须绑定一个数组(已经选中的id) -->
				<el-cascader v-model="selectedKeys" :options="parentCateList" 
				  :props="cascaderProps"  @change="handleChange" class="el-cascader-panel" clearable
				  ></el-cascader>

五,编辑功能的实现

在这里插入图片描述
要做到这样子:
在这里插入图片描述

和之前的做法是一样的,这里已经使用了作用域插槽,这样就可以在点击编辑时,调用函数,查出对应的本行的分类名称,填充到表单中:

//点击编辑按钮
			editCate(cate){
				//打开对话框
				this.editCateDialogVisible= true
				//将本分类得到的数据保存
				this.editCateList=cate
			},

绑定数据,渲染到页面:

<!-- 修改角色对话框 -->
		<el-dialog
		  title="修改分类信息"
		  :visible.sync="editCateDialogVisible"
		  width="50%"
		 >
		 <!-- 内容主体区域,这里有一个匿名插槽 -->
		<el-form :model="editCateList" :rules="addCatFormRules" ref="editCateListRef" label-width="100px">
				<el-form-item label="分类名称" prop="cat_name">
				  <el-input v-model="editCateList.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="editCateInfo">修改</el-button>
		  </span>
		</el-dialog>

紧接着,发起请求,修改分类名称:
接口文档:
在这里插入图片描述

editCateInfo(){
				//先进行验证
				this.$refs.editCateListRef.validate(async valid=>{
					if(!valid)return 
					//验证通过发起请求
					const{data:res}=await this.$http.put(`categories/${this.editCateList.cat_id}`,{cat_name:this.editCateList.cat_name})
					if(res.meta.status!==200)return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.getCateList()
					this.editCateDialogVisible= false
				})
			}

六,删除分类功能的实现

在这里插入图片描述

//删除数据
			async removeCayeById(id){
				//弹窗询问是否删除数据
				const confirmResult=await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).catch(err=>err)
				//如果用户确认删除,则返回字符串confirm
				//如果用户确认取消,则返回字符串cancel
				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(res.meta.msg)
				this.$message.success(res.meta.msg)
				this.getCateList()
				this.editCateDialogVisible= false
			}

七,将商品分类的代码提交到远程仓库

©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页