php商品查询代码技巧_低代码可视化商城治理系统产品分类代码生成器

产品分类在商城管理系统中扮演着至关主要的角色。
通过合理的分类，用户能够更快速地找到所需商品，提高购物效率。
同时，分类也有助于商城对商品进行更有效的管理和展示，从而提升发卖额和用户忠实度。

拷贝demo_table修正为shop_cate表

修正表构造

个中包括一个自增ID字段，及三个韶光类型的字段，别的的字段按照需求增加，这里我们增加title,remark两个字段。
接下来我们会在设计页面里用到这两字段。

天生API

输入你安装的PHP时的域名/super/index.html，登录进去找到代码天生器界面。

新增页面

首页我们先增一个分组商品管理-商品管理下新增页面商品分类。
点击新增页面，输入页面标识、页面名称、字体图标.

利用CRUD模板页面至设计区

这里采取现成的CRUD模板快速进设计区

修正API

结合表shop_cate表，那么我们在后台API属性设置即为shop/cate即可。

拖入单行文本字段进编辑表单设计区，输入字段标识、字段标识标题。

同理拖入多行文本字段，修正字段标识对应数据库的标识。

保存源码至本地后打开页面即可访问商品分类管理界面。

进入页面

启动环境进进入产品分类管理，在右上角可以设计不同主题效果。

这时增编削查已经完成。

数据查询

输入单选文本，字段名称改为title_like支持模板查询。
PHP更多扩展查询参照此地址：https://www.diygw.com/85

至此我们的产品分类管理增编削查已经完成

