[Vue.js]实战 -- 电商项目(四)

2023-09-10 阅读 19 评论 0

摘要：分类管理商品分类概述商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到基于vue的项目，商品分类列表基本布局与数据获取基本布局面包屑导航区域  <el-breadcrumb separator-class="

分类管理

商品分类概述

商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到

基于vue的项目，

商品分类列表

基本布局与数据获取

基本布局

面包屑导航区域

<!-- 面包屑导航区域 -->
<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-button type="primary">添加分类</el-button></el-row>
</el-card>

数据获取

获取商品分类数据

export default {data() {return {// 查询条件querInfo: {type: 3,pagenum: 1,pagesize: 5},// 商品分类的数据列表，默认为空catelist: [],totle: 0,}},created() {this.getCateList()},methods: {// 获取商品分类数据async getCateList() {const {data: res} = await this.$http.get('categories', {params: this.querInfo})if (res.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}console.log(res.data)// 把数据列表，赋值给 catelistthis.catelist = res.data.result// 为总数据条数赋值this.total = res.data.total},}
}

电商项目实战。

树形表格

第三方树形表格的基本使用

安装运行依赖vue-table-with-tree-grid
导入main.js

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

实现分类树形列表

实现效果

<tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-indexindex-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><!-- 排序 --><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="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>
</tree-table>

处理数据

columns: [{label: '分类名称',prop: 'cat_name'},{label: '是否有效',// 表示将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'isok'},{label: '排序',// 表示，将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'order'},{label: '操作',// 表示，将当前列定义为模板列type: 'template',// 表示当前这一列使用模板名称template: 'opt'}
],

分页功能

实现效果

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

处理数据

methods: {// 监听 pagesize 改变handleSizeChange(newSize) {this.querInfo.pagesize = newSizethis.getCateList()},// 监听pagenum的改变handleCurrentChange(newPage) {this.querInfo.pagenum = newPagethis.getCateList()}
}

vue.js从入门到项目实战？

添加分类

实现分类树形列表

实现添加分类对话框布局
控制对话框显示和隐藏

<el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="resetForm"><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"><el-form-item label="分类名称：" prop="cat_name"><el-input v-model="addForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类："><!-- 分类菜单 --></el-form-item></el-form>
</el-dialog>

实现分类级联菜单效果

实现级联菜单效果
前端vue项目？级联菜单数据加载与填充

<el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderConfig" v-model="selectedCateList" @change="handleChange" change-on-select clearable>
</el-cascader>

// 先获取所有父级分类的数据列表
const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
if (res.meta.status !== 200) return this.$message.error('获取父级分类失败！')
// 把父级分类数据，挂载到data中
this.parentCateList = res.data

控制父级分类的选择

父级分类选择时，获取对应的分类 id

handleChange() {if (this.selectedCateList.length === 0) {// 证明没有选中任何父级分类this.addForm.cat_pid = 0this.addForm.cat_level = 0} else {// 选中父级分类this.addForm.cat_pid = this.selectedCateList[this.selectedCateList.length - 1]// 设置分类等级this.addForm.cat_level = this.selectedCateList.length}
}

Vue项目、

完成分类添加

将分类名称、分类等级和父分类 id 提交到后台，完成分类添加

const { data: res } = await this.$http.post('categories', this.addForm)
if (res.meta.status !== 201) {return this.$message.error('添加分类失败！')
}
this.$message.success('添加分类成功！')

实现商品分类的编辑和删除功能

vuejs项目实战pdf？首先要在编辑和删除绑定事件

<template slot="opt" slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
</template>

编辑操作

编辑分类对话框布局

<!-- 编辑分类的对话框 -->
<el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%"><el-form:model="editCateForm":rules="editCateFormRules"ref="editCateFormRef"label-width="100px"><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="eidtCate">确 定</el-button></span>
</el-dialog>

控制编辑对话框关闭

// 编辑对话框 控制
editCateDialogVisible: false,

验证编辑分类表单

// 编辑分类表单验证
editCateFormRules: {cat_name: [{required: true, message: '请输入分类名称', trigger: 'blur'}]
},

绑定编辑表单的对象

// 编辑表单 绑定对象
editCateForm: ''

显示编辑的对话框

// 显示编辑对话框
async showEditCateDialog(id) {const {data: res} = await this.$http.get('categories/' + id)if (res.meta.status !== 200) return this.$message.error('获取分类失败！')this.editCateForm = res.datathis.editCateDialogVisible = true
},

编辑分类名

// 编辑分类名
eidtCate() {this.$refs.editCateFormRef.validate(async valid => {if (!valid) returnconst {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('更新分类名失败！')this.$message.success('更新分类名成功！')this.getCateList()this.editCateDialogVisible = false})
},

删除操作

删除分类(利用id)

// 删除分类
async removeCate (id) {const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)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()
}