商城-商品规格管理-商品规格参数管理

2.商品规格参数管理
- 2.1.页面实现
- - 2.1.1.整体布局
  - 2.1.2.data中定义的属性
- 2.2.规格参数的查询
- - 2.2.1.树节点的点击事件
  - 2.2.2.后端代码
- 2.3.增、删、改（作业）

2.商品规格参数管理

2.1.页面实现

页面比较复杂，这里就不带着大家去实现完整页面效果了，我们一起分析一下即可。

2.1.1.整体布局

打开规格参数页面，看到如下内容：

因为规格是跟商品分类绑定的，因此首先会展现商品分类树，并且提示你要选择商品分类，才能看到规格参数的模板。一起了解下页面的实现：

可以看出页面分成3个部分：

v-card-title：标题部分，这里是提示信息，告诉用户要先选择分类，才能看到模板
v-tree：这里用到的是我们之前讲过的树组件，展示商品分类树，不过现在是假数据，我们只要把treeData属性删除，它就会走url属性指定的路径去查询真实的商品分类树了。
```
<v-tree url="/item/category/list" :isEdit="false"  @handleClick="handleClick" />
```
v-dialog：Vuetify提供的对话框组件，v-model绑定的dialog属性是boolean类型：
- true则显示弹窗
- false则隐藏弹窗

2.1.2.data中定义的属性

接下来，看看Vue实例中data定义了哪些属性，对页面会产生怎样的影响：

specifications：选中一个商品分类后，需要查询后台获取规格参数信息，保存在这个对象中，Vue会完成页面渲染。
oldSpec：当前页兼具了规格的增、改、查等功能，这个对象记录被修改前的规格参数，以防用户撤销修改，用来恢复数据。
dialog：是否显示对话框的标记。true则显示，false则不显示
currentNode：记录当前选中的商品分类节点
isInsert：判断接下来是新增还是修改

2.2.规格参数的查询

点击树节点后要显示规格参数，因此查询功能应该编写在点击事件中。

了解一下：

2.2.1.树节点的点击事件

当我们点击树节点时，要将v-dialog打开，因此必须绑定一个点击事件：

我们来看下handleClick方法：

handleClick(node) {// 判断点击的节点是否是父节点（只有点击到叶子节点才会弹窗）if (!node.isParent) {// 如果是叶子节点，那么就发起ajax请求，去后台查询商品规格数据。this.$http.get("/item/spec/" + node.id).then(resp => {// 查询成功后，把响应结果赋值给specifications属性，Vue会进行自动渲染。this.specifications = resp.data;// 记录下此时的规格数据，当页面撤销修改时，用来恢复原始数据this.oldSpec = resp.data;// 打开弹窗this.dialog = true;// 标记此时要进行修改操作this.isInsert = false;}).catch(() => {// 如果没有查询成功，那么询问是否添加规格this.$message.confirm('该分类还没有规格参数，是否添加?').then(() => {// 如果要添加，则将specifications初始化为空this.specifications = [{group: '',params: []}];// 打开弹窗this.dialog = true;// 标记为新增this.isInsert = true;})})}
}

因此，我们接下来要做的事情，就是编写接口，实现规格参数的查询了。

2.2.2.后端代码

实体类

@Table(name = "tb_specification")
public class Specification {@Idprivate Long categoryId;private String specifications;public Long getCategoryId() {return categoryId;}public void setCategoryId(Long categoryId) {this.categoryId = categoryId;}public String getSpecifications() {return specifications;}public void setSpecifications(String specifications) {this.specifications = specifications;}
}

mapper

public interface SpecificationMapper extends Mapper<Specification> {}

controller

先分析下需要的东西，在页面的ajax请求中可以看出：

请求方式：查询，肯定是get
请求路径：/spec/{cid} ，这里通过路径占位符传递商品分类的id
请求参数：商品分类id
返回结果：页面是直接把resp.data赋值给了specifications：

那么我们返回的应该是规格参数的字符串

代码：

@RestController
@RequestMapping("spec")
public class SpecificationController {@Autowiredprivate SpecificationService specificationService;@GetMapping("{id}")public ResponseEntity<String> querySpecificationByCategoryId(@PathVariable("id") Long id){Specification spec = this.specificationService.queryById(id);if (spec == null) {return new ResponseEntity<>(HttpStatus.NOT_FOUND);}return ResponseEntity.ok(spec.getSpecifications());}
}

service:

@Service
public class SpecificationService {@Autowiredprivate SpecificationMapper specificationMapper;public Specification queryById(Long id) {return this.specificationMapper.selectByPrimaryKey(id);}
}

页面访问测试：

目前，我们数据库只提供了3条规格参数信息：

我们访问：http://api.leyou.com/api/item/spec/76

然后在后台系统中测试：

当我们点击一个还不存在的规格参数的商品分类：

2.3.增、删、改（作业）

增删改的作业就留给大家去完成了。页面中接口都已定义，你要做的就是实现后台接口。

商城-商品规格管理-商品规格参数管理相关推荐

RBP系统管理之服务器参数管理
<p> </p> <p style="text-indent: 2em;">RBP的系统管理中包括组织机构管理.业务角色管理.系统用户管理.服务 ...
【javaWeb微服务架构项目——乐优商城day05】——商品规格参数管理(增、删、改,查已完成)，SPU和SKU数据结构，商品查询
乐优商城day05 0.学习目标 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2.4. ...
【Lilishop商城】No3-5.模块详细设计，商品模块-1（商品分类、品牌管理、规格管理、参数、计量单位、店铺分类）的详细设计
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括 ...
商城项目-商品规格参数管理
2.商品规格参数管理 2.1.页面实现页面比较复杂,这里就不带着大家去实现完整页面效果了,我们一起分析一下即可. 2.1.1.整体布局打开规格参数页面,看到如下内容: 因为规格是跟商品分类绑定的, ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十（商品的规格类型以及参数管理）
一.商品规格数据结构商品中都有属性,不同商品,属性往往不同,这一部分数据很重要,我们一起来看看: 1.规格属性内容 (1) 我们看下京东中商品的规格属性︰ -款华为手机的属性: (2)横表和竖表值 ...
乐优商城（四）商品规格管理
文章目录 1. 商品规格 1.1 SPU 和 SKU 1.2 分析商品规格的关系 1.3 数据库设计 1.3.1 商品规格组表 1.3.2 商品规格参数表 2. 商品规格组 2.1 商品规格组前端 2 ...
商城-商品规格管理-商品规格数据结构
商城-商品规格管理-商品规格数据结构 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2. ...
乐优商城学习笔记五-商品规格管理
0.学习目标了解商品规格数据结构设计思路实现商品规格查询了解SPU和SKU数据结构设计思路实现商品查询了解商品新增的页面实现独立编写商品新增后台功能 1.商品规格数据结构乐优商城是一个全 ...
mysql 商品规格表_完成后台管理系统功能（九）商品规格列表的展示，添加以及删除...
商品规格的实现图: 规律: 1.同一类商品的规格项分组相同. 2.同一类商品的规格项目是相同的.规格项目是跟商品关联. 3.不同商品规格参数的值是不同的 1 页面效果展示: 2.规格列表的展示功能用 ...

商城-商品规格管理-商品规格参数管理

商城-商品规格管理-商品规格参数管理

2.商品规格参数管理

2.1.页面实现

2.1.1.整体布局

2.1.2.data中定义的属性

2.2.规格参数的查询

2.2.1.树节点的点击事件

2.2.2.后端代码

2.3.增、删、改（作业）

商城-商品规格管理-商品规格参数管理相关推荐

最新文章

热门文章