Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(1)

先在data中定义属性，用来接收用来编辑的brand数据：

我们在页面触发编辑事件时，把当前的brand传递给editBrand方法：上面已经做过（props.item）item是发送请求后返回的数据集

然后在editBrand中接收数据，赋值给oldBrand：

editBrand(oldBrand){

// 控制弹窗可见：

this.show = true;

// 获取要编辑的brand

this.oldBrand = oldBrand;

},

在data当中定义的oldBrand等于当前从函数参数传入的oldBrand

• 第二步：把获取的brand数据 传递给子组件

将当前获取的数据传递到窗口页面上

<brand-form @close=“closeWindow” :oldBrand=“oldBrand” />

• 第三步：在子组件中通过props接收要编辑的brand数据，Vue会自动完成回显

props:{

oldBrand:{

type:Object

}

},

通过watch函数监控oldBrand的变化，把值copy到本地的brand：

• Object.deepCopy 自定义的对对象进行深度复制的方法。

• 需要判断监听到的是否为空，如果为空，应该进行初始化

测试：发现数据回显了，除了商品分类以外

数据传递分析

3、商品分类回显

为什么商品分类没有回显？

因为品牌中并没有商品分类数据。我们需要在进入编辑页面之前，查询商品分类信息：

（1）后台提供接口

a、CategoryController

@GetMapping(“bid/{bid}”)

public ResponseEntity<List> queryByBrandId(@PathVariable(“bid”) Long id){

List list = categoryService.queryByBrandId(id);

if(CollectionUtils.isEmpty(list)){

return new ResponseEntity<>(HttpStatus.NOT_FOUND);

}

return ResponseEntity.ok(list);

}

b、CategoryService

public List queryByBrandId(Long id) {

return categoryMapper.queryByBrandId(id);

}

c、CategoryMapper

package com.leyou.item.mapper;

import com.leyou.item.pojo.Category;

import org.apache.ibatis.annotations.Select;

import tk.mybatis.mapper.common.Mapper;

import java.util.List;

public interface CategoryMapper extends Mapper {

/**

• 根据品牌id查询商品分类id 然后通过商品分类id查询对应所有的商品分类

*/

@Select(“SELECT * FROM tb_category WHERE id IN (SELECT category_id FROM tb_category_brand WHERE brand_id = #{bid})”)

List queryByBrandId(Long id);

}

（2）完善回显页面

editBrand(oldBrand){

// 根据品牌信息查询商品分类

this.$http.get(“/item/category/bid/” + oldBrand.id)

.then(({data}) => {

// 控制弹窗可见：

this.show = true;

// 获取要编辑的brand

this.oldBrand = oldBrand

// 回显商品分类

this.oldBrand.categories = data;

})

},

（3）运行测试

4、新增窗口数据干扰

但是，此时却产生了新问题：新增窗口竟然也有数据？

原因：

​ 如果之前打开过编辑，那么在父组件中记录的oldBrand会保留。下次再打开窗口，如果是编辑窗口到没问题，但是新增的话，就会再次显示上次打开的品牌信息了。

解决：

​ 新增窗口打开前，把数据置空。

addBrand() {

// 控制弹窗可见：

this.show = true;

// 把oldBrand变为null

this.oldBrand = null;

}

5、提交表单时判断是新增还是修改

新增和修改是同一个页面，我们该如何判断？

父组件中点击按钮弹出新增或修改的窗口，因此父组件非常清楚接下来是新增还是修改。

因此，最简单的方案就是，在父组件中定义变量，记录新增或修改状态，当弹出页面时，把这个状态也传递给子组件。

• 第一步：在父组件中记录状态：

• 第二步：在新增和修改前，更改状态：

• 第三步：传递给子组件

• 第四步，子组件接收标记：

标题的动态化：

表单提交动态：

axios除了除了get和post外，还有一个通用的请求方式：

this.$http({

method: this.isEdit ? ‘put’ : ‘post’,

url: ‘/item/brand’,

data: this.$qs.stringify(params)

}).then(() => {

// 关闭窗口

this.$emit(“close”);

this.$message.success(“保存成功！”);

}).catch(() => {

this.$message.error(“保存失败！”);

});

6、完善修改表单的提交

（1）完善页面

this.$http({

method: ‘post’,

url: this.isEdit ? ‘/item/brand/update’:‘/item/brand’,

data: this.$qs.stringify(params)

}).then(() => {

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

试真题精编解析》。**

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】