做网站需要懂哪些语言,成都广告设计公司排名,计算机网络毕业设计,邯郸市住房和城乡建设网站spu管理模块业务
spu 可以理解为类
例如 people类【spu】
sku可以理解为实例
例如#xff1a;小明 18 男
spu跟sku可以理解为类跟多个实例的关系
spu管理模块静态 templatedivel-card stylemargin: 20px 0pxCategorySelect get…spu管理模块业务
spu 可以理解为类
例如 people类【spu】
sku可以理解为实例
例如小明 18 男
spu跟sku可以理解为类跟多个实例的关系
spu管理模块静态 templatedivel-card stylemargin: 20px 0pxCategorySelect getCategoryIdgetCategoryId :show!show/CategorySelect/el-cardel-card stylemargin: 20px 0px!-- 底部这里将来是有三部分进行切换 --div!-- 展示spu列表的结构 --el-button typeprimary iconel-icon-plus 添加spu /el-buttonel-table border stylewidth: 100%;el-table-column typeindex label序号 width80 aligncenter/el-table-columnel-table-column labelSPU名称 widthwidth propprop/el-table-columnel-table-column labelSPU描述 widthwidth propprop/el-table-columnel-table-column label操作 widthwidth propproptemplate slot-scope{row,$index}el-button typesuccess iconel-icon-plus sizemini/el-buttonel-button typewarning iconel-icon-edit sizemini/el-buttonel-button typeinfo iconel-icon-info sizemini/el-buttonel-button typedanger iconel-icon-delete sizemini/el-button/template/el-table-column/el-table!-- size-changesizeChangecurrent-changecurrentChange --el-paginationstyletext-align:center;:page-sizes[3,5,10]:page-size3layoutprev, pager, next, jumper,-,sizes,total:total23 background:pager-count7/el-pagination/divdiv/divdiv/div/el-card/div
/templatescript
export default {data() {return {category1Id: ,category2Id: ,category3Id: ,// 控制三级联动的可操作show: true}},methods: {getCategoryId({ categoryId, level }) {// categoryId获取到一二三级分类的id level为了区分是几级的idif (level 1) {this.category1Id categoryIdthis.category2Id this.category3Id } else if (level 2) {this.category2Id categoryIdthis.category3Id } else {//代表三级分类的id有了this.category3Id categoryId//发请求获取平台的属性数据this.getSpuList()}},getSpuList() {}}
}
/scriptstyle
/style
动态展示spu列表 这里我不是很懂明明element-ui自己封装了一个title属性但是还要自己去封装一个button 这里要注意的是这个按钮是活的因此不能使用简写
我们把这个按钮封装 全局中以便后续的使用 通过给他传递title参数来显示提示 点击分页器第几页按钮的回调current-change element-ui都已经给我们封装好了我直接修改page给传进来的page然后在调用接口就可以拿到数据了 这里我们可以采用这种方式就是默认没有传参数进来page是第一页如果传参数进来那这个page直接别赋值未传进来的参数 分页器的某一页数据条数发生变化的回调逻辑跟上表述的一样
Spu管理内容的切换
由三部分来切换的
--展示spu列表结构
--添加spu|修改spu
--展示添加spu结构
我们可以通过数字来控制
而我们可以将这俩部分拆分为组件来展示 SpuForm静态组件完成
给他绑定一个点击事件点击的时候直接修改他的scene就可以了
书写静态页面这里要用到这个照片墙的功能 界面
templatedivel-form refform label-width80pxel-form-item labelspu名称el-input placeholderspu名称/el-input/el-form-itemel-form-item label品牌el-select placeholder请选择品牌 valueel-option label value/el-option/el-select/el-form-itemel-form-item labelspu描述el-input typetextarea rows4 placeholder描述/el-input/el-form-itemel-form-item labelspu图片el-upload actionhttps://jsonplaceholder.typicode.com/posts/ list-typepicture-card :on-previewhandlePictureCardPreview :on-removehandleRemovei classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcdialogImageUrl alt //el-dialog/el-form-itemel-form-item label销售属性el-select placeholder还有三项未选择 valueel-option labellabel valuevalue/el-option/el-selectel-button typeprimary iconel-icon-plus添加销售属性/el-buttonel-table stylewidth: 100%; border el-table-colum typeindex label序号 width80px aligncenter/el-table-columel-table-colum typeindex label属性名 widthwidth/el-table-columel-table-colum typeindex label属性名称列表 widthwidth /el-table-columel-table-colum typeindex label操作 widthwidth /el-table-colum/el-table/el-form-itemel-form-itemel-button typeprimary保存/el-buttonel-button取消/el-button/el-form-item/el-form/div
/template
SpuForm请求业务得分析
---品牌的数据需要发请求的 http://localhost:9529/dev-api/admin/product/baseTrademark/getTrademarkList ---获取平台中全部的销售属性3个 http://localhost:9529/dev-api/admin/product/baseSaleAttrList ---获取某一个SPU信息 Request URL: http://localhost:9529/dev-api/admin/product/getSpuById/5092 --获取SPU图片 http://localhost:9529/dev-api/admin/product/spuImageList/5092
先做一个点击取消返回原样的逻辑 子组件发射自定义事件
父组件绑定这个自定义事件
SPUFORM子组件发请求地方分析 不能书写在mounted里面 因为咱们刚才看了一下已经完成的项目每一次显示SpuForm子组件的时候都会发四个请求 而我们为什么不能放在子组件的mounted里面因为v-show只是控制SpuForm子组件显示与隐藏 这个子组件并没有卸载只是显示或者隐藏导致mounted只能执行一次。
解决方法就是拿到子组件然后每次修改都发请求
在父组件当中可以通过$ref获取子组件等等
获取SpuForm数据 先写api然后是调用它 我们书写在initSpuData调用的时机就是当我们修改它的时候 测试调用一下发现是一个对象。那么我们需要存储一下他的数据。按照同样的方式获取其他服务器返回来的数据 返回回来的数据都是有数据的
async initSpuData(spu){// spu信息let spuResultawait this.$Api.spu.reqSpu(spu.id)if(spuResult.code200){this.spuspuResult}// 品牌信息let tradeMarkResultawait this.$Api.spu.reqTradeMarkList()if(tradeMarkResult.code200){this.tradeMarkListtradeMarkResult.data}// spu图片let spuImageResultawait this.$Api.spu.reqSpuImageList(spu.id)if(spuImageResult.code200){this.spuImageListspuImageResult.data}// 平台全部的销售属性let saleResultawait this.$Api.spu.reqBaseSaleAttrList()if(saleResult.code200){this.saleAttrListsaleResult.data}}
SpuForm组件数据展示与收集数据
添加SPU的时候需要给服务器携带的参数
{category3Id: 0,tmId: 0,description: string,spuName: string,spuImageList: [{id: 0,imgName: string,imgUrl: string,spuId: 0}],spuSaleAttrList: [{baseSaleAttrId: 0,id: 0,saleAttrName: string,spuId: 0,spuSaleAttrValueList: [{baseSaleAttrId: 0,id: 0,isChecked: string,saleAttrName: string,saleAttrValueName: string,spuId: 0}]}],
} 图片上传的属性 这里有一个注意的点就是file-list.由于照片墙显示图片的数据需要数组数组里面的元素需要name与url字段因此需要把服务器返回的数据进行修改 完整展示效果如上
SpuForm销售属性的数据展示
整个项目当中销售属性一共有三个颜色尺码版本 我们还需要通过计算属性计算出未选择的销售属性 假如第一次过滤的是颜色然后到spu这个数组中对比一下如果spu.saleAttrList是尺寸
那就是颜色!尺寸返回的结果是真也就是我们需要的数据过滤出来反之颜色!颜色为假那就不要这个数据 展示的是name收集的是id
完成SpuForm照片墙数据的收集
----照片墙何时收集数据 ---预览照片墙的时候显示大的图片的时候需要收集数据吗? ---不需要收集的【数据已经有了】 ---照片墙在删除图片的时候需要收集数据的。 ---照片墙在添加图片的时候需要收集数据的。 销售属性的添加的操作
------收集哪些数据 baseSaleAttrId saleAttrName spuSaleAttrValueList 响应的id和name都可以拿到
-----收集到哪里呀 把数据收集到SPU对象 销售属性值展示与收集
上面的操作只完成了添加销售属性但是销售属性列表并没有实现 我们通过row.inputVisible来控制input和button的显示row.inputValue来收集数据
首先我们需要先把着俩个属性变成响应式数据
因此我们需要使用this.$set
新增的销售属性值需要收集的字段: baseSaleAttrId saleAttrValueName
两种情况要考虑1是属性值不能未空 2属性值不能重复 删除销售属性与属性值操作
当我们点击这个属性列表的删除标记时其实就是删除spuSaleAttrValueList数组里面的数据
删除索引值 删除行
完成添加spu的操作 1.先写接口通过判断携带是否有spu.id如果有就是修改这个对象如果没有那么就是添加spu。主要是这俩个接口结构类似
2.当我们点击保存按钮的时候要整理参数照片墙数据对于图片需要携带imageName与imageUrl字段 3.发起请求 4.父组件切换完后需要重新获取数据同时当前页page传进去
完成spu操作
就是把spu的数据提交给服务器新增的业务
点击添加SPU按钮的时候需要发请求两个:获取品牌的数据、全部销售属性的数据 点击添加spu按钮发起请求调用子组件中的事件 搞定
这里有一个注意点就是当添加的时候应该返回的是第一页。而修改才是当前页 通过传递过来第二个参数flag传递过来的是修改还是添加来确认停留在第几页
点击取消按钮清除数据 Object.assign(this._data,this.$options.data()); Object.assign(this._data, this.$option.data()) 这行代码的作用是将 this.$option.data() 返回的对象中的属性复制到 this._data 对象中。如果 this._data 对象中存在相同的属性那么这些属性的值将被覆盖。因此这行代码可以清除 this._data 对象中的一些数据。
就是B复制到A
Object.assign()合并对象
this._data就是初始的data值
注意当点击取消按钮时出现如下的效果这个是因为父组件的changeScene这个方法传入的形参应该是一个对象而不是俩个参数上面是我写错了因此出现了该错误。 删除spu 需要使用element-ui的这个组件 template el-popconfirm title这是一段内容确定删除吗 el-button slotreference删除/el-button /el-popconfirm /template 把原先的替换掉这里要注意的是原先的插槽 slotreference需要重现添加到button上并且原先是删除按钮点击事件应该修改为弹出框确认触发。 完成这里注意删除完成后需要重新发起请求并且spu个数大于1删除停留当前页小于1返回上一页