<template><div class="container"><div class="el-card is-always-shadow diygw-col-24"><div class="el-card__body"><div class="mb8"><el-form class="flex flex-direction-row flex-wrap" :model="queryParams" :rules="queryParamsRules" ref="queryForm" label-width="80px"><div class="flex diygw-col-0"><el-form-item class="diygw-el-rate" prop="title_like" label="标题"><el-input type="text" placeholder="请输入标题查询" v-model="queryParams.title_like"> </el-input></el-form-item></div><div class="flex diygw-col-0"><el-button type="primary" @click="handleQuery"> <SvgIcon name="ele-Search" /> 搜索 </el-button> <el-button @click="resetQuery"> <SvgIcon name="ele-Refresh" /> 重置 </el-button></div></el-form></div><div class="mb8"><el-button type="primary" plain @click="onOpenAddModule"> <SvgIcon name="ele-Plus" />新增 </el-button> <el-button type="danger" plain :disabled="multiple" @click="onTabelRowDel"> <SvgIcon name="ele-Delete" />删除 </el-button></div><el-table @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" stripe border current-row-key="id" empty-text="没有数据" style="width: 100%"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column label="置顶" prop="title" align="center"><template #default="scope"> <el-tag style="cursor: pointer" v-if="scope.row.sortnum > 0" type="error" @click="updatenumApi(scope.row)"> 取消置顶 </el-tag><el-tag style="cursor: pointer" @click="ordernumApi(scope.row)" v-else> 置顶 </el-tag> </template></el-table-column><el-table-column label="分类名称" prop="title" align="center"> </el-table-column><el-table-column label="数据状态" prop="status" align="center"><template #default="scope"> <el-tag v-if="scope.row.status == 1"> 有效 </el-tag><el-tag v-else> 无效 </el-tag> </template></el-table-column><el-table-column label="备注" prop="remark" align="center"> </el-table-column><el-table-column label="操作" align="center" fixed="right" width="180"><template #default="scope"><el-button type="primary" plain size="small" @click="onOpenEditModule(scope.row)"> <SvgIcon name="ele-Edit" />修正 </el-button> <el-button v-if="scope.row.id != 0" type="danger" plain size="small" @click="onTabelRowDel(scope.row)"> <SvgIcon name="ele-Delete" />删除 </el-button></template></el-table-column></el-table><!-- 分页设置--><div v-show="total > 0"><el-divider></el-divider> <el-pagination background :total="total" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div></div><!-- 添加或修正参数配置对话框 --><el-dialog :fullscreen="isFullscreen" width="800px" v-model="isShowDialog" destroy-on-close title="商品分类" draggable center><template #header="{ close, titleId, titleClass }"><h4 :id="titleId" :class="titleClass">商品分类</h4><el-tooltip v-if="!isFullscreen" content="最大化" placement="bottom"><el-button class="diygw-max-icon el-dialog__headerbtn"><el-icon @click="isFullscreen = !isFullscreen"><FullScreen /></el-icon></el-button></el-tooltip><el-tooltip v-if="isFullscreen" content="返回" placement="bottom"><el-button class="diygw-max-icon el-dialog__headerbtn"><el-icon @click="isFullscreen = !isFullscreen"><Remove /></el-icon></el-button></el-tooltip></template><el-form class="flex flex-direction-row flex-wrap" :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px"><div class="flex diygw-col-24"><el-form-item:rules="[{required: true,trigger: 'blur',message: '不能为空哟'}]"class="diygw-el-rate"prop="title"label="分类名称"><el-input type="text" placeholder="请输入分类名称" v-model="editForm.title"> </el-input></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="img" class="diygw-el-rate" label="分类图片"><diy-uploadinput v-model="editForm.img" title="分类图片"></diy-uploadinput></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="remark" class="diygw-el-rate" label="描述"><el-input type="textarea" rows="3" placeholder="请输入描述" v-model="editForm.remark"> </el-input></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="status" class="diygw-el-rate" label="数据状态"><el-radio-group v-model="editForm.status"><el-radio v-for="item in editFormData.statusDatas" :key="item.value" :label="item.value">{{ item.label }}</el-radio></el-radio-group></el-form-item></div></el-form><template #footer><div class="dialog-footer flex justify-center"><el-button @click="closeDialog"> 取 消 </el-button> <el-button type="primary" @click="onSubmit" :loading="saveloading"> 保 存 </el-button></div></template></el-dialog></div><div class="clearfix"></div></div></template><script>import { useRouter, useRoute } from 'vue-router';import { storeToRefs } from 'pinia';import { useUserInfo } from '@/stores/userInfo';import { ElMessageBox, ElMessage } from 'element-plus';import { deepClone, changeRowToForm } from '@/utils/other';import { addData, updateData, delData, listData } from '@/api';import DiyUploadinput from '@/components/upload/uploadinput.vue';export default {components: {DiyUploadinput},data() {return {globalOption: {},userInfo: {},ordernum: {code: 200,msg: '设置成功'},updatenum: {code: 200,msg: '修正成功',data: {id: '1',sortnum: '0'}},// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 弹出层标题title: '',// 总条数total: 0,tableData: [],// 是否显示弹出层isFullscreen: false,isShowDialog: false,saveloading: false,editFormInit: {},queryParamsInit: {},editFormData: {statusDatas: [{ value: '1', label: '有效' },{ value: '2', label: '无效' }]},queryParams: {pageNum: 1,pageSize: 10,title_like: ''},queryParamsRules: {},editForm: {id: undefined,title: '',img: '',remark: '',status: '1'},editFormRules: {}};},methods: {getParamData(e, row) {row = row || {};let dataset = e.currentTarget ? e.currentTarget.dataset : e;if (row) {dataset = Object.assign(dataset, row);}return dataset;},navigateTo(e, row) {let dataset = this.getParamData(e, row);let { type } = dataset;if (type == 'page' || type == 'inner' || type == 'href') {this.router.push({path: dataset.url,query: dataset});} else if (typeof this[type] == 'function') {this[type](dataset);} else {ElMessage.error('待实现点击事宜');}},async init() {},// 置顶 API要求方法async ordernumApi(param) {param = param || {};param = this.getParamData(param);let http_url = '/shop/cate/sortnum';let http_data = {};let http_header = {};http_data.id = param.id;let flag = await this.confirmFunction({ title: '确定置顶吗' });if (!flag) {ElMessage.error('你已取消');return;}let ordernum = await this.$http.post(http_url, http_data, http_header, 'json');this.ordernum = ordernum;this.resetQuery();},// 设置为0 API要求方法async updatenumApi(param) {param = param || {};param = this.getParamData(param);let http_url = '/shop/cate/update';let http_data = {};let http_header = {};http_data.id = param.id;http_data.sortnum = 0;let flag = await this.confirmFunction({ title: '确定取消置顶吗' });if (!flag) {ElMessage.error('你已取消');return;}let updatenum = await this.$http.post(http_url, http_data, http_header, 'json');this.updatenum = updatenum;this.resetQuery();},// confirm 自定义方法async confirmFunction(param) {param = param || {};let thiz = this;let title = param && (param.title || param.title == 0) ? param.title : thiz.title || '';return new Promise((resolve) => {ElMessageBox({message: title,title: '警告',showCancelButton: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {resolve(true);}).catch(() => {resolve(false);});});},// 打开弹窗openDialog(row) {if (row.id && row.id != undefined && row.id != 0) {this.editForm = changeRowToForm(row, this.editForm);} else {this.initForm();}this.isShowDialog = true;this.saveloading = false;},// 关闭弹窗closeDialog(row) {this.mittBus.emit('onEditAdmintableModule', row);this.isShowDialog = false;},// 保存onSubmit() {const formWrap = this.$refs.editFormRef;if (!formWrap) return;formWrap.validate((valid, fields) => {if (valid) {this.saveloading = true;if (this.editForm.id != undefined && this.editForm.id != 0) {updateData('/shop/cate', this.editForm).then(() => {ElMessage.success('修正成功');this.saveloading = false;this.closeDialog(this.editForm); // 关闭弹窗}).finally(() => {this.saveloading = false;});} else {addData('/shop/cate', this.editForm).then(() => {ElMessage.success('新增成功');this.saveloading = false;this.closeDialog(this.editForm); // 关闭弹窗}).finally(() => {this.saveloading = false;});}} else {let message = '';if (fields && Object.keys(fields).length > 0) {let field = fields[Object.keys(fields)[0]];let messages = field.map((item) => {return item.message;});message = messages.join(',');}ElMessage.error('验证未通过！
' + message);}});},// 表单初始化，方法：`resetFields()` 无法利用initForm() {this.editForm = deepClone(this.editFormInit);},/ 查询商品分类列表 /handleQuery() {this.loading = true;listData('/shop/cate', this.queryParams).then((response) => {this.tableData = response.rows;this.total = response.total;this.loading = false;});},/ 重置按钮操作 /resetQuery() {this.queryParams = deepClone(this.queryParamsInit);this.handleQuery();},// 打开新增商品分类弹窗onOpenAddModule(row) {row = [];this.title = '添加商品分类';this.openDialog(row);},// 打开编辑商品分类弹窗onOpenEditModule(row) {this.title = '修正商品分类';this.initForm();this.openDialog(row);},/ 删除按钮操作 /onTabelRowDel(row) {let thiz = this;const id = row.id || this.ids;ElMessageBox({message: '是否确认删除选中的商品分类?',title: '警告',showCancelButton: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function () {return delData('/shop/cate', id).then(() => {thiz.handleQuery();ElMessage.success('删除成功');});});},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map((item) => item.id);this.single = selection.length != 1;this.multiple = !selection.length;},//分页页面大小发生变革handleSizeChange(val) {this.queryParams.pageSize = val;this.handleQuery();},//当前页码发生变革handleCurrentChange(val) {this.queryParams.pageNum = val;this.handleQuery();}},async mounted() {this.router = useRouter();this.globalOption = useRoute().query;const stores = useUserInfo();const { userInfos } = storeToRefs(stores);this.userInfo = userInfos;await this.init();this.editFormInit = deepClone(this.editForm);this.queryParamsInit = deepClone(this.queryParams);this.handleQuery();this.mittBus.on('onEditAdmintableModule', () => {this.handleQuery();});},beforeUnmount() {this.mittBus.off('onEditAdmintableModule');}};</script><style lang="scss" scoped>.container {font-size: 12px;}</style>组合式代码天生器

