谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改
文章目录
- 一,52-商品服务-API-三级分类-新增-新增效果完成
- 1,点击Append按钮,显示弹窗
- 2,测试
- 完整代码
- 二,53-商品服务-API-三级分类-修改-修改效果完成
- 1,添加Edit按钮并绑定事件
- 2,修改弹窗确定按钮事件逻辑
- 3,回显分类和计量单位
- 4,查询最新分类信息
- 5,点击确定发出请求
- 6,禁止弹窗自动消失
- 完整代码
一,52-商品服务-API-三级分类-新增-新增效果完成
这一节实现点击Append按钮,打开弹窗填写内容,点击确定,调用后台接口保存分类信息。
1,点击Append按钮,显示弹窗
弹窗使用el-dialog组件,基于参考文档copy代码。
<el-dialog title="提示" :visible.sync="dialogFormVisible"><el-form :model="category"><el-form-item label="分类名称"><el-input v-model="category.name" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>
① 点击Append按钮打开弹窗
使用dialogFormVisible
变量控制弹窗的显示,在Append
按钮的点击事件中讲这个变量的值置为true
。
代码中两处改动:
data
中定义变量dialogFormVisible
Append
按钮点击事件append
函数中设置dialogFormVisible
为true
②弹窗中的表单数据绑定
要把弹窗中表单与模型中的数据进行绑定:
- 首先,在data中定义一个
category
对象,初始化为空对象 - 然后,将这个对象与dialog对话框中的form表单进行绑定。结合后台数据库表结构,这个对象必须有如下几个字段。
name: 分类名称
parentCid:父分类Id
catLevel:分类级别,等于父分类级别加1
sort:默认为0
showStatus:默认为1,表示未被逻辑删除
- 第三,新增一个分类,必须要知道其父分类的
catId
,所以要在append
函数中获取父分类的catId
和catLevel
,存储在category
对象中。
③点击确定按钮,提交表单数据到后端接口,后端保存到数据库
确定按钮绑定click事件函数addCategory,代码如下。
addcategory() {this.$http({url: this.$http.adornUrl("/product/category/add"),method: "post",data: this.$http.adornData(this.category, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "添加成功",type: "success",duration: 1500,onClose: () => {console.log("添加成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据},});} else {this.$message.error(data.msg);}});
2,测试
点击Append,输入一个名为电子书222的分类,点击确定保存,保存成功后,界面刷新如下,说明前端操作成功。
查询后台数据库,有如下数据,说明后台保存成功。
完整代码
<template><div><el-treenode-key="catId":data="menus":props="defaultProps":expand-on-click-node="false"show-checkbox:default-expanded-keys="expandedKeys"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><el-dialog title="提示" :visible.sync="dialogFormVisible"><el-form :model="category"><el-form-item label="分类名称"><el-input v-model="category.name" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addCategory">确 定</el-button></div></el-dialog></div>
</template><script>
export default {components: {},props: {},data() {return {dialogFormVisible: false,menus: [],category: {name: "", parentCid: 0, catLevel: 0, sort: 0, showStatus: 1},expandedKeys: [],defaultProps: {children: "children",label: "name",},};},methods: {append(data) {console.log(data);this.dialogFormVisible = true;this.category = {name: "",parentCid: data.catId,catLevel: data.level + 1,sort: 0,showStatus: 1};},addCategory() {this.$http({url: this.$http.adornUrl("/product/category/save"),method: "post",data: this.$http.adornData(this.category, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "添加成功",type: "success",duration: 1500,onClose: () => {console.log("添加成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});},remove(node, data) {console.log(node, data);var ids = [node.data.catId];this.$confirm(`确定对[id=${ids.join(",")}]进行[${ids.length == 1 ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(ids, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {console.log("删除成功,关闭消息提示");this.getMenus(); // 重新获取数据this.expandedKeys = [ node.parent.data.catId ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});}).catch(() => {});},// 获取分类数据getMenus() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({ data }) => {console.log(data);this.dataListLoading = false;this.menus = data.data;});},},created() {this.getMenus(); // 获取分类数据},
};
</script>
<style scoped>
</style>
二,53-商品服务-API-三级分类-修改-修改效果完成
本节在前一节的基础上完成分类修改的功能。
1,添加Edit按钮并绑定事件
新增Edit按钮。
<el-button size="mini" @click="() => edit(data)">Edit
</el-button>
绑定按钮事件。
edit(data) {console.log(data);this.dialogType = "edit";this.dialogFormVisible = true;this.category = {...data };
},
2,修改弹窗确定按钮事件逻辑
因为Append
和Edit
共用一个弹窗,但二者的逻辑有显著不同,一个会调用save
接口,一个调用update
接口,所以在model
中新增一个变量dialogType
来标识Dialog
是哪个按钮触发的。
在两个按钮的响应事件中对该变量进行更新。
- create表示append
- edit表示edit
与此同时,定义一个变量dialogTitle
动态绑定Dialog的提示信息。
将dialog的确定按钮的click事件修改为方法submitCategory
,该方法根据dialogType确定是更新还是Append。
3,回显分类和计量单位
相对于下一节的内容,表单增加了分类和计量单位。
对应的模型为:
效果如下图。
4,查询最新分类信息
编辑分类信息的时候,为了防止数据过期,最佳方案是根据catId查询并回显最新数据的信息。
// 根据catId查询最新数据this.$http({url: this.$http.adornUrl(`/product/category/info/${data.catId}`),method: "get",data: this.$http.adornData({ catId: data.catId }, false),}).then(({ data }) => {if (data && data.code === 0) {this.category = {...data.data };} else {this.$message.error(data.msg);}});
5,点击确定发出请求
点击确定按钮,就会向后台发出请求。
updateCategory() {var {catId, name, icon, productUnit } = this.categoryconsole.log( this.category);this.$http({url: this.$http.adornUrl("/product/category/update"),method: "post",data: this.$http.adornData({catId, name, icon, productUnit }, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "修改成功",type: "success",duration: 1500,onClose: () => {console.log("修改成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid == 0 ? this.category.catId : this.category.parentCid ]; // 重置展开节点console.log(this.expandedKeys);},});} else {this.$message.error(data.msg);}});},
注意,请求成功后要重新请求页面数据,刷新页面,展开指定分类。
此外,因为是部分更新,所以不能不需要的字段也更新了,仅仅更新必要的四个字段。
6,禁止弹窗自动消失
点击弹窗之外,弹窗会自动隐藏,要取消这个行为,可以给Dialog加上一个属性,并设置为false。
完整代码
<template><div><el-treenode-key="catId":data="menus":props="defaultProps":expand-on-click-node="false"show-checkbox:default-expanded-keys="expandedKeys"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonsize="mini"@click="() => edit(data)">Edit</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal=false><el-form :model="category"><el-form-item label="分类名称"><el-input v-model="category.name" autocomplete="off"></el-input></el-form-item><el-form-item label="图标"><el-input v-model="category.icon" autocomplete="off"></el-input></el-form-item><el-form-item label="计量单位"><el-input v-model="category.productUnit" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="submitCategory">确 定</el-button></div></el-dialog></div>
</template><script>
export default {components: {},props: {},data() {return {dialogTitle: "", // 编辑窗口标题,新增分类,修改分类dialogType: "", // 编辑窗口类型,create表示append,edit表示editdialogFormVisible: false,menus: [],category: {name: "", parentCid: 0, catLevel: 0, sort: 0, showStatus: 1, icon: "", productUnit: "", catId: null},expandedKeys: [],defaultProps: {children: "children",label: "name",},};},methods: {append(data) {console.log(data);this.dialogType = "create";this.dialogTitle = "新增分类";this.dialogFormVisible = true;this.category = {name: "",parentCid: data.catId,catLevel: data.level + 1,sort: 0,showStatus: 1};},edit(data) {console.log(data);this.dialogType = "edit";this.dialogTitle = "修改分类";this.dialogFormVisible = true;// 根据catId查询最新数据this.$http({url: this.$http.adornUrl(`/product/category/info/${data.catId}`),method: "get",data: this.$http.adornData({ catId: data.catId }, false),}).then(({ data }) => {if (data && data.code === 0) {this.category = {...data.data };} else {this.$message.error(data.msg);}});},submitCategory() {if (this.dialogType === "create") {this.addCategory();} else if (this.dialogType === "edit") {this.updateCategory();}},updateCategory() {var {catId, name, icon, productUnit } = this.categoryconsole.log( this.category);this.$http({url: this.$http.adornUrl("/product/category/update"),method: "post",data: this.$http.adornData({catId, name, icon, productUnit }, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "修改成功",type: "success",duration: 1500,onClose: () => {console.log("修改成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid == 0 ? this.category.catId : this.category.parentCid ]; // 重置展开节点console.log(this.expandedKeys);},});} else {this.$message.error(data.msg);}});},addCategory() {this.$http({url: this.$http.adornUrl("/product/category/save"),method: "post",data: this.$http.adornData(this.category, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "添加成功",type: "success",duration: 1500,onClose: () => {console.log("添加成功,关闭消息提示");this.dialogFormVisible = false;this.getMenus(); // 重新获取数据this.expandedKeys =[ this.category.parentCid ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});},remove(node, data) {console.log(node, data);var ids = [node.data.catId];this.$confirm(`确定对[id=${ids.join(",")}]进行[${ids.length == 1 ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(ids, false),}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {console.log("删除成功,关闭消息提示");this.getMenus(); // 重新获取数据this.expandedKeys = [ node.parent.data.catId ]; // 重置展开节点},});} else {this.$message.error(data.msg);}});}).catch(() => {});},// 获取分类数据getMenus() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({ data }) => {console.log(data);this.dataListLoading = false;this.menus = data.data;});},},created() {this.getMenus(); // 获取分类数据},
};
</script>
<style scoped>
</style>
相关文章:

谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改
文章目录 一,52-商品服务-API-三级分类-新增-新增效果完成1,点击Append按钮,显示弹窗2,测试完整代码 二,53-商品服务-API-三级分类-修改-修改效果完成1,添加Edit按钮并绑定事件2,修改弹窗确定按…...

uni-app 影视类小程序开发从零到一 | 开源项目分享
引言 在数字娱乐时代,对于电影爱好者而言,随时随地享受精彩影片成为一种日常需求。分享一款基于 uni-app 开发的影视类小程序。它不仅提供了丰富的影视资源推荐,还融入了个性化知乎日报等内容,是不错的素材,同时对电影…...
Python使用正则替换字符串
Python小技:使用正则替换字符串 java中有String.replaceAll()方法使用正则替换字符串, 在Python中,字符串也有一个replace方法,但是这个方法只能精准替换, 如果想正则替换,就要改成re.sub方法,而…...
每日一练,java03
目录 题目wait()、notify()和notifyAll()方法的特性和使用场景wait() 方法notify() 方法notifyAll() 方法使用场景 注意事项 题目 选自牛客网 1.下面关于JAVA的垃圾回收机制,正确的是( ) A.当调用“System.gc()”来强制回收时,系…...

【机器学习】深入理解损失函数(Loss Functions)
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 💫个人格言: "如无必要,勿增实体" 文章目录 深入理解损失函数(Loss Functions)什么是损失函数?常见损失函数类型1. 均方误差…...
python实现特征检测算法3
python实现SIFT(尺度不变特征变换)算法、SURF(Speeded Up Robust Features)算法 1.SIFT算法详解算法步骤Python实现详细解释优缺点应用领域2.SURF算法详解算法步骤Python实现详细解释SURF算法原理优缺点应用领域尺度不变特征变换(SIFT,Scale-Invariant Feature Transform…...

软件更新的双刃剑:从”微软蓝屏”事件看网络安全的挑战与对策
引言 原文链接 近日,一场由微软视窗系统软件更新引发的全球性"微软蓝屏"事件震惊了整个科技界。这次事件源于美国电脑安全技术公司"众击"提供的一个带有"缺陷"的软件更新,如同一颗隐形炸弹在全球范围内引爆,…...
Redis 主从搭建
Redis主从搭建 7.2.5 文章目录 一. 同主机搭建Redis主从1. 环境介绍2. 环境前准备工作3. 安装 Redis 7.2.54. redis 配置修改并且启动4.1 修改配置文件4.2 编写启动脚本 5. 开启主从5.1 开启5.2 主库实例查看主从信息5.3 从库实例查看主从信息5.4 验证主从配置是否生效 6. 解除…...
LeetCode 129, 133, 136
文章目录 129. 求根节点到叶节点数字之和题目链接标签思路代码 133. 克隆图题目链接标签思路代码 136. 只出现一次的数字题目链接标签思路代码 129. 求根节点到叶节点数字之和 题目链接 129. 求根节点到叶节点数字之和 标签 树 深度优先搜索 二叉树 思路 由于本题需要 从…...
macOS 环境Qt Creator 快捷键
在 macOS 环境下,Qt Creator 是一个流行的集成开发环境(IDE),用于开发 Qt 项目。下面是一些常用的快捷键和操作技巧,帮助你更高效地使用 Qt Creator 进行项目开发和管理: 在 macOS 中,Cmd 键 四…...

【C# WInForm】将TextBox从输入框设置为文本框
1.需求情形: textbox作为最常用的控件之一,通常是用来输入文本信息或者显示文字,但是如果要在界面中显示大段文本,一个带有边框、可选中的文本样式似乎不合适。像这样: 我需要的是这段文字不仅能跨行,而且…...

minio 服务docker配置
用minio docker配置了一个服务,分享链接始终是127.0.01开始的, 改成docker的host的ip则提示签名不匹配, 好在这个文件主要是用来下载的,所以可以通过设置bucket的匿名访问权限来实现下载; 这样不需要后面的地址参数就…...
开源模型应用落地-LangChain高阶-智能体探究-自定义agent(五)
一、前言 大模型具有非常强大的功能,可以解答疑问、撰写报告和文档、总结内容、进行翻译等各种日常工作任务。然而,大模型还可以应用于更多的场景,发挥出更强大的作用。 通过智能体,我们可以实现许多有价值的事情,比如:在日常生活中,我们能借助智能体实现智能家居的自动化…...

16_网络IPC4-数据传输
send() 用于流式套接字 向SOCKET发送数据 。 Socket 只是通信节点,通信之前需要连接,即发送端发送之前 需要知道对端的地址,才能找到对端的socket节点,才能发送成功。而接收端不同,接收函数 如 recv () 不需要一定知道…...

怎样做好仓库管理工作?如何利用仓库管理系统进行有效管理?
我前前后后跑遍了十几家仓储设备公司,跟那些制造业的朋友们聊了个痛快,从他们那儿学到了不少仓库管理的实践方法。 回来自己整理了一套仓库管理更高效的实用方法,现在就来跟大家伙儿聊聊仓库管理中那些常见问题,以及我是怎么琢磨…...
PHP-显示所有错误信息
1 需求 2 接口 3 示例 要在 PHP 中显示所有错误信息,你可以通过修改 php.ini 配置文件或在你的 PHP 脚本中设置错误报告级别来实现。以下是两种常见的方法: 方法一:修改 php.ini 配置文件 找到你的 php.ini 文件。这个文件的位置取决于你的 P…...
js修改hash的方法
关键: window.onhashchange (event) > {// do something }hash变化包括 js修改hash手动修改url的hash浏览器前进、后退 js修改hash: location.href "#user";在vue-router等路由组件中如何实现history模式呢? 关键函数:hi…...

机械学习—零基础学习日志(高数10——函数图形)
零基础为了学人工智能,真的开始复习高数 函数图像,开始新的学习!本次就多做一做题目! 第一题: 这个解法是有点不太懂的了。以后再多研究一下。再出一道题目。 张宇老师,比较多提示了大家,一定…...

Godot游戏制作 03世界构建1.0版
在game场景,删除StaticBody2D节点,添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块,自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式,TileMap选择绘制,选中图块后在…...

MySql性能调优05-[sql实战演练]
sql实战演练 行列转换行列式转换第一题【列转行】第二题【列转行】 having的使用找到表中,名字重复的项有数据表employee,包含如下字段id、name、department、age,编写SQL,找到不与其他人同龄的年纪最大的员工的年龄有数据表emplo…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...

大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...

华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...