商城-商品管理-商品新增v2

1.商品新增

当我们点击新增商品按钮：

就会出现一个弹窗：

里面把商品的数据分为了4部分来填写：

• 基本信息：主要是一些简单的文本数据，包含了SPU和SpuDetail的部分数据，如
  • 商品分类：是SPU中的cid1，cid2，cid3属性
  • 品牌：是spu中的brandId属性
  • 标题：是spu中的title属性
  • 子标题：是spu中的subTitle属性
  • 售后服务：是SpuDetail中的afterService属性
  • 包装列表：是SpuDetail中的packingList属性
• 商品描述：是SpuDetail中的description属性，数据较多，所以单独放一个页面
• 规格参数：商品规格信息，对应SpuDetail中的genericSpec属性
• SKU属性：spu下的所有Sku信息

对应到页面中的四个stepper-content：

1.1.弹窗事件

弹窗是一个独立组件：

并且在Goods组件中已经引用它：

并且在页面中渲染：

在新增商品按钮的点击事件中，改变这个dialog的show属性：

1.2.基本数据

我们先来看下基本数据：

1.2.1.商品分类

商品分类信息查询我们之前已经做过，所以这里的级联选框已经实现完成：

刷新页面，可以看到请求已经发出：

效果：

1.2.2.品牌选择

1.2.2.1页面

品牌也是一个下拉选框，不过其选项是不确定的，只有当用户选择了商品分类，才会把这个分类下的所有品牌展示出来。

所以页面编写了watch函数，监控商品分类的变化，每当商品分类值有变化，就会发起请求，查询品牌列表：

选择商品分类后，可以看到请求发起：

接下来，我们只要编写后台接口，根据商品分类id，查询对应品牌即可。

1.2.2.2后台接口

页面需要去后台查询品牌信息，我们自然需要提供：

请求方式：GET

请求路径：/brand/cid/{cid}

请求参数：cid

响应数据：品牌集合

BrandController

/**
     * 根据分类查询品牌
     * @param cid
     * @return
     */
@GetMapping("cid/{cid}")
public ResponseEntity<List<Brand>> queryBrandListByCid(@PathVariable("cid")Long cid){
   

    List<Brand> brandList = this.brandService.queryByCid(cid);
    if(CollectionUtils.isEmpty(brandList)){
   
        // 响应404
        return ResponseEntity.badRequest().build();
    }
    // 响应200
    return ResponseEntity.ok(brandList);
}

BrandService

public List<Brand> queryBrandByCategory(Long cid) {
   
    return this.brandMapper.queryByCategoryId(cid);
}

BrandMapper

根据分类查询品牌有中间表，需要自己编写Sql：

@Select("SELECT b.* FROM tb_brand b LEFT JOIN tb_category_brand cb ON b.id = cb.brand_id WHERE cb.category_id = #{cid}")
List<Brand> queryByCategoryId(Long cid);

效果：

1.2.3.其它文本框

剩余的几个属性：标题、子标题等都是普通文本框，我们直接填写即可，没有需要特别注意的。

1.3.商品描述

商品描述信息比较复杂，而且图文并茂，甚至包括视频。

这样的内容，一般都会使用富文本编辑器。

1.3.1.什么是富文本编辑器

百度百科：

通俗来说：富文本，就是比较丰富的文本编辑器。普通的框只能输入文字，而富文本还能给文字加颜色样式等。

富文本编辑器有很多，例如：KindEditor、Ueditor。但并不原生支持vue

但是我们今天要说的，是一款支持Vue的富文本编辑器：vue-quill-editor

1.3.2.Vue-Quill-Editor

GitHub的主页：https://github.com/surmon-china/vue-quill-editor

Vue-Quill-Editor是一个基于Quill的富文本编辑器：Quill的官网

1.3.3.使用指南

使用非常简单：

第一步：安装，使用npm命令：

npm install vue-quill-editor --save

第二步：加载，在js中引入：

全局引入：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

const options = {
   }; /* { default global options } */

Vue.use(VueQuillEditor, options); // options可选

局部引入：

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {
   quillEditor