<template><div class="container"><div class="el-card is-always-shadow diygw-col-24"><div class="el-card__body"><div class="mb8"><el-form class="flex flex-direction-row flex-wrap" :model="state.queryParams" :rules="queryParamsRules" ref="queryForm" label-width="80px"><div class="flex diygw-col-0"><el-form-item class="diygw-el-rate" prop="title_like" label="标题"><el-input type="text" placeholder="请输入标题查询" v-model="queryParams.title_like"> </el-input></el-form-item></div><div class="flex diygw-col-0"><el-button type="primary" @click="handleQuery"> <SvgIcon name="ele-Search" /> 搜索 </el-button> <el-button @click="resetQuery"> <SvgIcon name="ele-Refresh" /> 重置 </el-button></div></el-form></div><div class="mb8"><el-button type="primary" plain @click="onOpenAddModule"> <SvgIcon name="ele-Plus" />新增 </el-button> <el-button type="danger" plain :disabled="state.multiple" @click="onTabelRowDel"> <SvgIcon name="ele-Delete" />删除 </el-button></div><el-table @selection-change="handleSelectionChange" v-loading="state.loading" :data="state.tableData" stripe border current-row-key="id" empty-text="没有数据" style="width: 100%"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column label="置顶" prop="title" align="center"><template #default="scope"> <el-tag style="cursor: pointer" v-if="scope.row.sortnum > 0" type="error" @click="updatenumApi(scope.row)"> 取消置顶 </el-tag><el-tag style="cursor: pointer" @click="ordernumApi(scope.row)" v-else> 置顶 </el-tag> </template></el-table-column><el-table-column label="分类名称" prop="title" align="center"> </el-table-column><el-table-column label="数据状态" prop="status" align="center"><template #default="scope"> <el-tag v-if="scope.row.status == 1"> 有效 </el-tag><el-tag v-else> 无效 </el-tag> </template></el-table-column><el-table-column label="备注" prop="remark" align="center"> </el-table-column><el-table-column label="操作" align="center" fixed="right" width="180"><template #default="scope"><el-button type="primary" plain size="small" @click="onOpenEditModule(scope.row)"> <SvgIcon name="ele-Edit" />修正 </el-button> <el-button v-if="scope.row.id != 0" type="danger" plain size="small" @click="onTabelRowDel(scope.row)"> <SvgIcon name="ele-Delete" />删除 </el-button></template></el-table-column></el-table><!-- 分页设置--><div v-show="state.total > 0"><el-divider></el-divider> <el-pagination background :total="state.total" :current-page="state.queryParams.pageNum" :page-size="state.queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div></div><!-- 添加或修正参数配置对话框 --><el-dialog :fullscreen="isFullscreen" width="800px" v-model="isShowDialog" destroy-on-close title="商品分类" draggable center><template #header="{ close, titleId, titleClass }"><h4 :id="titleId" :class="titleClass">商品分类</h4><el-tooltip v-if="!isFullscreen" content="最大化" placement="bottom"><el-button class="diygw-max-icon el-dialog__headerbtn"><el-icon @click="isFullscreen = !isFullscreen"><FullScreen /></el-icon></el-button></el-tooltip><el-tooltip v-if="isFullscreen" content="返回" placement="bottom"><el-button class="diygw-max-icon el-dialog__headerbtn"><el-icon @click="isFullscreen = !isFullscreen"><Remove /></el-icon></el-button></el-tooltip></template><el-form class="flex flex-direction-row flex-wrap" :model="state.editForm" :rules="state.editFormRules" ref="editFormRef" label-width="90px"><div class="flex diygw-col-24"><el-form-item:rules="[{required: true,trigger: 'blur',message: '不能为空哟'}]"class="diygw-el-rate"prop="title"label="分类名称"><el-input type="text" placeholder="请输入分类名称" v-model="editForm.title"> </el-input></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="img" class="diygw-el-rate" label="分类图片"><diy-uploadinput v-model="editForm.img" title="分类图片"></diy-uploadinput></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="remark" class="diygw-el-rate" label="描述"><el-input type="textarea" rows="3" placeholder="请输入描述" v-model="editForm.remark"> </el-input></el-form-item></div><div class="flex diygw-col-24"><el-form-item prop="status" class="diygw-el-rate" label="数据状态"><el-radio-group v-model="editForm.status"><el-radio v-for="item in editFormData.statusDatas" :key="item.value" :label="item.value">{{ item.label }}</el-radio></el-radio-group></el-form-item></div></el-form><template #footer><div class="dialog-footer flex justify-center"><el-button @click="closeDialog"> 取 消 </el-button> <el-button type="primary" @click="onSubmit" :loading="state.saveloading"> 保 存 </el-button></div></template></el-dialog></div><div class="clearfix"></div></div></template><script setup name="goodscate">import { ElMessageBox, ElMessage } from 'element-plus';import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted, unref } from 'vue';import { deepClone, changeRowToForm } from '@/utils/other';import { addData, updateData, delData, listData } from '@/api';import { useRouter, useRoute } from 'vue-router';import { storeToRefs } from 'pinia';import { useUserInfo } from '@/stores/userInfo';import DiyUploadinput from '@/components/upload/uploadinput.vue';const stores = useUserInfo();const { userInfos } = storeToRefs(stores);const { proxy } = getCurrentInstance();const router = useRouter();const route = useRoute();const globalOption = ref(route.query);const getParamData = (e, row) => {row = row || {};let dataset = e.currentTarget ? e.currentTarget.dataset : e;if (row) {dataset = Object.assign(dataset, row);}return dataset;};const navigateTo = (e, row) => {let dataset = getParamData(e, row);let { type } = dataset;if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) {router.push({path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url,query: dataset});} else {ElMessage.error('待实现点击事宜');}};const state = reactive({userInfo: userInfos.value,ordernum: {code: 200,msg: '设置成功'},updatenum: {code: 200,msg: '修正成功',data: {id: '1',sortnum: '0'}},// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 弹出层标题title: '',// 总条数total: 0,tableData: [],// 是否显示弹出层isFullscreen: false,isShowDialog: false,saveloading: false,editFormData: {statusDatas: [{ value: '1', label: '有效' },{ value: '2', label: '无效' }]},queryParams: {pageNum: 1,pageSize: 10,title_like: ''},queryParamsRules: {},editForm: {id: undefined,title: '',img: '',remark: '',status: '1'},editFormRules: {}});const { userInfo, editFormData, queryParams, multiple, ordernum, tableData, updatenum, loading, title, single, total, isShowDialog, editForm, ids, saveloading, isFullscreen } = toRefs(state);// 置顶 API要求方法const ordernumApi = async (param) => {param = param || {};param = getParamData(param);let http_url = '/shop/cate/sortnum';let http_data = {};let http_header = {};http_data.id = param.id;let flag = await confirmFunction({ title: '确定置顶吗' });if (!flag) {ElMessage.error('你已取消');return;}let ordernum = await proxy.$http.post(http_url, http_data, http_header, 'json');state.ordernum = ordernum;state.resetQuery();};// 设置为0 API要求方法const updatenumApi = async (param) => {param = param || {};param = getParamData(param);let http_url = '/shop/cate/update';let http_data = {};let http_header = {};http_data.id = param.id;http_data.sortnum = 0;let flag = await confirmFunction({ title: '确定取消置顶吗' });if (!flag) {ElMessage.error('你已取消');return;}let updatenum = await proxy.$http.post(http_url, http_data, http_header, 'json');state.updatenum = updatenum;state.resetQuery();};//confirm 自定义方法const confirmFunction = async (param) => {let title = param && (param.title || param.title == 0) ? param.title : state.title || '';return new Promise((resolve) => {ElMessageBox({message: title,title: '警告',showCancelButton: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {resolve(true);}).catch(() => {resolve(false);});});};const editFormRef = ref(null);const editFormInit = deepClone(state.editForm);// 打开弹窗const openDialog = (row) => {if (row.id && row.id != undefined && row.id != 0) {state.editForm = changeRowToForm(row, state.editForm);} else {initForm();}state.isShowDialog = true;state.saveloading = false;};// 关闭弹窗const closeDialog = (row) => {proxy.mittBus.emit('onEditAdmintableModule', row);state.isShowDialog = false;};// 保存const onSubmit = () => {const formWrap = unref(editFormRef);if (!formWrap) return;formWrap.validate((valid, fields) => {if (valid) {state.saveloading = true;if (state.editForm.id != undefined && state.editForm.id != 0) {updateData('/shop/cate', state.editForm).then(() => {ElMessage.success('修正成功');state.saveloading = false;closeDialog(state.editForm); // 关闭弹窗}).finally(() => {state.saveloading = false;});} else {addData('/shop/cate', state.editForm).then(() => {ElMessage.success('新增成功');state.saveloading = false;closeDialog(state.editForm); // 关闭弹窗}).finally(() => {state.saveloading = false;});}} else {let message = '';if (fields && Object.keys(fields).length > 0) {let field = fields[Object.keys(fields)[0]];let messages = field.map((item) => {return item.message;});message = messages.join(',');}ElMessage.error('验证未通过！
' + message);}});};// 表单初始化，方法：`resetFields()` 无法利用const initForm = () => {state.editForm = deepClone(editFormInit);};const queryParamsInit = deepClone(state.queryParams);/ 查询商品分类列表 /const handleQuery = () => {state.loading = true;listData('/shop/cate', state.queryParams).then((response) => {state.tableData = response.rows;state.total = response.total;state.loading = false;});};/ 重置按钮操作 /const resetQuery = () => {state.queryParams = deepClone(queryParamsInit);handleQuery();};// 打开新增商品分类弹窗const onOpenAddModule = (row) => {row = [];state.title = '添加商品分类';initForm();openDialog(row);};// 打开编辑商品分类弹窗const onOpenEditModule = (row) => {state.title = '修正商品分类';openDialog(row);};/ 删除按钮操作 /const onTabelRowDel = (row) => {const id = row.id || state.ids;ElMessageBox({message: '是否确认删除选中的商品分类?',title: '警告',showCancelButton: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function () {return delData('/shop/cate', id).then(() => {handleQuery();ElMessage.success('删除成功');});});};// 多选框选中数据const handleSelectionChange = (selection) => {state.ids = selection.map((item) => item.id);state.single = selection.length != 1;state.multiple = !selection.length;};//分页页面大小发生变革const handleSizeChange = (val) => {state.queryParams.pageSize = val;handleQuery();};//当前页码发生变革const handleCurrentChange = (val) => {state.queryParams.pageNum = val;handleQuery();};const init = async () => {};// 页面加载时onMounted(async () => {await init();handleQuery();proxy.mittBus.on('onEditAdmintableModule', () => {handleQuery();});});// 页面卸载时onUnmounted(() => {proxy.mittBus.off('onEditAdmintableModule');});</script><style lang="scss" scoped>.container {font-size: 12px;}</style>

扩展商城管理系统产品分类的详细解析：

产品分类在商城管理系统中扮演着至关主要的角色。
通过合理的分类，用户能够更快速地找到所需商品，提高购物效率。
同时，分类也有助于商城对商品进行更有效的管理和展示，从而提升发卖额和用户忠实度。

综上所述，商城管理系统中的产品分类是一个繁芜而主要的环节。
通过合理的分类设置和优化方法，商城可以提高运营效率、提升用户体验并推动发卖古迹的增长。