谷粒商城实战笔记-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…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...