Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）九（设置nginx保存图片的代理路径，修改和删除品牌）

Posted 2021-09-04 蓝盒子bluebox

Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）八

一、将图片保存到虚拟机（设置nginx代理路径）

1、上传相关图片

https://download.csdn.net/download/qq_44757034/20929216

下载相关图片
将图片上传到Linux 当中的/leyou/static目录下，并通过unzip命令解压

创建对应的目录



切换目录并，解压该文件

unzip image.zip

解压成功

2、设置nginx代理路径

修改nginx的配置


保存退出重新加载nginx

测试访问一张图片,这个的地址是和数据库当中的地址所对应的地址

http://image.leyou.com/images/10/5/1524297405556.jpg

二、修改品牌

1、点击编辑弹出窗口

（1）这个比较简单，修改show属性为true即可实现，我们绑定一个点击事件：

<v-btn icon @click="editBrand(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>

绑定的时间点击后将当前向的数据传入方法当中

（2）然后编写事件，改变show 的状态：

 editBrand(oldBrand){
        // 根据品牌信息查询商品分类
        this.show = true;
      },

如果仅仅是这样，编辑按钮与新增按钮将没有任何区别，关键在于，如何回显呢？

2、回显数据

回显数据，就是把当前点击的品牌数据传递到子组件（MyBrandForm）。而父组件给子组件传递数据，通过props属性。

• 第一步：在编辑时获取当前选中的品牌信息，并且记录到data中

  先在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<Category>> queryByBrandId(@PathVariable("bid") Long id){

        List<Category> list = categoryService.queryByBrandId(id);

        if(CollectionUtils.isEmpty(list)){
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok(list);

    }

b、CategoryService

    public List<Category> 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<Category> {

    /**
     * 根据品牌id查询商品分类id  然后通过商品分类id查询对应所有的商品分类
     */
    @Select("SELECT * FROM tb_category WHERE id IN (SELECT category_id FROM tb_category_brand WHERE brand_id = #{bid})")
    List<Category> 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(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          }).catch(() => {
              this.$message.error("保存失败！");
          });

（2）BrandController

  @PostMapping("update")
    public ResponseEntity<Void>  updateBrand(Brand brand, @RequestParam("cids") List<Long> cids){
        //ResponseEntity<Void>表示该方法无返回值
        brandService.updateBrand(brand,cids);
        System.out.println(brand);
        //返回成功的状态码201,有返回值返回body没有则返回build
        System.out.println("update");
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }

（3）BrandService

 @Transactional
    public void updateBrand(Brand brand, List<Long> cids) {

        int count =  brandMapper.updateByPrimaryKey(brand);

        if(count != 1){
            throw new LyException(ExceptionEnum.BRAND_SAVE_ERROR);
        }
        brandMapper.deleteTbCateGoryBrandByBid(brand.getId());
        for(Long cid : cids){
            count =  brandMapper.insertCategoryBrand(cid,brand.getId());
            if(count != 1){
                throw new LyException(ExceptionEnum.BRAND_SAVE_ERROR);
            }
        }

    }

（4）运行测试

三、删除商品

1、完善页面信息

<v-btn icon @click="deleteBrand(props.item)" >
            <i class="el-icon-delete"/>
</v-btn>

 deleteBrand(oldBrand){

        this.$http.get("/item/category/deleteBrand?bid=" + oldBrand.id)
          .then(() => {
          // 关闭窗口
          this.$message.success("删除成功！");
          this.getDataFromServer();
        }).catch(() => {
          this.$message.error("删除失败！");
        });

      },

2、后台接口

（1）CategoryController

 @GetMapping("deleteBrand")
    public ResponseEntity<Void> deleteBrand(@RequestParam("bid") Long bid){

        boolean flag = categoryService.deleteBrandByBid(bid);

        if(flag){
            return ResponseEntity.status(HttpStatus.CREATED).build();
        }
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }

（2）CategoryService

  @Autowired
    private BrandMapper brandMapper;

    public boolean deleteBrandByBid(Long bid) {
        boolean flag = brandMapper.deleteTbCateGoryBrandByBid(bid);
        Brand brand = new Brand();
        brand.setId(bid);
        int num = brandMapper.delete(brand);
        if(flag == true && num > 0){
            return true;
        }
        return false;
    }

（3）BrandMapper

    @Delete("DELETE FROM tb_category_brand WHERE brand_id = #{id} ")
    boolean deleteTbCateGoryBrandByBid(Long id);

运行测试

会弹出成功信息