2.6.3.4 实战案例:商品管理
【学习目标】
通过制作商品管理功能,掌握管理后台页面的制作方法。
【案例说明】
商品管理主要包括新增商品、修改商品、删除商品、搜索商品、批量上下架等功能。运行效果如图7-13所示。
图7-13 商品管理功能运行效果
【开发过程】
1、数据制作
商品管理功能中需要使用3个数据集,一个动态数据集“商品”,2个静态数据集“商品状态”和“页面数据”。商品管理功能维护的就是商品数据集中的数据。商品状态分为正常和下架,存储在商品状态数据集中。页面数据数据集作为页面中的临时数据存储单元。
商品状态数据集的结构和数据,如图7-14所示。
图7-14 商品状态数据集结构及数据
页面数据数据集的结构,如图7-15所示。给页面数据数据集添加一条空记录,便于页面中的使用。
图7-15 页面数据数据集结构
2、页面制作
共需制作3个页面,分别是商品管理页面、新增商品页面和编辑商品页面。商品管理页面显示工具栏和商品列表。工具栏中包括5个功能。
l 按商品状态过滤数据
l 按商品名称查找数据
l 新增商品,打开新增商品页面
l 批量设置选中商品的商品状态为正常
l 批量设置选中商品的商品状态为下架
商品列表中包括5个功能。
l 显示商品数据
l 全选或选中某些行,标记选中行,用于批量上下架功能
l 在商品状态列中用开关按钮显示商品状态,单击开关按钮可以改变商品状态
l 编辑当前商品数据,打开编辑商品页面
l 删除当前商品数据
(1)商品管理页
新建“商品管理”页面,在页面中添加商品数据集、商品状态数据集和页面数据数据集。数据集组件的属性见表7-1。
表7-1 商品管理页数据集说明
数据集类型 |
数据名称 |
属性设置 |
动态数据集 |
商品 |
自动模式=加载 计算列=新增选中状态列(数据类型=整数) 过滤=商品名称 字符匹配 页面数据.条件二 并且 状态=页面数据.条件一, 排序=按状态降序 值改变事件=保存 目标数据集=商品 关联查询=商品.商品分类ID 等于 商品分类.主键 查询列=商品分类.类别 |
静态数据集 |
页面数据 |
自动加载=是 选中状态列的计算规则=默认等于0, 当商品.选中状态.和等于商品.记录数时等于1 |
静态数据集 |
商品状态 |
自动加载=是 |
按照表7-2列出的组件说明,制作商品管理页面的工具栏。表中的添加组件是指要添加的组件,父组件是指组件要添加到的位置,属性设置是指本案例中组件属性应该设置的值。
表7-2 商品管理页工具栏组件说明
添加组件 |
父组件 |
属性设置 |
行列 |
页面 |
添加2列,一共5列 |
列 |
行列 |
预定义样式=col col-xs-2 PC端组件使用 Bootstrap样式,行列为响应式布局组件,即将宽度分为12份,col-xs-2中的数字表示该列占几份,如果要在一行中显示,这些列的样式中的数字加起来小于等于12 即可 |
下拉列表 |
列 |
绑定数据列=页面数据.条件一 下拉数据集=商品状态 下拉数据值=商品状态.值 下拉显示名=商品状态.状态, 值改变事件=刷新 目标数据集=商品 |
输入框 |
列 |
绑定数据列=页面数据.条件二 提示信息=请输入商品名称 |
查询按钮 |
列 |
文本=查询 单击=刷新 目标数据集=商品 |
新增按钮 |
列 |
文本=新增 单击=打开子页面 页面源=新增商品 共享数据集=商品 背景颜色=绿色 |
批量上架按钮 |
列 |
文本=批量上架 单击=自定义:循环商品数据集所有行,如果当前行的选中状态为1,设置商品状态为正常。全部遍历后,保存商品数据集 |
批量下架按钮 |
列 |
文本=批量下架 单击=自定义:循环商品数据集所有行,如果当前行的选中状态为1,设置商品状态为下架、全部遍历后,保存商品数据集 |
商品管理页工具栏部分制作完成后,效果如图7-14所示。
图7-14 商品管理页面工具栏运行效果
商品列表看似是一个整体,其实是分成两部分实现的。用行列组件实现商品列表的表头,用动态列表组件实现商品列表的表体。按照表7-3列出的组件说明,制作商品管理页面的商品列表。
表7-3 商品管理页商品列表组件说明
添加组件 |
父组件 |
属性设置 |
行列 |
页面 |
添加5列,一共8列 |
多选 |
第一列 |
选中时值=1 未选中时值=0 绑定数据列:页面数据.选中状态 选择:所有行赋值 目标数据集=商品 列=商品.选中状态 值=选择.选中值 |
文本 |
列 |
文本=商品数据集列名称。 |
动态列表 |
页面 |
绑定数据集=商品 |
行列 |
动态列表 |
添加5列,一共8列 |
多选 |
第一列 |
选中时值=1 未选中时值=0 绑定数据列:商品.选中状态 |
文本 |
列 |
动态文本=与表头名称对应的商品数据集的列 |
图片 |
列 |
动态URL=商品.图片 |
开关按钮 |
列 |
绑定数据列=商品.状态 选中时值、选中时标签=正常 未选中时值、未选中时标签=下架 |
编辑按钮 |
列 |
文本=编辑 单击=打开子页面 页面源=编辑商品 共享数据集=商品 |
删除按钮 |
列 |
文本=删除 单击=删除 目标数据集=商品 |
商品管理页商品列表部分制作完成后,运行效果如图7-13所示。
(2)新增商品页
添加“新增商品”页面,在页面中添加商品数据集、商品分类数据集。数据集组件的属性见表7-4。
表7-4 新增商品页数据集说明
数据集类型 |
数据名称 |
属性设置 |
动态数据集 |
商品 |
自动模式=新增 状态列的默认值规则=正常 关联查询=商品.商品分类ID 等于 商品分类.主键 查询列=商品分类.类别 |
动态数据集 |
商品分类 |
自动加载=是 |
按照表7-5列出的组件说明,制作新增商品页面。
表7-5 新增商品页组件说明
添加组件 |
父组件 |
属性设置 |
文本 |
页面 |
文本=新增商品 是否可见=block 文字对齐=居中 |
行列 |
页面 |
添加11列,一共14列 |
文本 |
列 |
文本=商品数据集的列名称 |
输入框 |
列 |
绑定数据列=商品数据集.列 |
显示框 |
列 |
绑定数据列=商品.状态 |
下拉列表 |
列 |
绑定数据列=商品.商品分类ID 绑定显示列=商品.商品分类ID-类别 下拉数据集=商品分类 下拉数据值=商品分类.主键 下拉显示名=商品分类.类别, |
图片附件 |
列 |
绑定数据列=商品.图片 只读=false |
富文本编辑器 |
列 |
引用=商品.详情 |
区块 |
页面 |
文字对齐=居中 |
确定按钮 |
区块 |
文本=确定 单击=保存并返回 目标数据集=商品 |
取消按钮 |
区块 |
文本=取消 单击=关闭 目标对象=页面 |
新增商品页面制作完成后,运行效果如图7-15所示。
图7-15 新增商品页面运行效果
(3)编辑商品页
编辑商品页和新增商品页几乎完全相同,因此使用继承的方式,即新增“编辑页面”,在页面组件的继承属性中选择“新增商品”,再将商品数据集的自动模式改为加载,新增商品页面中的标题“新增商品”改为“编辑商品”,见表7-6。
表7-6 编辑商品页组件说明
组件 |
属性设置 |
页面 |
继承选择新增商品 |
商品数据集 |
自动模式由新增改为加载 |
标题文本 |
文本由新增商品改为编辑商品 |
编辑商品页面制作完成后,运行效果如图7-16所示。
图7-16 编辑商品页面运行效果