Vue后台管理系统项目(17)收集属性名、属性值得操作、解决数据回显问题

目录

gitee仓库地址:

业务需求

1.书写接口

2.收集属性名

​3.收集属性值

4.解决返回按钮数据回显问题

---

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求

点击添加属性值,出现下图中间部分,我们可以输入相应的属性名称,点击保存,就可以在属性页面查看了,当我们点击保存的时候,就可以向服务器发请求,把相应的属性名称和属性值提交给服务器

然后在我们属性页面进行展示

1.书写接口

接口文档地址:http://39.98.123.211:8416/swagger-ui.html#/2183021697225223078423646246152550921475

接口地址:/admin/product/saveAttrInfo

 在api/product/attr.js中:书写api

//添加属性与属性值接口
// /admin/product/saveAttrInfo  post
export const reqAddAttr = (data)=>request({url:'/admin/product/saveAttrInfo',method:'post',data})
/* 对于添加一个属性不需要带id,id由服务器的数据库生成
{
  "attrName": "string",  属性名
  "attrValueList": [     属性名中属性值,因为属性值可以是多个,因此需要的是数组
    {
      "attrId": 0,        属性值得id
      "valueName": "string" 属性值
    }
  ],
  "categoryId": 0,     category3Id
  "categoryLevel": 3,
}
*/

2.收集属性名

在views/product/Attr/index.vue中:

 

开发者工具查看:收集成功

 3.收集属性值

在views/product/Attr/index.vue中:

 

 效果:

 现在我们是写死了的只有一行,我们需要刚开始默认不显示上图中框中的那行,然后我们点击添加属性值就出现一行,再点击添加又新增一行

在views/product/Attr/index.vue中:

 效果实现:

 

 4.解决返回按钮数据回显问题

当我们输入属性名和属性值的时候,我们点击取消,然后再次点添加属性值按钮,会发现我们原来输入的这些数据还在页面上面 

并且我们现在还能看到我们的数据中categoryId默认是0,是我们写死的,我们还需要收集一下三级分类的id 放到里面

那么我们这样做

修改前:

 修改后:绑定一个回调,而不是写死

 回调中这样写

 效果实现: